Something New #1

For the next 10 days, I will try to post every day. Each day, I will post something new I learned that day. It can pertain to any subject. Here we go.

Today, I learned about the tfoot HTML tag. Well, I knew of it, but now I know why it’s useful. Using it in conjunction with tbody and thead allows a web developer to apply CSS to the middle part of a table (tbody) so that it can be scrolled. When printing, it can be configured so that the header or footer reappear whenever a page break is encountered.. Since the footer (which is usually summary data, such as totals) can be defined before the tbody, it will load accordingly. Another interesting fact is that formatting applied to the tbody tag affects td tags inside it. Since the tbody/thead/tfoot tags are part of the DOM, they can be manipulated accordingly, such as hiding them, which will cause all child rows to also become hidden.

Browser support for this functionality is a little bit erratic, but for the most part, it’s there. A useful code snippet for making the headers or footers reappear on new pages when printing:

<style>
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
</style>

This snippet is not necessary for more advanced browsers. IE, on the other hand, will need this to properly re-display headers and such.

Then use something like this:

<style>
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
</style>
<TABLE border=”1″ cellpadding=”3″ cellspacing=”0″ width=”300″>
<thead><tr><td>sup</td><td>sup</td></tr></thead>
<tfoot><tr><td>footer</td><td>footer</td></tr></tfoot>
<tbody align=”center” style=”font-family:verdana; color:purple”>
<tr>
<td width=”50%”>2nd row</td>
<td width=”50%”>2nd row</td>
</tr>
. . .
. . .
</tbody>
</table>

Make sure to put in LOTS of rows in the tbody tag. Then hit “print preview” in your browser and scroll to the second page. Notice that the header shows up at the top and the footer appears at the bottom.

Every day you learn something new. Maybe tomorrow’s won’t be about programming.