Michael Gearon

A Guide to HTML Tables

Michael Gearon

Last updated on

An example of a HTML table

In HTML we can create tables using the <table> element. We can then create rows using the <tr> element and then columns inside a row using the the <td> elements. Tables can also contain headers that can be defined using the <th> element. Using a table makes information easier to compare and scan for users.

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.

Basic table example

Now that we know the basic elements that create a table lets take a look at an example of a HTML table. We will create a table with 2 rows and 2 columns.

<table>
 <tr>
  <td>Cell 1</td>
  <td>Cell 2</td>
 </tr>
 <tr>
  <td>Cell 1</td>
  <td>Cell 2</td>
 </tr>
</table>

Adding structure with header, body and footer

Good structure is an important part of HTML. When we create complex tables it would be good practice to provide more clarity about the structure of our table. To do this we can use the <thead>, <tfoot> and <tbody> elements which represent the header, body and footer sections of the table.

<table>
 <thead>
  <tr>
   <th>Header cell 1</th>
   <th>Header cell 2</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Body cell 1</td>
   <td>Body cell 2</td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <td>Footer cell 1</td>
   <td>Footer cell 2</td>
  </tr>
 </tfoot>
</table>

Captions

To provide extra context of what is within our table we can use the <caption> element which sits just inside the <table> element. The caption we create should be brief but descriptive enough to say what the table contains.

<table>
 <caption>This is an example table</caption>
 <thead>
  <tr>
   <th>Header cell 1</th>
   <th>Header cell 2</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Body cell 1</td>
   <td>Body cell 2</td>
  </tr>
  <tr>
   <td colspan="2">Body cell 1 and 2</td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <td>Footer cell 1</td>
   <td>Footer cell 2</td>
  </tr>
 </tfoot>
</table>

Spanning multiple rows and columns attributes

Spanning rows and columns is a common feature needed in tables and it’s possible through HTML using the rowspan and colspan attributes to span multiple rows and columns in tables. Using our example from the structures we will add a new row in the body of the table and span the 1 cell across both columns.

<table>
 <thead>
  <tr>
   <th>Header cell 1</th>
   <th>Header cell 2</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Body cell 1</td>
   <td>Body cell 2</td>
  </tr>
  <tr>
   <td colspan="2">Body cell 1 and 2</td>
  </tr>
 </tbody>
 <tfoot>
  <tr>
   <td>Footer cell 1</td>
   <td>Footer cell 2</td>
  </tr>
 </tfoot>
</table>

Cellpadding and cellspacing attributes

When adding spacing in CSS we normally use properties like padding and margin. In tables we can use cellspacing to set the space between table cells. Whilst cellpadding sets the spacing between the border of each cell and the content inside the cells. The cellpading and cellspacing attributes are set to the table element, in our example we will add a padding (the space between the border and the contents) of 6px and increase the space between the cells by 4px using the cellspacing attribute.

<table border="1" cellpadding="6" cellspacing="4">
 <tr>
  <td>Cell 1</td>
  <td>Cell 2</td>
 </tr>
 <tr>
  <td>Cell 1</td>
  <td>Cell 2</td>
 </tr>
</table>

Background and border attributes

We can also set the background colour and the size of the border and the colour of the border using the border, bordercolor and bgcolor attributes in HTML. All of these attributes are applied to the table element like the cellpadding and cellspacing attributes. We will set a fairly horrible choice of colours with a border of 1 in purple and a blue background for our example.

<table border="1" bordercolor="purple" bgcolor="blue">
 <tr>
  <td>Cell 1</td>
  <td>Cell 2</td>
 </tr>
 <tr>
  <td>Cell 1</td>
  <td>Cell 2</td>
 </tr>
</table>
Michael Gearon

Written by

Michael Gearon

Senior Interaction Designer and Co-Author to Tiny CSS Projects