UberPages :: Tutorials :: HTML Tutorials :: Simple HTML Layout

Quick Menu

When it comes to web design (and maybe the Universe), HTML is the most basic building block of the internet.

Many sites, still even today are composed of HTML with only a few of them going over to CSS for their layout. That being said, it's good to know how sites use HTML to create the layout for their site: It basically all comes down to the proper use of tables, which much of this tutorial will focus on.


The HTML table has a few basic components:

  • Declaration: This is the tag that tells the browser there's going to be a table, here's what it usually looks like:

    <table width="50%" border="0" cellspacing="0" cellpadding="0">

    This table is going to be fifty percent the width of whatever it is inside of (page or another table), it's border, cell spacing (how far each cell is away from other cells) and cellpadding (the white space between the edge of the cell and it's content) will all be set to zero pixels. Notice how you can give parameters to the table? You can do that to specific cells, too. Think sizes and colors, etc.

    As with most normal HTML, all tags need to be closed at some point. When you are done with your table, toss this out there:

    </table>

  • Row Specification: Before any table filled with columns can have cells in it, you need to tell the browser that there's going to be a table row. This tag also needs to be closed, and will go at the begriming of your table cells and end.

    <tr> and </tr>

  • Cell Specification: Now that you've got a table defined, and a row defined, you're ready to start plopping down some cells. So far, everything has been pretty straight forward: A <table> tag for a table, a <tr> tag for a table and etc. But the table cell tag is:

    <td> and </td>

    Not too many people know the meaning of the tag, but, I'm going to go ahead and say that it stands for table data.

That's about it for what makes up the BASIC table. Here's that info in action:

<table border="1" width="450" align="center">
<tr>
<td>This is a cell</td>
<td align="center">Another one</td>
</tr>
<tr>
<td bgcolor="#FF9900">Some data</td>
</tr>
</table>

And here's what it would look like:

This is a cell Another one
Some data

You can start to see how tables work well for displaying data (good God, I hope you do), but you can go further than that. Here's a bit more in terms of table designing. Look...

<table width="450" align="center" border="1" cellspacing="1" cellpadding="1">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2" rowspan="2"></td>
</tr>
<tr>
<td></td>
</tr>
</table>

That will give you these results:

     
   
 

There you have it, the basic way people have been making sites for quite some time now. You'll notice that another parameter was used, in this case on the large cell.

<td colspan="2" rowspan="2"></td>

Before I flat out tell you what it means, try to figure it out on your own... Got it...? Let it swirl around in there for a bit... Ok?


Can you see the implications here? With this as a theory, you could whip up a basic site with a cell stretching across the top for a banner, and cells going down the left for a menu and a large center content cell for... Content.

The only change you would have to make is setting the table width to 100 percent, but then again, that's if you want a full sized site. Also keep in mind that you can put tables within tables. The possibilities are endless.










Affiliates and Uber Linkage