HTML Tutorial: Tables

The purpose of tables in HTML is to present data sets, much in the same way spreadsheets are used. Ironically, this is not the most common use of tables, however. The nature of tables required that certain formatting elements exist, which was something no other HTML tags had at the time it was introduced. As a result, it became very common to see people use tables to create the layout of their document. With the introduction of CSS, the use of tables to format a whole document became unnecessary and inefficient. Unfortunately, CSS isn't widely used yet, although it is supported in all the modern browsers. Because of this, you will probably see a lot of web documents using tables to format the entire document.

Using Tables to format documents is not a good idea.

If you aren't already familiar with CSS, please see my section on Page Layout with CSS to learn how to properly do page formatting. Trust me on this, it will look better, work better, and be easier to do.

Data Layout with Tables

A table is a collection of individual cells which contain related data elements. columns and rows are used to group the related data elements in a consistent and legible manner. A good example of the use of a table is a baseball scoreboard.

Giants/Sox
team 1 2 3 4 5 6 7 8 9 total balls fouls strikes outs
Giants 0 1 2 0 1 1 0 0   5        
Sox 0 0 0 1 1 2 1     5 1 0 2 1

Our table contains a considerable amount of information, yet the layout is done is a simple table which allows us to discern some significant information very quickly. For example, we know immediately that the score is tied, and that we're in the bottom of the 8th inning, and we know who is playing. A slightly more detailed look will tell us how the game has been so far, and how the current inning is going.

How it's done

Defining a table in HTML starts with the <table> tag. This is a paired tag, so you must use a </table> tag at the end of your table.

Within the opening table tag, you can define specific characteristics of the table's overall appearance. While there are a number of format elements built into the table tag itself, almost all of these can also be represented with CSS. There are, however, a few that are better done as tag attributes. The border attribute is used to define the size of cell and table borders. You can set the border to any integer of 0 or greater value.

Between the opening and closing tags, you can define the content of your table. In my baseball scoreboard example, the first thing I did was define a <caption> element, which contained the title of my table. The caption is rendered above and outside the table body, but is a part of the table. Text for the caption should be included between the opening and closing caption tags.

The next thing you do is define a table row with the <tr> tag. While you can define attributes of a table row, most of them are better defined within the full table or in individual table elements. The one exception is when you want one group of rows to stand out from the ones around them, in which changing the background color with the bgcolor attribute works very nicely.

Within each row, you will then define the individual data elements, which will be grouped into columns. To do this, you can use the <td> (table data) tag, or the <th> (table header) tag. The table header is simply a table data element with emphasis (such as the team names in my scoreboard). Starting from the left-most column, you can then define each individual cell's content in that row. Be sure to include empty columns (I usually insert a non-breaking space in empty columns).

When the table is generated by the browser, it will first count the number of rows, then use the row with the most data elements to define the number of columns. It will then size each row and column based on the largest data element for that specific row or column. If you don't want the cell size determined automatically, you can also add specific height and width to the individual cells. Even when you do this, however, each row in a column will be the same width, and each column in a row will be the same height.

The example below is the code I used to generate my scoreboard.

<table border="1">
<caption>Giants/Sox</caption>
<tr bgcolor="#0033ff">
<td>team</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>total</td> <td>balls</td> <td>fouls</td> <td>strikes</td> <td>outs</td>
</tr>
<tr>
<th>Giants</th> <td>0</td> <td>1</td> <td>2</td> <td>0</td> <td>1</td> <td>1</td> <td>0</td> <td>0</td> <td>&nbsp;</td> <td>5</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td>
</tr>
<tr>
<th>Sox</th> <td>0</td> <td>0</td> <td>0</td> <td>1</td> <td>1</td> <td>2</td> <td>1</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>5</td> <td>1</td> <td>0</td> <td>2</td> <td>1</td>
</tr>
</table>

Nested Tables

You can, if you really want to, put a table inside a cell of another table. I don't recomend this, except in rare situations. Usually, nested tables are done for the sake of page layout, which is better done with CSS. Tables are complicated in the first place: nesting them makes it even harder to know where you're at. Use style sheets to configure the placement of your table, and use the table element only to actually create a real table.