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:

Table caption
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.