Exercise - Tables for layout

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