HTML Tables

Tables allow you to format data on a web page and truly enhance the layout capabilites you can accomplish. Cascading style sheets and DHTML go even further, but for this tutorial we'll stick with the basics. View the code below, cut-and-paste it into your text file and save it as a web page.

You can then manipulate the different properties and add or remove rows <tr> and cells/columns <td> and see what they do on your page. A good way to view what occurs is to use the border and bgcolor properties to define the table visually.

<table bgcolor="gray" width=400 cellpadding=0 cellspacing=0 border=1>
<!-- header row -->
<tr>
	<td colspan=3 bgcolor="tan" align="center"><h2>HEADER (spans all 3 columns)</h2></td>
</tr>
<!-- main row -->
<tr>
	<td bgcolor="CCCCCC" valign="top" align="right">
	<!-- left margin -->
	Many people put links, etc. here!<p>
	LINK 1<br>
	LINK 2<br>
	<li>List Item 1
	<li>List Item 2
	</td>
	<td bgcolor="white" colspan=2 valign="top">
	<!-- page content -->
	This is where the main page content goes for this particular layout. 
	As you can see this cell spans across (2) columns giving it more area.
	</td>
</tr>
<!-- footer row -->
<tr>
	<td bgcolor="red">Cell 1</td>
	<td bgcolor="white">Cell 2</td>
	<td bgcolor="blue"><font color="white">Cell 3</font></td>
</tr>
</table>

returns:

HEADER (spans all 3 columns)
Many people put links, etc. here! LINK 1 LINK 2 List Item 1 List Item 2	This is where the main page content goes for this particular layout. As you can see this cell spans across (2) columns giving it more area.
Cell 1	Cell 2	Cell 3

There's a bunch more and tables are tricky to get your frame of mind to think of a page in terms of rows and columns. Practice, practice, practice, and ... a good book always helps!!!

Next