Things You'll Need:
- Text editor, such as SourceEdit
- Document uploading software, such as FileZilla
- Server space
-
Step 1
Type the following code to create the basic XHTML webpage:
<!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" xml:lang="en" lang="en">
<head>
<title></title>
</head>
<body>
</body>
</html> -
Step 2
Type "Nested Table Navigation Page" between the <title></title> tags, as shown:
<title>Nested Table Navigation Page</title> -
Step 3
Type the <table></table> tags between the <body></body> tags, give the beginning <table> tag the attribute "border" and set it equal to "1."
<table border="1">
</table> -
Step 4
Add three pairs of "table row" tags between the beginning and ending <table></table> tags. Add one pair of "table data" tags to rows 1 and 2 and three pairs of "table data" tags to row 3. Then add the attribute "colspan" and set it equal to "3" inside the "table data" tags in rows 1 and 2, as shown:
<tr><td colspan="3"></td></tr>
<tr><td colspan="3"></td></tr>
<tr><td></td><td></td><td></td></tr> -
Step 5
Add the attribute "width" and set it equal to "100%" in order to expand the size of the table to the width of page:
<table border="1" width="100%"> -
Step 6
Add some content between the "table data" tags in rows 1 and 3 in order to expand the table to the height of the page.
<tr>
<td colspan="3"><h1>Nested Tables</h1></td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td><h2>Content Section One</h2></td>
<td><h2>Content Section Two</h2></td>
<td><h2>Content Section Three</h2></td>
</tr> -
Step 7
Save your document as "nested-tables.html" and upload it to your server. The attached image is how the page looks thus far.
-
Step 1
Type the beginning and ending "table" tags between the "table data" tags in row 2, as shown:
<tr>
<td colspan="3">
<table></table>
</td>
</tr> -
Step 2
Add the two "table row" tags between the beginning and ending "table" tags in row 2:
<tr>
<td colspan="3">
<table>
<tr></tr>
<tr></tr>
</table>
</td>
</tr> -
Step 3
Add five pairs of "table data" tags between each pair of "table row" tags, as shown:
<tr>
<td colspan="3">
<table>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td>
</tr>
</table>
</td>
</tr> -
Step 4
Type "Page One" through "Page Five" in between the first row of "table data" tags, and "Page Six" through "Page Ten" through the second row of "table data" tags. This will help fill out the space to demonstrate the structure of the nested table.
<tr>
<td>Page One</td>
<td>Page Two</td>
<td>Page Three</td>
<td>Page Four</td>
<td>Page Five</td>
</tr>
<tr>
<td>Page Six</td>
<td>Page Seven</td>
<td>Page Eight</td>
<td>Page Nine</td>
<td>Page Ten</td>
</tr> -
Step 5
Add the width and border attributes to the beginning "table" tag in the page layout's table row 2, setting the "width" equal to "100%" and the "border" equal to "1":
<table width="100%" border="1"> -
Step 6
Save and upload your document. As you can see from the attached image, the page-layout table surrounds the navigation table. The navigation table is nested inside the "table data" tag of row 2.
