Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

ptg16476052

244 LESSON 10: Building Tables

This information can be included in several ways, including the following:

n In a prose paragraph before the table

n In the table’s caption

n Inside a <details> element in the caption

n Next to the table in a figure or the figure’s caption

This is not required if your table is used for presentation.

Rows and Cells

Now that you’ve been introduced to the <table> element, we’ll move on to the rows and

cells. Inside the <table>...</table> element, you define the actual contents of the table.

Tables are specified in HTML row by row, and each row definition contains all the cells

in that row. So, to create a table, you start with the top row and then each cell in turn,

from left to right. Then you define a second row and its cells, and so on. The number of

columns is calculated based on how many cells there are in each row.

Each table row starts with the <tr> tag and ends with the closing </tr>. Your table can

have as many rows and columns as you like, but you should make sure that each row has

the same number of cells so that the columns line up.

The cells within each row are created using one of two elements:

n <th>...</th> elements are used for heading cells. Generally, browsers center the

contents of a <th> cell and render any text in the cell in boldface.

n <td>...</td> elements are used for data cells. td stands for table data.

Closing tags are not required for <th>, <td>, and <tr> tags. And

as long as your table data is clear without them, you can leave

them out. However, if you’re writing XHTML or your tables don’t

display correctly, you should include them. Most HTML editors

include them automatically.

NOTE

In this table example, the heading cells appear in the top row and are defined with the

following code:

<tr>

<th>Name</th>

<th>Height</th>

<th>Weight</th>

<th>Eye Color</th>

</tr>