More complex tables can be created using the table tag. With the table tag, the text can be displayed in any style.
Type the code below into any text editor and save it with the name "lesson10.html" in your "mySite" folder. You may view the completed lesson in a new window by clicking here . After you create this page, open it in your Web browser.
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML Lesson 10: Tables</title>
</head>
<body bgcolor="white">
<h1>Tables</h1>
<p>Here is a table created using the table tag.</p>
<table border="1" cellspacing="1" cellpadding="1"
summary="student
scores">
<tr>
<th>Student Name</th>
<th>Quiz 1</th>
<th>Quiz 2</th>
<th>Quiz 3</th>
<th>Total</th>
<th>Average</th>
</tr>
<tr>
<td align="left">Bobbie Riggs</td>
<td align="right">90</td>
<td align="right">80</td>
<td align="right">70</td>
<td align="right">240</td>
<td align="right">80</td>
</tr>
<tr>
<td align="left">Don Shula</td>
<td align="right">75</td>
<td align="right">95</td>
<td align="right">90</td>
<td align="right">260</td>
<td align="right">87</td>
</tr>
<tr>
<td align="left">Paul Warfield</td>
<td align="right">60</td>
<td align="right">80</td>
<td align="right">70</td>
<td align="right">210</td>
<td align="right">70</td>
</tr>
</table>
</body>
</html>
The <table> </table> tag pair contains one <tr> </tr> tag pair for each row and one <td> </td> tag pair for each cell. The <th> </th> tag pair is often used for the first row of a table to display the column headings in bold. The tags are easier to remember if you call them by name.
| Tag | Name |
|---|---|
| <tr> | Table Row |
| <td> | Table Data Cell |
| <th> | Table Header |
In the <table> tag be sure to include the summary attribute to describe the table to persons who may be accessing your page with non-visual browsers.