A Guide to HTML Tables

Michael Gearon

Last updated on July 7, 2021

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

<table class="table">
<tbody>
<tr>
<th>Element</th>
<th>Purpose</th>
</tr>
<tr>
<td><code class="language-markup">
The container for all the table



A table row




A table cell which contains the data



A table header cell which contains the data



Within this element should be all the headers cells for the table



The majority of the data of the table should be within this element



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><!--Insert your rows, columns, cells etc inside the table opening and closing tags--></table>

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

<pre><code class="language-markup">

 

 

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

 

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

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

for

so it could be:

First heading, first row
Second heading, first row


First column, second row
Second column, second row

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>
<tbody>
<tr><!--first row-->
<th>First heading, first row</th>
<th>Second heading, first row</th>
</tr>
<tr><!--second row-->
<td colspan="2">Spans column one and two, second row</td>
</tr>
</tbody>
</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>
<tbody>
<tr><!--first row-->
<td rowspan="2">First heading, first row</td>
<td>Second heading, first row</td>
</tr>
<tr><!--second row-->
<td>Spans column one and two, second row</td>
</tr>
</tbody>
</table>

Output

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

thead, tbody and tfoot

 

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

 

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

First published on November 30, 2015