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>
<meta charset="utf-8">
<style type="text/css">
td, th {border: 1px solid black;}
<title> Testing Tony's Travels </title>
<th> City </th>
<th> Date </th>
<th> Temperature </th>
<th> Altitude </th>
<th> Population </th>
<th> Diner Rating </th>
<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>
<td> Magic City, ID </td>
<td> June 25th </td>
<td> 74 </td>
<td> 5,312 ft </td>
<td> 50 </td>
<td> 3/5 </td>
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.
Search WWH ::

Custom Search