If you have long tables with multiple columns on your pages, at least one page long, you may run into the problem of not being able to see the column titles when you're near the bottom of the table. You could repeat the column titles every so often in your table, but this is not an elegant solution because of varying screen sizes.

So what else can you do? Let HTML 4.0 come to your rescue.

Let's take a look at the following table:

<TABLE BORDER=1>

<!-- column headers -->
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>

<!-- data -->
<TR>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
</TR>

</TABLE>

Result:

A	B	C
1	2	3

Now, let's add TITLE attributes to the above table's data cells as follows and check the difference.

<TABLE BORDER=1>

<!-- column headers -->
<TR>
<TD>A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>

<!-- data -->
<TR>
<TD TITLE="Column A">1</TD>
<TD TITLE="Column B">2</TD>
<TD TITLE="Column C">3</TD>
</TR>

</TABLE>

Result:

A	B	C
1	2	3

Didn't notice a difference? Try moving your mouse over the above table's data cells using a HTML 4.0 compatible browser such as Explorer 4.x. You'll see a pop-up hint window appear with the name of each column. Even if you're unable to see the column titles and the data cells at the same time, you can get a quick reminder of the column you're looking at simply by moving your mouse over the cells.

By the way, you can add titles to the whole table as well (instead of individual cells), as follows:

<TABLE TITLE="This table is about, well, nothing yet...">

<!-- table cells, etc. -->

</TABLE>

Result:

Move your mouse over here if you want to see something...