A Guide to HTML Tables

Michael Gearon · November 30, 2015

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
	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:

 

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

 

 

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:

 

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

 

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:

 

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

 

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