Layouts: Table

WOT IS THIS? Tess actually making a tutorial on something I hate so very much? It was requested, and I feel like I can provide a better light on the whole ordeal…and well, make it valid.

You Need to Know

…tables aren't easy. When coding by yourself–and not copying others–it can get a little wild and crazy. And, there's so many ways to actually make tabled layouts, most bad. Also, it's not the right way of coding a layout. DIVs are recommended, and for a reason, and they can go a long way to making life easier.

What You Need

I am not teaching you have to control/learn tables, only how to use them in a layout. W3Schools » is perfect for teaching one the merits of tables.

Table and DIV Start

Get out the editor/text editor (whatever you use) and create a new page. In between the <body> tags, start the table o'doom by adding a DIV; it is recommended any of your table(s) be under a DIV that defines the width of the actual layout. So let's wrap it in a DIV with the set width (going for 600px for this tutorials sake).

<div style="margin: 0 auto; width: 600px;">
</div>

Header (Image)

In between the <div>, we will add the first table, which will hold our image:

<table cellpadding="0" cellspacing="0" style="background-color: #E0E0E0;" width="100%">
<tr>
<td><img src="img/table_header.png" alt=""></td>
</tr>
</table>

Let's break this down, shall we? First off, we will constantly be repeating the style and width elements throughout, because, it's tables–they aren't exactly sticky. cellpadding and cellspacing is a little different, and keeps the table from being 5px from the browser (right now, it's assumed you want the table flat against the top of the window; » see comparison of no cellspacing/padding vs. cellspacing/padding).

Back to repeating style: if we want the content a different colour (for this tutorials sake we do; if we don't we don't include this), we need to make sure the whole table (including the image portion) is the same colour as the content.

So the whole block of coding with look like:

<div style="margin: 0 auto; width: 600px;">
<table cellpadding="0" cellspacing="0" style="background-color: #E0E0E0;" width=”100%”>
<tr>
<td><img src="img/table_header.png" alt=""></td>
</tr>
</table>
</div>

Image? Down pat. Now it's the hard part, the navigation, content and footer (two of which is option, but whatever). I will cover navigation first, but if you are uninterested in this, skip over to the » content section.

If we want navigation, we simply add another table, this time with a <ul> in between <td>:

<table cellpadding="0" cellspacing="0" style="background-color: #E0E0E0;" width="100%">
<tr>
<td>
<ul id="navigation">
<li>About</li>
<li>Home</li>
</ul>
</td>
</tr>
</table>

Most of the above coding–if left alone–might make the table go out of a sync a tad. The navigation, of corse, can be controlled through CSS, of which I've provided below (for example's sake):

table #navigation {
margin: -10px 0 0 0;
padding: 0;
}

table #navigation li {
background-color: #D0D0D0;
float: left;
list-style-type: none;
width: 300px;
}

(That's not to include the links, etc.) All this will look like:

<div style="margin: 0 auto; width: 600px;">
<table cellpadding="0" cellspacing="0" style="background-color: #E0E0E0;" width=”100%”>
<tr>
<td><img src="img/table_header.png" alt=""></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" style="background-color: #E0E0E0;" width="100%">
<tr>
<td>
<ul id="navigation">
<li>About</li>
<li>Home</li>
</ul>
</td>
</tr>
</table>
</div>

Content

The meat of the tutorial! The content is, to all extents, the main part of the table (despite it being several tables down!). So, we start out with the basics:

<table cellpadding="3" cellspacing="0" style="background-color: #E0E0E0;" width="100%">
<tr>
<td align=”left”>
<h2>Header Here</h2>
<p>Paragraph here! Yay! Whee! Dnjdjnj! WOT?</p>
</td>
</tr>
</table>

I deliberately added 3 to cellpadding, as a little space can be one's good friend. Random, but not really special note: If coding with headers and footers, stop at the content's <td> and save it as header.php and copy the rest (not including the header and paragraph) into another file, naming it footer.php.

All together:

<div style="margin: 0 auto; width: 600px;">
<table cellpadding="0" cellspacing="0" style="background-color: #E0E0E0;" width=”100%”>
<tr>
<td><img src="img/table_header.png" alt=""></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" style="background-color: #E0E0E0;" width="100%">
<tr>
<td>
<ul id="navigation">
<li>About</li>
<li>Home</li>
</ul>
</td>
</tr>
</table>
<table cellpadding="3" cellspacing="0" style="background-color: #E0E0E0;" width="100%">
<tr>
<td align=”left”>
<h2>Header Here</h2>
<p>Paragraph here! Yay! Whee! Dnjdjnj! WOT?</p>
</td>
</tr>
</table>
</div>

Like the » navigation, the footer part is optional, but an obviously nice bonus.

<table cellpadding="3" cellspacing="0" style="background-color: #00B1DD; color: #FFFFFF;" width="100%">
<tr>
<td align=”center”>
Footer. &copy; Tess Ally and Her LURVERS.
</td>
</tr>
</table>

The only thing that has changed would be the background colour, a blue (#00B1DD) and I changed the text colour from the default colour in my CSS.

I've made markers with HTML comments, so all together, you can see what the coding will look like:

<div style="margin: 0 auto; width: 600px;">
<!— HEADER (IMAGE) —>
<table cellpadding="0" cellspacing="0" style="background-color: #E0E0E0;" width=”100%”>
<tr>
<td><img src="img/table_header.png" alt=""></td>
</tr>
</table>
<!— NAVIGATION —>
<table cellpadding="0" cellspacing="0" style="background-color: #E0E0E0;" width="100%">
<tr>
<td>
<ul id="navigation">
<li>About</li>
<li>Home</li>
</ul>
</td>
</tr>
</table>
<!— CONTENT —>
<table cellpadding="3" cellspacing="0" style="background-color: #E0E0E0;" width="100%">
<tr>
<td align=”left”>
<h2>Header Here</h2>
<p>Paragraph here! Yay! Whee! Dnjdjnj! WOT?</p>
</td>
</tr>
</table>
<!— FOOTER —>
<table cellpadding="3" cellspacing="0" style="background-color: #00B1DD; color: #FFFFFF;" width="100%">
<tr>
<td align=”center”>
Footer. &copy; Tess Ally and Her LURVERS.
</td>
</tr>
</table>
</div>

And there you have it. A layout made with tables. I'd hate to repeat myself, but this method can be achieved with DIVs, with less coding. If you'd like to stick to standards, go with DIVs; however, tables can be achieved, too, so yeah. For some shiny looking, I've set up the example page I used to make this layout (be sure to ignore the text on the fake header image…yeah):