HTML and CSS Reference
In-Depth Information
The top row is followed by three rows of data cells, which are coded as follows:
<tr>
<td>
Alison
</td>
<td>
5'4”
</td>
<td>
140
</td>
<td>
Blue
</td>
</tr>
<tr>
<td>
Tom
</td>
<td>
6'0”
</td>
<td>
165
</td>
<td>
Blue
</td>
</tr>
<tr>
<td>
Susan
</td>
<td>
5'1”
</td>
<td>
97
</td>
<td>
Brown
</td>
</tr>
10
As you've seen, you can place the headings along the top edge by defining the
<th>
ele-
ments inside the first row. Let's make a slight modification to the table. You'll put the
headings along the left edge of the table instead. To accomplish this, put each
<th>
in the
first cell in each row, and follow it with the data that pertains to each heading. The new
code looks like the following:
Input
▼
<tr>
<th>
Name
</th>
<td>
Alison
</td>
<td>
Tom
</td>
<td>
Susan
</td>
</tr>
<tr>
<th>
Height
</th>
<td>
5'4”
</td>
<td>
6'0”
</td>
<td>
5'1”
</td>
</tr>
<tr>
<th>
Weight
</th>
<td>
140
</td>
<td>
165
</td>
<td>
97
</td>
</tr>
<tr>
