Introduction to HTML Tables

HTML tables have always been an important way to organize data in a web page. But, let me also tell you that the present modern day webpages may, at least partially, use CSS to present data in a tabular form.

Most web pages align and tabulate data using tables. Tags most commonly associated with tables are:

<table> </table>: brackets the table itself
<tr> </tr>: sets rows
<td> </td>: divides rows into individual cells.

For each of these, in each instance, you can have different colors, alignments, height, and of course all your font and image settings work fine. You can show table lines or not for the whole table or each individual cell, and you have the option of having a 3-D table or just a flat lines-based table.

Why Use Tables?

Tables are used for a wide variety of things in HTML. The most obvious: to set up ordinary old tables. But they are used extensively to create tabbed sections in your text as well, or photo galleries and link collections, or columns. They are truly multi-purpose formatting tools.

But tables have a major role in something else HTML is not really set up to do: create your page layout. Do you want your page to have sidebars with links and signups? You'll need to do that with a table. Want to set your page up for lots of short bits of information that need to stand out, tabloid-style? Again, tables are your best friend. (link to that BVI site that's so cool.)

In addition, tables can help you create image maps, so that a single image can be used to provide a variety of links, or so that a single image can be cut apart and seamlessly reassembled in your web page. This is useful if you have a background image that you need to work seamlessly with your header images (link to my Choices page for an example) or if you have an image that you want to have download rapidly.

As you can see, tables can get very complicated! For this reason, I highly recommend setting up your initial table in a graphics editor (I use the freely-available Mozilla composer as well as NVU -- both are quick, simple, free downloads that don't take up much space or change your settings). After you have a basic table design, you can start tweaking the settings to customize your table.

How It Looks:

Here's a basic three-column, five-row table.

<table style="width: 100%; text-align: left;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top;">& ndsp;<br>
</td>
<td style="vertical-align: top;">& ndsp;<br>
</td>
<td style="vertical-align: top;">& ndsp;<br>
</td>
<td style="vertical-align: top;">& ndsp;<br>
</td>
<td style="vertical-align: top;">& ndsp;<br>
</td>
</tr>
<tr>
<td style="vertical-align: top;">& ndsp;<br>
</td>
<td style="vertical-align: top;">& ndsp;<br>
</td>
<td style="vertical-align: top;">& ndsp;<br>
</td>
<td style="vertical-align: top;">& ndsp;<br>
</td>
<td style="vertical-align: top;">& ndsp;<br>
</td>
</tr>
<tr>
<td style="vertical-align: top;">& ndsp;<br>
</td>
<td style="vertical-align: top;">& ndsp;<br>
</td>
<td style="vertical-align: top;">& ndsp;<br>
</td>
<td style="vertical-align: top;">& ndsp;<br>
</td>
<td style="vertical-align: top;">& ndsp;<br>
</td>
</tr>
</tbody>
</table>

Looks like a giant mess, right? Imagine all the placeholding “& ndsp;<br>” codes replaced with text and image codes and you can see exactly why I recommend setting it up in a graphical editor first.

Table Codes Translated:

<table style="width: 100%; text-align: left;" border="1" cellpadding="2" cellspacing="2">

means, in plain English and in order:

“Start a table here. Make it extend across 100% of the visible screen. Align all text to the left unless a later code tells you not to. The border shall be one pixel wide. There shall be two pixels of padding (empty space) between the text and the table border. Cells shall be spaced two pixels apart.”

So, quick quiz here: how many pixels between the end of one cell's text and the beginning of the next?

The right answer is: Six pixels – two for the first cell, two for the cell padding, and two more for the second cell.

Told you it was confusing. But don't worry about it. Instead, just remember that this initial code sets up the table, and that this is the default setting. If you use graphical editors to create your table, you will have options for changing most or all of these settings.

Now the next set of codes:

<tbody>
<tr>
<td style="vertical-align: top;">& ndsp;<br>

Means:

“The table's main body starts here (this is an optional code if you don' t have a reason to use it).
The first row starts here.
The first cell starts here, and will have text aligned to the top.”

Unless you have code in stating otherwise, your cells will always divide up the available space from the left to right of the table evenly – so a five-column table will have five <td></td> code sets that will each take up 20% of the page.

Assignment:

Go download one of those graphical HTML editors. Use it to create a simple table with at least two rows and two columns. Play around with the settings in the editor.

Now go out and try to hand-build the same table using raw HTML. Check your results in a browser – you will probably find the results interesting!

Lesson: it is easy to forget codes when hand-building tables. Understand what the codes mean, but avoid setting them up by hand unless you must.