Edtech Home About Classrooms Classes Lessons and FAQs
Educational Technologies Center for Life Sciences

Exercise - Tables for layout

The table tag is the most important tag to understand for document layout, enabling you to have multiple columns, whitespace , captions for pictures and navigation bars.

<TABLE></TABLE> This is the main "wrapper" which must enclose the entire table

<TR></TR> This stands for table row

<TD></TD> Defines a table data cell, and can be thought of as a cell in a spreadsheet.

Step 1: A simple table with pictures

Open your document and enter the following :

<TABLE>

<TR>
<TD>
Two Illinois Butterflies
</TD>
</TR>

<TR>
<TD>
Redspotted Purple
</TD>
<TD>
<IMG SRC="images/redspot.gif">
</TD>
</TR>

<TR>
<TD>
Frittilary
</TD>


<TD>
<IMG SRC="images/fritt.jpg">
</TD>
</TR>

</TABLE>

Two Illinois Butterflies

Red Spotted Purple
Frittilary

Step 2: Controlling width and whitespace

Draw a border and set the table width

<TABLE BORDER="1" WIDTH="50%" >

This draws a one pixel border around the table and sets the width to 50% of the browser window.

Two Illinois Butterflies

Red Spotted Purple
Frittillary
Adjust Cell padding

<TABLE BORDER="1" WIDTH="50%" CELLPADDING="10">

Text and images move a 10 pixel distance in from the borders.

Two Illinois Butterflies

Red Spotted Purple
Great Spangled Frittillary
Adjust cell spacing

<TABLE BORDER="1" WIDTH="50%" CELLPADDING="10" CELLSPACING="10" >

Adds 10 pixels between cells.

Two Illinois Butterflies

Red Spotted Purple
Frittillary
Adjust COLUMN SPAN for the title in the first cell then eliminate the borders and tidy up the table header by aligning the text.

<TABLE BORDER="0" WIDTH="50%" CELLPADDING="10" CELLSPACING="10">
<TR>
<TD COLSPAN="2" VALIGN="MIDDLE" ALIGN="CENTER" >Two Illinois Butterflies

Two Illinois Butterflies
Red Spotted Purple
Frittilary

Step 3: Add color

Background and text colors can be specified for the entire table or for individual cells by adding the appropriate hexadecimal or color tags as we did for the body tag
<TD BGCOLOR="#f8f896">
Red Spotted Purple
</TD>

<TD BGCOLOR="#f8d84c">
IMG SRC="images/redspot.gif"
</TD>

<TD BGCOLOR="#e9a619">
Great Spangled Frittilary
</TD>

<TD BGCOLOR="#416c37">
IMG SRC="images/fritt.jpg">
</TD>

Enhance the header by changing the font size as well as the background color.

<TD COLSPAN="3"
ALIGN="center"
VALIGN="middle"
BGCOLOR="#000000"
>


<FONT SIZE="5" COLOR="#FFFFFF">
Two Illinois Butterflies</FONT>
</TD>
Two Illinois Butterflies
Red Spotted Purple
Great Spangled Frittilary

Review of table attributes

  • BORDER
    Added to the TABLE tag to create lines around all the cells. It can also be assigned a value, such as BORDER = 4, which will draw a border 4 pixels wide.
  • WIDTH
    This attribute is added to the TABLE tag to specify the desired width of the table in either pixels or percentage of document width.
  • CELLPADDING
    Added to the TABLE tag to set the amount of space between the contents of the cell and it's borders.
  • CELLSPACING
    Added to the TABLE tag to increase the amount of space between individual cells in a table. Default is two
  • COLSPAN
    This appears in the TD tag and specifies how many columns of the table this cell should span. Default is one.
  • ROWSPAN
    This appears in the TD tag and specifies how many rows of the table this cell should span. Default is one
  • ALIGN
    Aligns data within the TD tag to LEFT, MIDDLE, or RIGHT. Default is left.
    Aligns the whole table when used in the table tag (use CENTER instead of MIDDLE)
  • VALIGN
    In the TD tag, controls vertical alignment for TOP, MIDDLE or BOTTOM
  • BGCOLOR
    Can be used in either the TABLE, TR, or TD tag to state a hexcode or color name.
  • BACKGROUND
    Allows you to specify an image which will be tiled in the background of the table.
© 2004 - E. Barbara Meyer - EdTech Center - Life Sciences - University of Illinois - Urbana, IL USA