A Guide to HTML Tables

Tables have been used in the past (hopefully not still) to design the full layouts of websites. However using tables in this way is bad practice as accessibility tools such as screen readers to navigate pages that use tables as the layout. In this post we will look in-depth into HTML tables, the basics and advanced elements and attributes.

Summary

Table Elements

For a quick reference guide here is a list of all table elements

Element	Purpose
<table>	The container for all the table
<tr>	A table row
<td>	A table cell which contains the data
<th>	A table header cell which contains the data
<thead>	Within this element should be all the headers cells for the table
<tbody>	The majority of the data of the table should be within this element
<tfoot>	Within this element should be all the footer cells for the table

Table Attributes

Attribute	Purpose
colSpan
rowSpan
headers

The basics properties

To start laying out the table declare:

<table>

</table>

We then need to create our first row, to do this we do the following:

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

Now we have a table, with a row but no columns, to do this we do the following:

<table>
  <tr>
    <td>First column, first row</td>
    <td>Second column, first row</td>
  </tr>
  <tr>
    <td>First column, second row</td>
    <td>Second column, second row</td>
  </tr>
</table>

Output

First column, first row	Second column, first row
First column, second row	Second column, second row

We have now created a basic table that contains two rows, and two columns. However what if you want to add headers, or to span columns, in the next part we will look into tables further.

Advanced section

Heading

Some tables you create may contain headings in this case we change the <td> for <th> so it could be:

<table>
  <tr>
    <th>First heading, first row</th>
    <th>Second heading, first row</th>
  </tr>
  <tr>
     <td>First column, second row</td>
     <td>Second column, second row</td>
  </tr>
</table>

Spanning one cell over multiple columns

You may also need sometimes for cells to span over multiple columns, to do this we can use the colspan attribute. So if we want to span one cell over two columns we would do the following:

<table>
  <tr>
    <th>First heading, first row</th>
    <th>Second heading, first row</th>
  </tr>
  <tr>
    <td colspan="2">Spans column one and two, second row</td>
  </tr>
</table>

Spanning one cell over multiple rows

Similar to the colspan, the rowspan spans a cell over multiple rows. To do this we do the following:

<table>
  <tr>
    <td rowspan="2">First heading, first row</td>
    <td>Second heading, first row</td>
  </tr>
  <tr>
    <td>Spans column one and two, second row</td>
</table>

Output

First heading, first row	Second heading, first row
	Spans column one and two, second row

thead, tbody and tfoot

<table>
  <thead>
  <tr>
     <th>Header Title 1</th>
     <th>Header Title 2</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
      <td>Footer Cell 1</td>
      <td>Footer Cell 2</td>
  </tr>
  </tfoot>
  <tbody>
  <tr>
     <td>Main Cell Content 1</td>
     <td>Main Cell Content 2</td>
  </tr>
  <tr>
      <td>Main Cell Content 1</td>
      <td>Main Cell Content 2</td>
  </tr>
  </tbody>
</table>

Output

Header Title 1	Header Title 2
Footer Cell 1	Footer Cell 2
Main Cell Content 1	Main Cell Content 2
Main Cell Content 1	Main Cell Content 2