A simple HTML table

A simple table in HTML looks something like this:

Simple, huh? Great for spreadsheet-like data, but a little difficult to imagine how it might work for a complex layout where the flow of information isn't necessarily so regular. In fact, this is the prime reason table-based layouts are a big no no in the world of front-end web development – they were never meant for HTML layout.

But anyway, it is what it is and we have to work with it.

The three basic tags that make up the table are as follows:

• <table>
• <tr>
• <td>

Our example table is constructed in HTML, a row (<tr>) at a time. Inside each row are four columns (<td>) with content written in the order displayed left to right. Here's the HTML:

The logic of tables

To correctly write a table in HTML you must always open it with the tag: <table>.

Here's an example of a very simple HTML table.

It's innards are made up of rows and columns. You cannot have a column without a row and so the order is always <tr> then <td>.

There is no limit to amount of <tr>s and <td>s you can have within a <table>. However, it can get particularly messy when hand coding, so pay attention when constructing table layouts.

Attributes for tables

There are some useful attributes that can be added to our tables to strip them of unwanted styles and give them properties for finer control.

Some attributes for the <table> tag

The border keeps a line from appearing around our table and on every one of its columns. As we're using tables for layout, we need to keep this border set at zero, otherwise our beautiful design will be scarred by this unnecessary pixel invader.

The next one is cellpadding, also set to zero. If we were to apply it, the table's columns would essentially get fatter, with space between the column's edge and its contents.

Lastly, cellspacing is essentially a margin. If set, all the table's columns would have space between them and their neighbouring columns.

Some attributes for the <td> tag

Individual <td> tags have attributes of their own. Using colspan and rowspan enables these tags to span larger widths than their surrounding rows or columns might initially allow.

Applying a width enables a column to be given an exact horizontal dimension, allowing to us to control how much space it takes up. Ideal for when your Photoshop design demands pixel precision.

Applying the align attribute enables us to control the text inside a column. It has three options: left; right; center. Unfortunately, American English wins out here, so we have to misspell centre.

Note: We don't have to use align for text alignment as we can rely on our inline styles to control this for us.

Applying the valign attribute enables us to control the text inside a column. It has three options: top; middle; bottom.

Here's what it can do with text inside a column:

A complex HTML table

Tables can get pretty complex when you start playing with their structure, so keep a clear head as it can lead to confusion and frustration.

Note: I'm using text inside the following example tables just for simplicity's sake. Making an HTML email will mean many of your <td>s will contain images or white space.

Just playing around with column spans and the like leads us to start creating complex tables. Let's take a look:

Thanks to us defining column widths, we can see that the width of the table is 400 pixels wide. To make sure there is no room for error, we'll also add the width attribute to the <table>. If you do this (and I recommend that you do), you will need to make sure the children's widths (any columns inside the parent table) add up correctly. Otherwise our layout will not render as we expect it to.

Here's a representation of that table, with colour to show the columns affected:

See how the first column spans the two underneath it? This is what the colspan attribute allows us to do. But the only way it works is when there is another row above or below it that has the full amount of columns within it – in this case four columns.

The other available attribute is for vertical expansion: rowspan. This attribute also lives on <td>s but enables them to expand upwards or downwards. Take a look:

When you use rowspan you have to delete the next row's column that that <td> would run into. If you don't, the table will render but with an ugly break in it. Not something you need.

The example above has three columns in both rows. However, as the first column of the first row spans two, we

Nesting tables for even more complex layouts

When it comes to creating HTML email designs you will most likely require more complex layouts to accommodate the intricacies of your design. In this case we get into the realm of nested tables. Complicated, yes, but extremely useful.

Take a look at this example:

See how we've added an additional row, but have worked around the limitations of relying on colspan to straddle surrounding columns. We nested a table, with one row and five columns, that doesn't get impeded by any other content. It would be impossible to achieve this structure without nesting a table.

We'll cover nested tables in a little more detail in a separate article about making an HTML email.

Table logic and nesting, visually

This diagram shows the logic of tables, rows, columns and nested tables: