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
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.
Colspan Attribute
Short for
column span,
colspan allows a single cell to take the space of multiple columns.
Rowspan Attribute
A combination of
row + span,
rowspan allows a single cell to span across multiple rows.
Table Nesting
More complex arrangements can be created by placing an entire
table inside the cell
(td) of another table.
Captions