Learning Code

Table Elements

table is the parent element
tr (short for table row) is inside (a child) of the table element
th (short for table header) is placed inside (a child) of the tr element and is used to give a title/heading to a column
td (short for table data; also called a cell) is placed inside (a child) of the tr element and contains the actual content for the table

A Basic Table

More +

This is a single cell in a basic table

<table border="1">
<tr>
<td>This is a single cell in a basic table </td> </tr>
</table>

The table and cell sizes are based upon the amount of content.To set a specific size, you can add the style attribute and add width and/or height just like with an image.

A temporary border attribute has been placed in the opening table tag. This makes the table structure more obvious. This is deprecated code that should only be used for testing. To add a permanent border, use CSS instead.

Columns and Rows

Tables can have multiple columns and/or multiple rows.

More +

This is a heading
This cell is on the left	This cell is on the right

<table border="1">
<tr>
<th>This is a heading </th> </tr>
<tr>
<td>This cell is on the left </td>
<td>This cell is on the right </td> </tr>
</table>

Placing multiple td in a single row creates multiple columns. Placing multiple tr in the table creates multiple rows. Notice that if one row has more cells than the other(s), the other rows make space for the additional column(s).

Colspan Attribute

Short for column span, colspan allows a single cell to take the space of multiple columns.

More +

This is a heading
This cell is on the left	This cell is on the right

<table border="1">
<tr>
<th colspan="2">This is a heading </th> </tr>
<tr>
<td>This cell is on the left </td>
<td>This cell is on the right </td> </tr>
</table>

Colspan is placed in the opening tag of either th or td. The number should equal the number of columns the cell should span across.

Rowspan Attribute

A combination of row + span, rowspan allows a single cell to span across multiple rows.

More +

This is a heading
Left	Right
Left	Right

<table border="1">
<tr>
<th colspan="2">This is a heading </th> </tr>
<tr>
<td>Left </td>
<td rowspan="2">Right </td> </tr>
<tr>
<td>Left </td>
</tr>
</table>

Rowspan is placed in the opening tag of either th or td. Rows only span down - trying to add rowspan to a cell in a lower row will not make it span upward. The number should equal the number of rows the cell should span across.

Table Nesting

More complex arrangements can be created by placing an entire table inside the cell (td) of another table.

More +

This is a heading

Left

<table border="1">
<tr>
<th colspan="2">This is a heading </th> </tr>
<tr>
<td>Left </td>
<td rowspan="2">
<table>
<tr>
<td>1</td><td>2</td>
</tr>
</table>
</td> </tr>
<tr>
<td>Left </td>
</tr>
</table>

Captions

More +

This is a caption.
This is a single cell

<table border="1">
<caption> This is a caption. </caption>
<tr>
<td>This is a single cell </td> </tr>
</table>

The caption element can be added just after the opening table tag or just before the closing table tag. Captions display at the top of the table.