Tables
A table is a structured set of data made up of rows and columns (tabular data). They usually contain information that you’d typically find in something like a spreadsheet or on a grid. The purpose of a table is to allow a visitor to quickly and easily lookup and compare information. A calendar is a table that lets you check the year, month, day of the week, date, and any special information about that particular date such as holidays or appointments.
Table
<table></table>
The table element doesn’t do very much by itself.
Table Header
Used to add cells at the top of the table.
<thead></thead>
Table Caption
Used within the table header to describe the information in the table.
<caption></caption>
Table Body
The main body of the table.
<tbody></tbody>
Table Rows
Used to represent table rows.
<tr></tr>
Table Cell Heads
Used within the table rows to represent column heads and row heads. Apply the scope
attribute with either the row
or col
values to let the browser know what the element is the head of..
<th></th>
Table Cells
Used within the table rows to represent cells in a table.
<td></td>
rowspan
<td rowspan="2"></td>
colspan
<td colspan="2"></td>
Table Footer
Used to add cells at the bottom of the table.
<tfoot></tfoot>
A Complete Table
A complete table would look something like this:
Head cell one info | Head cell two info |
---|---|
Cell one info | Cell two info |
Cell three info | Cell four info |
Cell five info | Cell six info |
Foot cell one info | Foot cell two info |
<table>
<caption>Table caption</caption>
<thead>
<tr>
<th scope="col">Cell one info</th><th scope="col">Cell two info</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell one info</td><td>Cell two info</td>
</tr>
<tr>
<td>Cell three info</td><td>Cell four info</td>
</tr>
<tr>
<td>Cell five info</td><td>Cell six info</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Foot cell one info</td><td>Foot cell two info</td>
</tr>
</tfoot>
</table>
The table element, more than any other, requires additional CSS for Tables to reach its full potential.