Web 101 - Class 3 - Laying out a Page using Tables | Back to Class

Topic 1: Review of Last Week

Topic 2: Start with a Basic Grid

<style>
table {
border-collapse:collapse;
}
td {
border: solid 1px gray;
padding: 6px 6px 6px 6px;
}
</style>

<table cellspacing="0">
<tr>
<td>Left</td>
<td>Center</td>
<td>Right</td>
</tr>
</table>

Topic 3: Make the Center cell as WIDE as possible with it's own CSS Class

<style>
td.Center {
text-align:center;
width:100%;
</style>

<table cellspacing="0">
<tr>
<td>Left</td>
<td class="Center">Center</td>
<td>Right</td>
</tr>
</table>

Topic 4: Add a Second Table for the Menu and Contents - each with it's own CSS Class

<style>
td.Menu {
vertical-align:top;
white-space:nowrap;
}
td.Contents {
vertical-align:top;
width:100%;
}
</style>

<table cellspacing="0">
<tr>
<td class="Menu">Menu</td>
<td class="Contents">The contents of my web page.</td>
</tr>
</table>

Topic 5: Sequence them into a page framework

Topic 6: Then give it some pizzaz

<style>
td.HeadLeft, td.HeadCenter, td.HeadRight {
border: 0px;
}
td.HeadCenter {
width: 100%;
}
</style>

Dorado Skipjack Marlin Tuna

The quick brown fish jumped over buoy number 1. The quick brown fish jumped over buoy number 2. The quick brown fish jumped over buoy number 3. The quick brown fish jumped over buoy number 4. The quick brown fish jumped over buoy number 5.

Copyright © 2005

<table cellspacing="0">
<tr>
<td class="HeadLeft"><img src="../images/ibeck.gif" alt="iBeck.com" width="109" height="17" border="0"></td>
<td class="HeadCenter">&nbsp;</td>
<td class="HeadRight"><img src="../chris/dorado.gif" alt="fish" width="79" height="34" border="0"></td>
</tr>
</table>


<table cellspacing="0">
<tr>
<td class="Menu" style="background-color: #BBBBBB">
<a href="web101-3.php">Dorado</a><br>
<a href="web101-3.php">Skipjack</a><br>
<a href="web101-3.php">Marlin</a><br>
<a href="web101-3.php">Tuna</a><br>
</td>
<td class="Contents">
<img src="../chris/7-19-2001.jpg" style="float:right">
<p>The quick brown fish jumped over buoy number 1.</p>
<p>The quick brown fish jumped over buoy number 2.</p>
<p>The quick brown fish jumped over buoy number 3.</p>
<p>The quick brown fish jumped over buoy number 4.</p>
<p>The quick brown fish jumped over buoy number 5.</p>
</td>
</tr>
</table>


<table cellspacing="0">
<tr>
<td class="HeadLeft"><img src="../chris/dorado.gif" alt="fish" width="79" height="34" border="0"></td>
<td class="HeadCenter">&nbsp;</td>
<td class="HeadRight">Copyright&nbsp;&copy;&nbsp;2005</td>
</tr>
</table>

Topic 7: Nesting Tables

<table cellspacing="0">
<tr>
<td>Left</td>
<td>Center</td>
<td>Right

<table cellspacing="0">
<tr>
<td>Left</td>
<td>Center</td>
<td>Right

<table cellspacing="0">
<tr>
<td>Left</td>
<td>Center</td>
<td>Right

<table cellspacing="0">
<tr>
<td>Left</td>
<td>Center</td>
<td>Right

<table cellspacing="0">
<tr>
<td>Left</td>
<td>Center</td>
<td>Right

<table cellspacing="0">
<tr>
<td>Left</td>
<td>Center</td>
<td>Right
</td>
</tr>
</table>

</td>
</tr>
</table>

</td>
</tr>
</table>

</td>
</tr>
</table>

</td>
</tr>
</table>

</td>
</tr>
</table>

Topic 8: Spanning Cells in a Table

<table cellspacing="0">
<tr>
<td>L1</td>
<td colspan="2">C1 spans two columns</td>
</tr>
<tr>
<td>L2</td>
<td>C2</td>
<td rowspan="2">R2 spans two rows</td>
</tr>
<tr>
<td>L3</td>
<td>C3</td>
</tr>
<tr>
<td>L4</td>
<td>C4</td>
<td>R4</td>
</tr>
</table>