Mt. San Jacinto College Computer Information Systems
MUL 218 - Creating & Managing Dynamic Websites
Instructor: Bill Bennett, MCSE, MCP, CCNA, CIW
Email: BBennett@msjc.edu
Office: Room 608a (in Multimedia building) Hours
Office Phone: 951.639.5530
Assistant's Phone (Kaye): 951.639.5523
Web Site: cis.msjc.edu/instructors/bill_bennett
Text: Dreamweaver CS5.5: The Missing Manual
ISBN #: 978-1449381813
Author: David McFarland
Publisher: Pogue Press
Book Web Site
 
Tab Name
 

Table of Contents

Introduction

HTML is a free flowing language. What this means is that it will place all of your elements wherever it can fit them. Sometimes you want to specify exactly how things are laid out. You can force the flow to exactly how you want it many times through the use of tables. However, it is recommended that you only use tables for displaying tabular data and not to position or align specific elements on a page. The technique of postioning or aligning elements on a page using tables, especially by nesting tables is not recommended because it causes the page to load slower in a Web browser than if you used CSS positioning to accomplish the same tasks.

A table is like a spreadsheet or a table in a database. That is, it consists of rows and columns. Lets take a look at a simple table.

<table>
<tr> <td>Dorothy</td> <td>Judy Garland </td> </tr>
<tr> <td>Scarecrow</td> <td>Ray Bolger </td> </tr>
<tr> <td>The Tin Man</td> <td>Jack Haley </td> </tr>
<tr> <td>Cowardly Lion</td> <td>Bert Lahr </td> </tr>
</table>

Click here to see the code run!

The above table uses the basic three tags that all tables consist of

  1. <table...> creates the table. Most of the overall properties of the table are defined here, such as if it has borders and what is the table's background color.
  2. <tr...> (Table Row) defines each row of the table.
  3. <td...> (Table Data) defines each cell (column) of the table.

We can add properties to the table tag to change the appearance of the table. Lets add a property to the table tag above to give the table a border:

<table border=2>
<tr> <td>Dorothy</td> <td>Judy Garland </td> </tr>
<tr> <td>Scarecrow</td> <td>Ray Bolger </td> </tr>
<tr> <td>The Tin Man</td> <td>Jack Haley </td> </tr>
<tr> <td>Cowardly Lion</td> <td>Bert Lahr </td> </tr>
</table>

Click here to see the code run!

You can set the boder to be any width that you would like!!!

Headers

There may be times when you want to put a heading above a row or a column. The example so far just seems like a list, it doesn't tell us anything about the data. We can fix this by adding a header. This can be accomplished using the <TH> tag.

<table border=2>
<tr> <th>OZ Characters</th> <th>Cast</th> </tr>
<tr> <td>Dorothy</td> <td>Judy Garland </td> </tr>
<tr> <td>Scarecrow</td> <td>Ray Bolger </td> </tr>
<tr> <td>The Tin Man</td> <td>Jack Haley </td> </tr>
<tr> <td>Cowardly Lion</td> <td>Bert Lahr </td> </tr>
</table>

Click here to see the code run!

<th...> can be used to create headers for either rows or columns, or both.

<table BORDER=2>
<tr> <td>&nbsp;</td>
<th>10 am - noon</th>
<th>noon - 2 pm</th>
<th>2 pm - 4 pm</th>
</tr>

<tr> <th>Monday</th>
<td>CSIS 113A </td>
<td>CSIS 116A </td>
<td>CSIS 101 </td>

<tr> <th>Wednesday</th>
<td>CSIS 113A </td>
<td>CSIS 116A </td>
<td>CSIS 101.</td>

<tr> <th>Friday</th>
<td>CSIS 115Ac</td>
<td>CAPP 060</td>
<td>ENGR 153 </td>

</table>

creates a table which uses <th...> to head both rows and columns

Click here to see the code run!

Cell Spacing

By default, table cells tend to be squeezed close to each other. To give your table cells a little more breathing room, use cellpadding and cellspacing

cellspacing controls the space between table cells. Although there is no official default, browsers usually use a default of 2.

Lets add cellspacing to the above so that you can see the affect

<table border=2 cellspacing=10 >
<tr> <th>OZ Characters</TH> <TH>Cast</th> </tr>
<tr> <td>Dorothy</td> <td>Judy Garland </td> </tr>
<tr> <td>Scarecrow</td> <td>Ray Bolger </td> </tr>
<tr> <td>The Tin Man</td> <td>Jack Haley </td> </tr>
<tr> <td>Cowardly Lion</td> <td>Bert Lahr </td> </tr>
</table>

 

Click here to see the code run!

Cell Padding

cellpadding sets the amount of space between the contents of the cell and the cell wall. The default is 1. cellpadding is usually more effective than cellspacing for spreading out the contents of the table.

 

Now lets add cellpadding so that you can compare

<table border=2 cellpadding=10 >
<tr> <th>OZ Characters</TH> <TH>Cast</th> </tr>
<tr> <td>Dorothy</td> <td>Judy Garland </td> </tr>
<tr> <td>Scarecrow</td> <td>Ray Bolger </td> </tr>
<tr> <td>The Tin Man</td> <td>Jack Haley </td> </tr>
<tr> <td>Cowardly Lion</td> <td>Bert Lahr </td> </tr>
</table>

Click here to see the code run!

And finally lets see them both together

<table border=2 cellspacing=10 cellpadding=10 >
<tr> <th>OZ Characters</th> <th>Cast</th> </tr>
<tr> <td>Dorothy</td> <td>Judy Garland </td> </tr>
<tr> <td>Scarecrow</td> <td>Ray Bolger </td> </tr>
<tr> <td>The Tin Man</td> <td>Jack Haley </td> </tr>
<tr> <td>Cowerdly Lion</td> <td>Bert Lahr </td> </tr>
</table>

Click here to see the code run!

COLSPAN

Table cells can span across more than one column or row. The attributes colspan ("how many across") and rowspan ("how many down") indicate how many columns or rows a cell should take up.

For example, we might want to put a title across our table. We could simply do it with a colspan attribute

<table border=2 cellpadding=4 cellspacing=4 >
<tr bgcolor="#99ccff" ><th colspan = 2>Wizard Of OZ Cast</th> </tr>
<tr> <th>OZ Characters</th> <th>Cast</th> </tr>
<tr> <td>Dorothy</td> <td>Judy Garland </td> </tr>
<tr> <td>Scarecrow</td> <td>Ray Bolger </td> </tr>
<tr> <td>The Tin Man</td> <td>Jack Haley </td> </tr>
<tr> <td>Cowardly Lion</td> <td>Bert Lahr </td> </tr>
</table>

Click here to see the code run!

In the above example, we use the th tag so that the text will center in the column but the colspan tag can be directly added to the tr tag.

ROWSPAN

rowspan sets how many rows a cell spans. rowspan can get a little confusing because it requires you to think through how the cell affects the rows after the row it starts in. It's particularly useful in this situation to add borders to the table during the design process, even if the table won't ultimately use borders.

<table border=2 cellpadding=4>
<tr>
<th rowspan=4 bgcolor="#99CCFF">Cast</th>
<td>Dorothy</td> <td>Judy Garland</td>
</tr>
<tr>
<td>Scarecrow</td> <td>Ray Bolger</td>
</tr>
<tr>
<td>The Tin Man</td> <td>Jack Haley</td>
</tr>
<tr>
<td>Cowardly Lion</td> <td>Bert Lahr</td>
</tr>
<tr>
<th rowspan=4 bgcolor="#99CCFF">Crew</th>
<td>George Bassman</td> <td>Vocal Arrangements</td>
</tr>
<tr>
<td>Pop Arnold</td> <td>Key Grip</td>
</tr>
<tr>
<td>Stafford Campbell</td> <td>Stand-in Scarecrow</td>
</tr>
<tr>
<td>Charles Chic</td> <td>Negative Cutter</td>
</tr>
</table>

Click here to see the code run!

Lets put it all together using both rowspan and colspan

<table border=2 cellpadding=4>
<tr bgcolor="#ff3333"><TH colspan = 3>OZ Cast And Crew</th></tr>
<tr>
<th rowspan=4 BGCOLOR="#99CCFF">Cast</th>
<td>Dorothy</td> <td>Judy Garland</td>
</tr>
<tr>
<td>Scarecrow</td> <td>Ray Bolger</td>
</tr>
<tr>
<td>The Tin Man</td> <td>Jack Haley</td>
</tr>
<tr>
<td>Cowardly Lion</td> <td>Bert Lahr</td>
</tr>
<tr>
<th rowspan=4 bgcolor="#99CCFF">Crew</th>
<td>George Bassman</td> <td>Vocal Arrangements</td>
</tr>
<tr>
<td>Pop Arnold</td> <td>Key Grip</td>
</tr>
<tr>
<td>Stafford Campbell</td> <td>Stand-in Scarecrow</td>
</tr>
<tr>
<td>Charles Chic</td> <td>Negative Cutter</td>
</tr>
</table>

Click here to see the code run!

Table Borders

It may be best to apply borders using a style sheet but we will take a cursory look here.

By default, tables do not have borders. For example, this code, which does not have any attributes in the <table...> tag, produces a table with no borders:

<table>
<tr> <td>watermelon</td> <td>grapes</td> </tr>
<tr> <td>peaches</td> <td>bananas</td> </tr>
</table>

 

To give the table borders we add the border attribute to the <table...> tag:

<table border...>

border sets the width of the outer border. So, for example, this code creates a table with an outside border width of 10:

<table border=10>
<tr> <td>watermelon</td> <td>grapes</td> </tr>
<tr> <td>peaches</td> <td>bananas</td> </tr>
</table>

Border Color

There are two attribute that have a real nice effect on tables. They are bordercolorlight and bordercolordark. To see the effect, it is probably best to look at an example:

<table border=4 bordercolordark="maroon" bordercolorlight="red">
<tr> <td>watermelon</td> <td>grapes</td> </tr>
<tr> <td>peaches</td> <td>bananas</td> </tr>
</table>

Click here to see the code run