HTML PRIMER
by Jim Gordley
2008-2016 HomeSpun Internet Enterprises

TABLES

Table Tags

Tables can be a very important tool for page layout. Using a table allows you to create columns and rows of data cells that contain page content.

A table always starts with the <table> and ends with the </table>.

A table is defined using table rows <tr> and <td> table data tags each of them have a closing pair. Table headings are defined using the <th></th> tags.

HTML for a simple table with only one column and one row is displayed in the example below.

<table>
<tr>
  <td></td>
</tr>
</table>

Each set of <tr></tr> creates a row.
Each set of   <td></td> creates a cell.

The <tr></tr> hold the   <td></td> within the row.

EXAMPLE:
  <tr>  <td></td>  </tr>

The content of each cell is placed between the   <td></td> tag set. Anything can be placed within the cell, even other tables. As long as the tags are nested properly.

 


 

Common Attributes

  • border
    • border="2" sets a visible border to a width of 2 pixels.
    • border="0" sets the border to 0 pixels. (no border can be seen).
  • width
    • percentage width="75%" uses 75% of the available screen space.
    • pixels width="75" sets the width to exactly 75 pixels regardless of screen space.

A Single Celled Table

Cell 1,1

<table border="2" align="center" width="350">
<tr>
  <td>Cell 1,1.</td>
</tr>
</table>

A Two Celled Table

Cell 1,1

Cell 2,1

<table border="2" align="center" width="350">
<tr>
  <td valign="top"><p>Cell 1,1</p></td>
  <td valign="top"><p>Cell 2,1</p></td>

</tr>
</table>

Adding Captions & Headings, Spanning Columns & Rows

A table caption along the top outer edge of the table
R
O
W
S
Heading 1 Heading 2 Heading 3
CELL 1,1 CELL 2,1 CELL 3,1
CELL 1,2 CELL 2,2 CELL 3,2
CELL 1,3 CELL 2,3
CELL 1,4 CELL 2,4

<table border="2" align="center" width="350" cellspacing="0" cellpadding="3">
<caption>A table caption along the top outer edge of the table</caption>
<tr class="head">
  <th rowspan="6">R<br>O<br>W<br>S</th>
</tr>
<tr class="head">
  <th>Heading 1</th>
  <th>Heading 2</th>
  <th>Heading 3</th>

</tr>
<tr class="odd">
  <td>CELL 1,1</td>
  <td>CELL 2,1</td>
  <td>CELL 3,1</td>
</tr>
<tr class="even">
  <td>CELL 1,2</td>
  <td>CELL 2,2</td>
  <td>CELL 3,2</td>
</tr>
<tr class="odd">
  <td colspan="2">CELL 1,3</td>
  <td>CELL 2,3</td>
</tr>
<tr class="even">
  <td>CELL 1,4</td>
  <td colspan="2">CELL 2,4</td>
</tr>
</table>

  • colspan
    • Defines the number of columns a single cell will span
  • rowspan
    • Defines the number of rows a single cell will span
  • align
    • left (default)
    • center
    • right
  • valign
    • top
    • middle (default)
    • bottom
  • cellspacing
    • Defines the width and hieght in pixels between cells also known as the gutter.
  • cellpadding
    • Defines the width and hieght in pixels inside each cell think of it like a margin.

Syntex and Nesting