HTML Basics - Part 8 of 12
by Matthew Bacon

Tables
 

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 page into several columns (like a newspaper) or even add margins. In fact, 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. 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>

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:

• ALIGN=""
  Align the entire table LEFT, RIGHT or CENTER.
• BORDER=
  How thick, in pixels, should the border be? (=0 no border at all)
• CELLPADDING=
  The margin, in pixels, between the cells border and its content.
• CELLSPACING=
  The spacing, in pixels, between each cell.
• WIDTH=
  The total width of the table. This value can either be in pixels or a percentage (in relation to browser window).

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

• ALIGN=""
  The alignment of each cells contents in the row LEFT, RIGHT or CENTER.
• VALIGN=""
  The vertical alignment of each cells contents in the row TOP, MIDDLE or BOTTOM.

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

• ALIGN=""
  The alignment of the cells contents LEFT, RIGHT or CENTER. The default is LEFT.
• BGCOLOR="#rrggbb"
  The background color of the cell, in rrggbb format.
• COLSPAN=
  The number of columns the cell should span.
• ROWSPAN=
  The number of rows the cell should span.
• NOWRAP=""
  Do not allow the cells contents to wrap (like a word processor) YES or NO.
• VALIGN=""
  The vertical alignment the cells contents TOP, MIDDLE or BOTTOM.

Here are some examples for you to try out ;-)

<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>
 
 
<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>
 


<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>

Below is a very complicated table! If you're feeling brave, why not try and work out the HTML code ;-)
 

Previous

Next