HTML Tables

HTML Tables used to be employed to create entire website layouts. Now, they should only be used in selective cases when appropriate. This HTML5 Tutorial will explain how to create a HTML Table and then explain how you should use it in the modern era of web design.

HTML Tags for a Basic Table

Here is a snippet to show a basic HTML Table to show what you could have planned for the working week:

<table width="100%" border="1" bordercolor="#cccccc" cellpadding="5" cellspacing="5"> <tr>     <td></td>     <th>Monday</th>     <th>Tuesday</th>     <th>Wednesday</th>     <th>Thursday</th>     <th>Friday</th> </tr> <tr>     <td>Activity</td>     <td>Meeting at ABC-123 Ltd</td>     <td>Business Lunch at 1pm</td>     <td>Project due by 5pm</td>     <td>Web Conference in London</td>     <td>Early Finish (4pm)</td> </tr></table>

And here is what that code outputs (within this site’s design anyway):

	Monday	Tuesday	Wednesday	Thursday	Friday
Activity	Meeting at ABC-123 Ltd	Business Lunch at 1pm	Project due by 5pm	Web Conference in London	Early Finish (4pm)

The <table> Tag

Before we delve into this, it is really important that, as a habit, you open and close each tag pair when creating your table. If you don’t do this your table cells and rows could easily get messed up!

The <table> tag contains everything to do with the table before the </table> tag. Here are the various attributes available to you:

width: you can set the width in pixels by using a fixed number (so a value of ‘400’ would set your table to be 400 pixels wide), or as a percentage of the available space.

border: this sets the width (thickness) of the border both around your table and also between your table’s cells.
bordercolor: if you’re from the UK, notice the spelling of color – not colour. This sets the actual colour (in either hexadecimal, or select anglicised words – e.g. “red”). The colour I have chosen is #cccccc which is a ‘mid-grey’.
cellpadding: this is the amount of space between the edge of the cell and the stuff inside a cell.
cellspacing: this is the amount of space between cells.

The above code produces a table which looks something like this:

Table Rows – the <tr> Tag

Each row of your table needs to be marked up using <tr> </tr> tag pairs. For now, it is best if you space out your code similar to above, so that you can see each table row clearly. There aren’t really any attributes of the <tr> though we’ll look at some neat tricks you can do in CSS3 for Tables at a later point.

Table Headers – the <th> Tag

If your table has ‘header’ information – like the top row label in an Excel Spreadsheet – then it can be helpful to mark these as <th> tags. Often browsers will automatically centre-align the text in the cell and make it bold. You can adjust this behaviour in CSS but for the purposes of this tutorial, we’ll leave it in place.

Each header cell must have a corresponding </th> tag so that you are clearly telling your page what content is to be contained inside that particular cell.

Table Data – the <td> Cell

All other cells which are not headers are called table-data cells and are contained in the <td> </td> tag pair. These have no default behaviour, unlike your table headers.

When building your table you must make sure you have the same number of cells in each row. That’s why spacing out your code as above can be really helpful – you can count there are 5 headers in the first row and 5 normal cells in the second row.

HTML Tables – Tip
If you find your rows are uneven, or stuff which should be inside a cell appears outside your table, then check for the following:
Different cell numbers in each row
Unclosed cell tags
Unclosed row tags

Notice you can have a ‘blank cell’, which I have done above to ensure the top left cell is empty, while maintaining the equal number of cells in each row.

Multi-Column Cells

Say you want to have a title for your table, you may want to have a row which takes up the full width of your table. This can be achieved using the colspan (Column-span) attribute of either a <th> or a <td>.

<table width="100%" border="1" bordercolor="#cccccc" cellpadding="5" cellspacing="5"> <tr>  <th colspan="6">My Work Plan for the Week</th> </tr> <tr>     <td></td>     <th>Monday</th>     <th>Tuesday</th>     <th>Wednesday</th>     <th>Thursday</th>     <th>Friday</th> </tr> <tr>     <td>Activity</td>     <td>Meeting at ABC-123 Ltd</td>     <td>Business Lunch at 1pm</td>     <td>Project due by 5pm</td>     <td>Web Conference in London</td>     <td>Early Finish (4pm)</td> </tr></table>

This produces the following:

As there are 6 cells in each row and I wanted my table title to stretch across the whole table, I set <th colspan="6">. Because this one cell has filled 6 cell spaces you only need the one <th> in this case.

You can use this anywhere in your table. Say I wanted to add a new row for a new week and I have a 3 day conference Tuesday-Thursday in week two, I can do this:

<table width="100%" border="1" bordercolor="#cccccc" cellpadding="5" cellspacing="5"> <tr>  <th colspan="6">My Work Plan for the Week</th> </tr> <tr>     <td></td>     <th>Monday</th>     <th>Tuesday</th>     <th>Wednesday</th>     <th>Thursday</th>     <th>Friday</th> </tr> <tr>     <td>Week 1</td>     <td>Meeting at ABC-123 Ltd</td>     <td>Business Lunch at 1pm</td>     <td>Project due by 5pm</td>     <td>Web Conference in London</td>     <td>Early Finish (4pm)</td> </tr> <tr>     <td>Week 2</td>     <td>Business Planning Lunch - 1:30pm</td>     <td colspan="3">Networking and Training Conference</td>     <td>Early Finish (4pm)</td> </tr></table>

which produces this

In this case, to ensure you are covering my 6-cell-width rows, you need to count the cells containing colspan (3) and the individual <td> </td> (3) – so I still have 6 cells represented in my row.

Multi-Row Cells

In the same way as you can have a cell which spans multiple columns, you can also have cells which span multiple rows using the rowspan attribute:

<table width="100%" border="1" bordercolor="#cccccc" cellpadding="5" cellspacing="5"> <tr>  <th colspan="6">My Work Plan for the Week</th> </tr> <tr>     <td rowspan="3">July</td>     <th>Monday</th>     <th>Tuesday</th>     <th>Wednesday</th>     <th>Thursday</th>     <th>Friday</th> </tr> <tr>     <td>Week 1</td>     <td>Meeting at ABC-123 Ltd</td>     <td>Business Lunch at 1pm</td>     <td>Project due by 5pm</td>     <td>Web Conference in London</td>     <td>Early Finish (4pm)</td> </tr> <tr>     <td>Week 2</td>     <td>Business Planning Lunch - 1:30pm</td>     <td colspan="3" align="center">Networking and Training Conference</td>     <td>Early Finish (4pm)</td> </tr></table>

This produces the following look to your table:

So you can see that the cell with ‘July’ written in now covers all three rows of information – the header and the two weeks. Your rowspan starts from the first row you define it in and works down from there, until there are no more rows. So if you were to set rowspan="10" here, it would stop at the third.

Fixing Table Issues

You will see from the example above that using rowspan has caused a layout issue. The intended activities for the days in question are no longer allocated to the correct day of the week, meaning I could be early or late for a meeting or conference – not good.

It seems our previously blank cell which was above ‘Monday’ has been lost due to the ‘July’ cell. We suddenly have seven cells rather than six in each row. This kind of thing can easily happen on more complex tables, so look at it carefully and then see what needs fixing:

We need a new blank cell above ‘Monday’

Our table title needs its colspan adjusting to ‘7’

This is the fixed code:

<table width="100%" border="1" bordercolor="#cccccc" cellpadding="5" cellspacing="5"> <tr>  <th colspan="7">My Work Plan for the Week</th> </tr> <tr>     <td rowspan="3">July</td>     <td></td>     <th>Monday</th>     <th>Tuesday</th>     <th>Wednesday</th>     <th>Thursday</th>     <th>Friday</th> </tr> <tr>     <td>Week 1</td>     <td>Meeting at ABC-123 Ltd</td>     <td>Business Lunch at 1pm</td>     <td>Project due by 5pm</td>     <td>Web Conference in London</td>     <td>Early Finish (4pm)</td> </tr> <tr>     <td>Week 2</td>     <td>Business Planning Lunch - 1:30pm</td>     <td colspan="3">Networking and Training Conference</td>     <td>Early Finish (4pm)</td> </tr></table>

Which makes our demo table look like this:

Text Alignment in Cells

There are two ways of thinking about text alignment inside your cells. There is the ‘horizontal’ alignment (where your text sits from left-to-right) and the vertical alignment (where it sits from top to bottom).

align: to set the left-to-right alignment you need to just use the align attribute: <td align="center">. Accepted values are: left, right and center (again for my UK counterparts, center not centre.

valign: to set the top-to-bottom alignment you need to use the valign attribute: <td valign="top">. Commonly acceptable values are: top, middle (not ‘center’) and bottom.

You can use a combination of align and valign. So if you wanted to make your text centered left-to-right and in the middle top-to-bottom, you would do this:

<td align="center" valign="middle">

HTML5 Tables?

In HTML5 tables are not really that different from HTML4. The only thing to bear in mind is that mobile has been growing rapidly in recent years and although you can Use HTML Tables for Page Layout, you really shouldn’t. See that tutorial for the explanation!

TL;DR – HTML Tables

In the next tutorial we will create a layout from a table, so you can make a whole website from that layout. We’ll also cover the downsides of doing this in modern web design.

Tables are great for information which should be in tables – structured information as in this example and data are two good examples. Go ahead now and create yourself a table and if you have any issues, feel free to post them in the comments!