HTML and CSS Reference
In-Depth Information
Creating a table with HTML
Before we pull out Tony's site and start making changes, let's get the table
working like we want it in a separate HTML file. We've started the table and
already entered the headings and the first three rows of the table into an HTML
file called “table.html” in the “chapter13/journal/” folder. Check it out:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
td, th {border: 1px solid black;}
</style>
<title>
Testing Tony's Travels
</title>
</head>
<body>
<table>
<tr>
<th>
City
</th>
<th>
Date
</th>
<th>
Temperature
</th>
<th>
Altitude
</th>
<th>
Population
</th>
<th>
Diner Rating
</th>
</tr>
<tr>
<td>
Walla Walla, WA
</td>
<td>
June 15th
</td>
<td>
75
</td>
<td>
1,204 ft
</td>
<td>
29,686
</td>
<td>
4/5
</td>
</tr>
<tr>
<td>
Magic City, ID
</td>
<td>
June 25th
</td>
<td>
74
</td>
<td>
5,312 ft
</td>
<td>
50
</td>
<td>
3/5
</td>
</tr>
</table>
</body>
</html>
We use a <
table> tag to start the ta
ble.
Here'
s the f
irst r
ow, wh
ich w
e star
t with
a <tr
>.
Each
<th> e
lemen
t is a
table
headin
g for
a colu
mn.
Notice t
hat the table h
eadings are list
ed one
after ea
ch other. While
these look like
they
might ma
ke up a column
in the HTML,
we are
actually
defining the en
tire table head
ings row.
Look ba
ck at Tony's list
to see how his
headings
map to t
hese.
E
ach <tr>
el
ement forms
a
table row.
