Creating a Website: The Missing Manual, 3rd Edition

HTML Elements for Tables

An HTML table is a grid of cells built out of rows and columns. In the Bad Old Days of the Web, crafty web designers used invisible tables to line up pictures and arrange text into columns. Now style sheets fill that gap with top-notch layout features (as described in Chapter 9) and HTML tables are back to being just tables.

A Basic Table

You can whip up a table using these HTML elements:

• <table> wraps the whole shebang. It’s the starting point for every table.

• <tr> represents a single table row. Every table element (<table>) contains a series of one or more <tr> elements.

• <td> represents a table cell (“td” stands for “table data”). For each cell you want in a row, you add one <td> element. You put the text (or numbers, or <img> elements, or pretty much any HTML you like) that you want to appear in that cell inside the <td> element. If you put text in the cell, it displays in the same font as ordinary body text.

• <th> is an optional table element; you use it when you want to define a column heading. You can use a <th> element instead of a <td> element any time, although it usually makes the most sense in the first row of a table. Browsers format the text inside the <th> element in almost the same way as text in a <td> element, except that they automatically boldface and center the text (unless you apply different formatting rules with a style sheet).

Figure 5-13 shows a table at its simplest.

Here’s a portion of the HTML used to create that table:

<table> <tr> <th>Rank</th> ...