HTML tables are one of the basic HTML elements that have been around long before CSS came into the web scene. Some of us older webmasters still prefer some of the benefits of table designs over CSS even today, and even if CSS has taken over much of the web layout scene, most data will still be presented in tables for some time to come.

Tables are supported by just about every browser available today except, possibly, some small device browsers. These devices sometimes ignore tables simply to make sites more accessible on the small screen real estate available. You will also find that some browsers handle tables differently, and I will mention some of these issues as we come to them. So it’s important to test your tables in a number of browsers and devices before implementing your design.

There are three primary tags in tables.

1. The <Table> tag. This is the container tag for the table itself. It controls the main table blocks position, style, and boundries.

2. The <tr> tag. This is the table rule tag. Basically this controls the horizontal rules found in each table.

3. The <td> tag. This is the table display tag. It is where we’ll put all of our data in the table. I refer to these as “cells” rather then displays since it sounds more appropriate in my opinion.

Now that we have our three main elements, lets look at some example code:

<table align=”center” border=”1″ height=”400″ width=”400″>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>

Here we have our table wrapper with some basic properties set. Since the table we’re working with will displayed in this post I have aligned it to the center of the screen, set its border to 1 so you can see it, and have givin it a width and height of 400 pixels. Inside the main table tags I put two rules, which will display two horizontal lines of cells. Inside each rule I have placed two cells. So we’ll have four cells in all.

It is important to remember that tables are semi-rigid creatures in that the height and width of the largest cell in the rule sets the height and width for all the others. We’ll get into this in a bit so don’t worry if you don’t understand. If I hadn’t have specified a height and width the table either wouldn’t shown up in your browser, or would just show up as a dot. This block of code creates the table you see below.

As you can see, we now have a table with a height and width of 400 pixels containing two rules of two cells. When your browser renders this code it automatically divides the space evenly between the cells unless otherwise specified. By default, all items added to a table cell are aligned to the left and vertically to the center. Even if a tables dimensions are specified they will stretch if more data is put into them then they can contain. Take a look at the table below:

Notice how the table handled the text I placed into the cells. With no defined width the cell on the right expanded to the right until it took up as much space as it could without breaking the 400 pixel width property we placed in the table tag. It should also be noted the the entire table expanded vertically to accommodate the amount of text that I placed inside one of the cells. Finally, notice that the vertical and cells are aligned regardless of their contents. This is the semi-ridged part of the table that I mentioned before.

Now that we have a basic table lets make it a little more useable.

<table align=”center” bgcolor=”#EDF7FE” border=”1″ cellpadding=”10″ height=”400″ width=”400″>
<tr>
<td bgcolor=”#ffffff” width=”150″></td>
<td width=”250″></td>
</tr>
<tr>
<td width=”100″></td>
<td valign=”top” width=”300″></td>
</tr>
</table>

Now lets look at our table:

You’ll notice that we made several very important changes here. First of all we added the background property to the main table tag. This sets the color for the entire table unless it is overridden under either the <tr> or <td> tags. I changed the color of the first cell by setting its background as white. This overrides the light blue color I set for the rest of the table.

Secondly you’ll notice that I changed the cellpadding property of the table tag. Cell padding is the space from the cell walls to the text. All text entered into our tables cells now will show up 10 pixels from the cells edges. I should note here that all browsers I have personally tested handle this exactly the same except Microsoft’s Internet Explorer, which adds extra padding by default in some of its versions. Remember this when doing some really precise work.

You’ll also note that I set the “valign” property in the forth cell to “top”. This simply aligns the texts’ vertical position to the top of the cell. You could also set it to bottom if you wanted.

Finally, and most importantly, you’ll notice that I set the width of all four cells. I did this so that you can understand a little better the rigid nature, and the reason a lot of people hate, tables. In the first cell the width was set to 150 pixels, and in the second cell I set the width to 250 pixels. However I set the third and forth cells differently. The reason for this is to show you that when setting the width of your cells. It’s only important to set the width property of the topmost cell. All the other cells, regardless of what you set their width property as, will align to the highest cell that contains a width. The same can be said for height, however the table will still naturally expand to accommodate the data you put into it.

That’s it for this tutorial. Tables can be complex if you don’t understand their idiosyncrasy, however they can be powerful tools in the right situations. The best way to get familure with them is to try different things, and test them with different web browsers. I’ll cover some of the more advanced features of tables, and even how to apply CSS to them at a later date. Until then I hope you found this helpful.