Web.Wizard HTML tutorial series

Tutorial 7

Tables

cell 1 cell 2
cell 3 cell 4
cell 5 cell 6
Gosh, where do I start... HTML tables allow you to customise the design and layout of your Web page. For instance, using tables you can split your Web page into several columns (like a newspaper) or add margins to your Web page. Infact, almost any layout you can conceive!

Do not worry if you do not understand this tutorial after your first read through, tables can be tricky to understand (this is why I wrote Table.Wizard!). Take your time, follow the examples provided and all should become clear soon.

A HTML table is contained between the tags, <TABLE> and </TABLE>. Tables consist of columns and rows. <TR> indicates the start of a new row. <TD> indicates the start of a cell within a row and </TD> indicates the end of a cell. Below is an example of a basic table.

<TABLE BORDER=1>
	<TR>
	<TD>cell 1</TD>
	<TD>cell 2</TD>
	<TR>
	<TD>cell 3</TD>
	<TD>cell 4</TD>
</TABLE>
cell 1 cell 2
cell 3 cell 4


The tags, <TABLE>, <TR> and <TD> all have attributes associated with them. Below, the key attributes of these tags are discussed.

The key attributes of the tag, <TABLE> are:

The key attributes of the tag, <TR> are: The key attributes of the tag, <TD> are:
Here are some examples for you to try out :)

  1. <TABLE ALIGN="CENTER" BORDER=1 CELLPADDING=16 CELLSPACING=4 WIDTH=80%>
    	<TR ALIGN="RIGHT">
    	<TD>cell 1</TD>
    	<TD>cell 2</TD>
    	<TD>cell 3</TD>
    	<TD>cell 4</TD>
    	<TR VALIGN="TOP">
    	<TD>cell 5</TD>
    	<TD>cell 6</TD>
    	<TD>cell 7</TD>
    	<TD>cell 8</TD>
    </TABLE>
    
  2. <TABLE ALIGN="RIGHT" CELLPADDING=8 CELLSPACING=4 WIDTH=300>
    	<TR>
    	<TD ALIGN="LEFT">cell 1</TD>
    	<TD ALIGN="CENTER">cell 2</TD>
    	<TD ALIGN="RIGHT">cell 3</TD>
    	<TR>
    	<TD BGCOLOR="#FF0000">cell 4</TD>
    	<TD BGCOLOR="#00FF00">cell 5</TD>
    	<TD BGCOLOR="#0000FF">cell 6</TD>
    </TABLE>
    
  3. <TABLE ALIGN="CENTER" BORDER=1 CELLPADDING=8 CELLSPACING=4>
    	<TR>
    	<TD COLSPAN=2 ROWSPAN=1>cell 1</TD>
    	<TD COLSPAN=1 ROWSPAN=1>cell 2</TD>
    	<TR>
    	<TD COLSPAN=1 ROWSPAN=1>cell 3</TD>
    	<TD COLSPAN=2 ROWSPAN=2>cell 4</TD>
    	<TR>
    	<TD COLSPAN=1 ROWSPAN=1>cell 5</TD>
    </TABLE>
    

Here is a very complicated table! As you can guess, it would take quite some time to work out (how many rows and columns for each cell - etc.), but thanks to Table.Wizard, is only took a couple of minutes to do! :)


END OF TUTORIAL

Go back to Contents Back|Next


Please direct any comments to Matthew Bacon at: cadenza@cyberstrider.org
Copyright © Matthew Bacon - Last updated on: 10-07-99

This page was created using Web.Wizard v3.10 © 1997-1999 Cadenza Software