13.2. How to create a table
using XHTML
Before we pull out Tony's site and start making changes, let's get the table working like we want it in a separate XHTML file. We've started the table and already entered the headings and the first two rows of the table into an XHTML file called "table.html" in the "chapter13/journal/" folder. Check it out:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
td
, th
{border: 1px solid black;}
Just a small bit of CSS so we can see the structure of the table in the browser. Don't worry
about this for now.
</style>
<title>Testing Tony's Table</title>
</head>
<body>
<table>
We use a <table> tag to start the table.
<tr
>
Each <tr> element forms a table row.
<th>City</th>
Here's the first row, which we start with a <tr>.
<th>Date</th>
Each <th> element
is a table heading for a column.
<th>Temperature</th>
<th>Altitude</th>
Notice that the table
headings are listed one after each other. While
these look like they might make up a column in the HTML, we are actually defining the
entire table headings row.
Look back at Tony's list to see
how his headings map to these.
<th>Population</th>
<th>Diner Rating</th>
</tr>
<tr>
Each
<td> element holds one cell of the table, and each cell makes
a separate column.
<td>Walla Walla, WA</td>
Here's the start of the second row, which is for the
city Walla Walla.
<td>June 15th</td>
<td>75</td>
<td>1,204 ft</td>
<td>29,686</td>
<td>4/5</td>
All
these <td>s make up one row.
</tr>
<tr>
<td>Magic City, ID</td>
And here's the third row. Again,
the <td> elements each hold one piece of table
data.
<td>June 25th</td>
<td>74</td></td>
<td>5,312 ft</td>
<td>50</td>
<td>3/5</td>
</tr>
</table>
</body>
</html>
|
No comments:
Post a Comment