HTML Tables

HTML tables are great for when you want to present information in a clear, structured form. They are essentially a grid of rows and columns, and you can put different information into each table "cell". Cells can include text, images, videos, even blank space; in fact anything you want. Let's take a look at the HTML used to create a table.

First off we need to declare the start of the table, which we do with the HTML tag called, unsurprisingly, <table>. Next we define a table row using the <tr> tag. By itself this will do nothing, because we need to insert a number of table cells into the row. We do this with the <td> or table data HTML tag. Within each of our <td> tags we enter the information we want to put in our table. At the end of each piece of table data we need to use the closing tag </td>, and at the end of each row we use the closing row tag </tr>.

<table>

<tr>
<td>Year</td>
<td>Sales</td>
<td>Profit</td>
</tr>

<tr>
<td>2004</td>
<td>$20m</td>
<td>$4m</td>
</tr>

<tr>
<td>2005</td>
<td>$26m</td>
<td>$5m</td>
</tr>

<tr>
<td>2006</td>
<td>$35m</td>
<td>$9m</td>
</tr>

</table>

Note that all HTML tags are opened and closed in the correct order, i.e. before closing a given tag, you must make sure that all the tags within it have been closed.

Table headings <th>

We can give more emphasis to our table column headings by using the table heading tag in place of the table data tag. To do this we simply need to switch the HTML <td> tags for <th> tags within our top table row:

<table>

<tr>
<th>Year</th>
<th>Sales</th>
<th>Profit</th>
</tr>

<tr>
<td>2004</td>
<td>$20m</td>
<td>$4m</td>
</tr>

<tr>
<td>2005</td>
<td>$26m</td>
<td>$5m</td>
</tr>

<tr>
<td>2006</td>
<td>$35m</td>
<td>$9m</td>
</tr>

</table>

Table styling

By default our HTML tables look a bit bland and uninteresting. There are a few HTML tags we can use to adjust them by doing things like adding borders and changing colors but these should not be used because this would break the rule of using HTML to define our content, and CSS to style it. Later on in the CSS Guide we will see how we can make our tables appear exactly how we want them to.

Although it can seem frustrating having to learn all this HTML without being able to style it at the same time, this really is the best method in the long run - you'll thank me for it in the end, I promise!

Table usage

Tables are probably the most misused HTML element there is. For years people have used them to define the layout of their web pages - for example they might set up a 2x2 grid, and put the site logo in the top left, the header bar in the top right, the side menu in the bottom left, and the content in the bottom right. By adjusting the sizes of the cells this method can produce some perfectly acceptable looking layouts.

The problem is that this goes against one of the core values of HTML - that HTML should be used to define content and you should use CSS to provide the styling. In fairness, one of the reasons that tables have been used to provide layout is that the CSS to do the same was either unavailable or undeveloped enough, so people had little choice. But nowadays CSS can easily produce any layout we want, in a far more flexible and reliable manner than tables can, so there is no excuse for using tables for anything other than what they were intended for - presenting data in tabular form.