Creating Structure with Tables
We will use the cells of tables to divide up the content into a main header, and two content areas. Two spacer cells will be used to space out the block effect.
The Basic Page
First, create a basic HTML page with head and body tags, and save the file with an HTML extension.
<html>
<head>
<title>Site Title Here</title>
</head>
<body>
</body>
</html>
Write your site title in between the <title> tags. All of the contents of this tutorial will be placed between the two <body> tags.
The Basic Table
Now it's time to create the table itself. Place this code after the <body> tag:
<table cellspacing="0" cellpadding="0" border="0" align="center" width="100%">
Setting the cellspacing and cellpadding to zero allows for the table cells to be pressed right against eachother. We've set the page width to 100% so that the design will expand to fill the user's browser window.
The Header Bar
The header bar is the first row of the table. This header bar will hold your site's title, or a header image, whichever you prefer. For the moment, let's just put the site's title in the header row.
<tr>
<td colspan="3" id="sitetitle">Site Title Here</td>
</tr>
The property colspan was used to expand the column into the width of three columns. This makes it so that the header will be above all three columns below it (the content column, the empty collumn, and the menu collumn). A unique identifier has been given to the cell for styling later called "sitetitle."
The Spacer Row
To create the block effect that we are looking for in this design, the header bar cannot be directly against the three columns below it. Thus, we will create a spacer row to style a gap between these areas. The unique identifier "emptyrow" has been given to the cell.
<tr>
<td colspan="3" id="emptyrow"></td>
</tr>
The Content and Menu Columns
The content and the menu both live inside the same row in the form of columns. In between the two columns, there is an empty column which we will use for styling purposes. (I have used dummy Latin text to simulate content.)
<tr>
<td id="content" valign="top">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pulvinar wisi ac elit. Sed congue pretium nibh. Curabitur felis nulla, tincidunt sed, lacinia ac, varius ut, tellus. Nullam ac neque ac magna gravida porta. Fusce condimentum odio ut dolor. Morbi ante ipsum, ultrices vel, hendrerit eu, porta eget, felis. Donec ac ligula non tellus semper pretium. Morbi purus orci, hendrerit vitae, condimentum sit amet, suscipit vel, nisl. Nunc nulla erat, cursus id, dapibus sit amet, ornare sit amet, mauris. Nam eget diam et nisl pharetra tincidunt. Suspendisse vel velit vitae diam vestibulum tincidunt. Aenean rhoncus pellentesque purus. Nullam volutpat felis vitae quam. Donec rutrum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pulvinar wisi ac elit.</p>
<p>Sed congue pretium nibh. Curabitur felis nulla, tincidunt sed, lacinia ac, varius ut, tellus. Nullam ac neque ac magna gravida porta. Fusce condimentum odio ut dolor. Morbi ante ipsum, ultrices vel, hendrerit eu, porta eget, felis. Donec ac ligula non tellus semper pretium. Morbi purus orci, hendrerit vitae, condimentum sit amet, suscipit vel, nisl. Nunc nulla erat, cursus id, dapibus sit amet, ornare sit amet, mauris. Nam eget diam et nisl pharetra tincidunt. Suspendisse vel velit vitae diam vestibulum tincidunt. Aenean rhoncus pellentesque purus. Nullam volutpat felis vitae quam. Donec rutrum.</p>
</td>
<td id="emptycolumn"></td>
<td id="menu" valign="top">
<p>Nunc nulla erat, cursus id, dapibus sit amet, ornare sit amet, mauris. Nam eget diam et nisl pharetra tincidunt. Suspendisse vel velit vitae diam vestibulum tincidunt. Aenean rhoncus pellentesque purus. Nullam volutpat felis vitae quam. Donec rutrum.</p>
</td>
</tr>
</table>
The coding above has three columns identified by the id property: content, emptycolumn, and menu, respectively. Both the content and the menu columns were given the property valign="top" so that the text would always stay at the top of their columns.
All Pieced Together
All of the components of the table structure are ready! Your HTML file should now look something like this:
<html>
<head>
<title>Site Title Here</title>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" align="center" width="100%">
<tr>
<td colspan="3" id="sitetitle">Site Title Here</td>
</tr>
<tr>
<td colspan="3" id="emptyrow"></td>
</tr>
<tr>
<td id="content" valign="top">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pulvinar wisi ac elit. Sed congue pretium nibh. Curabitur felis nulla, tincidunt sed, lacinia ac, varius ut, tellus. Nullam ac neque ac magna gravida porta. Fusce condimentum odio ut dolor. Morbi ante ipsum, ultrices vel, hendrerit eu, porta eget, felis. Donec ac ligula non tellus semper pretium. Morbi purus orci, hendrerit vitae, condimentum sit amet, suscipit vel, nisl. Nunc nulla erat, cursus id, dapibus sit amet, ornare sit amet, mauris. Nam eget diam et nisl pharetra tincidunt. Suspendisse vel velit vitae diam vestibulum tincidunt. Aenean rhoncus pellentesque purus. Nullam volutpat felis vitae quam. Donec rutrum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pulvinar wisi ac elit.</p>
<p>Sed congue pretium nibh. Curabitur felis nulla, tincidunt sed, lacinia ac, varius ut, tellus. Nullam ac neque ac magna gravida porta. Fusce condimentum odio ut dolor. Morbi ante ipsum, ultrices vel, hendrerit eu, porta eget, felis. Donec ac ligula non tellus semper pretium. Morbi purus orci, hendrerit vitae, condimentum sit amet, suscipit vel, nisl. Nunc nulla erat, cursus id, dapibus sit amet, ornare sit amet, mauris. Nam eget diam et nisl pharetra tincidunt. Suspendisse vel velit vitae diam vestibulum tincidunt. Aenean rhoncus pellentesque purus. Nullam volutpat felis vitae quam. Donec rutrum.</p>
</td>
<td id="emptycolumn"></td>
<td id="menu" valign="top">
<p>Nunc nulla erat, cursus id, dapibus sit amet, ornare sit amet, mauris. Nam eget diam et nisl pharetra tincidunt. Suspendisse vel velit vitae diam vestibulum tincidunt. Aenean rhoncus pellentesque purus. Nullam volutpat felis vitae quam. Donec rutrum.</p>
</td>
</tr>
</table>
</body>
</html>
Check Your Work
At this point, look at your work in your web browser of choice. These are my results. I know what you're thinking: "This is the opposite of a streamlined, block-style layout!" You're right, you're right, because we are only half done!
It's time to head out into the world of CSS styling!
[ back ]
