HTML and CSS Reference
In-Depth Information
Hold on…that looks like a
table within a table.
That's because it is. But nested tables in
HTML are straightforward. All you need
to do is put another
<table>
element
inside a
<td>
. How do you do that? You
create a simple table to represent both
Tony's and Tess's ratings together, and
when you have that working, put it inside
the table cell that now holds Tony's 4/5
rating. Let's give it a try…
<tr>
<td rowspan="2">Truth or Consequences, NM</td>
<td class="center">August 9th</td>
<td class="center">93</td>
<td rowspan="2" class="right">4,242 ft</td>
<td rowspan="2" class="right">7,289</td>
<td class="center">5/5</td>
</tr>
<tr>
<td class="center">August 27th</td>
<td class="center">98</td>
<td>
4/5
<table>
<tr>
<th>Tess</th>
<td>5/5</td>
</tr>
<tr>
<th>Tony</th>
<td>4/5</td>
</tr>
</table>
</td>
</tr>
First, dele
te the old r
ating
that repr
esented Tony
's rating…
…and put a table in its pla
ce. This table holds
two diner ratings: one for
Tess and one for
Tony. We're using table hea
dings for their
names, and data cells for
their ratings.