A Guide to HTML Tables
Last updated on
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 |
Written by
Michael Gearon
Michael Gearon is a Senior Interaction Designer at Companies House in Cardiff. Previously Mike was a product designer at the GoCo Group including GoCompare, MyVoucherCodes and WeFlip. As well working for brands in South Wales like BrandContent and HEOR.