Building a Simple Table - HTML5 - page 128

<td>Pat</td>
<td>Peterson</td>
<td>x394</td>
</tr>
</table>

You can have as many <tr> tags as needed. Each table row must contain the same number of table
cells or <td> tags. This keeps the number of columns consistent.

When rendered in a browser as shown in Figure 16-1,
you'll notice two things immediately. First, no lines
define the grid; you'll have to create a CSS rule for the
<table> tag with a border property to achieve that
effect. Second, the cells — and thus the rows and table
itself — are only as wide as required to show the con-
tent. Again, CSS rules to the rescue! You can define a
width property for the entire table and/or for the <td>
tags.

You can put pretty much any kind of content in a cell.
Plain text, sentences surrounded by <p> tags, images —
it's all fair game for <td> tag content. Although it's less
common, you can include major structural elements like
<div> tags in the cell if required by your design.

FiGure 16-1

To learn more about how to style a table, see Lesson 17.

specifying a Table Header

So far, you've seen how an HTML table is built with three tags. However, additional tags can give
your table even more structure. The first row or column of a table often contains a heading, like
First Name in the previous code example. To help with the uniform styling of heading content, you
can substitute a <th> tag for a standard <td> one, like this:

<table>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Extension</th>
</tr>
<tr>
<td>Pat</td>
<td>Peterson</td>
<td>x394</td>
</tr>
</table>