HTML: Tables (Part 2)

 

Tables

Other attributes of the <TABLE> tag can affect the layout and appearance of your tables. The ROWSPAN attribute specifies how many rows a given cell takes up; for example <TD ROWSPAN=2> specifies that the cell takes up two rows. The COLSPAN attribute specifies how many columns a given cell takes up; for example <TD COLSPAN=3> specifies that the cell takes up three columns. (See www.HTMLHelp.com for more information on ROWSPAN AND COLSPAN.)

The SUMMARY attribute allows the writer to include a summary of the table's contents. The summary is not visible to the viewer of the page (unless she chooses View - Page Source). (For more information on SUMMARY.)

The <CAPTION> tag provides a caption for the table, and (if included) it must immediately follow the <TABLE> tag. The <CAPTION> tag has the ALIGN attribute, which specifies where the caption appears in relation to the main table. ALIGN takes the values TOP, BOTTOM, LEFT, and RIGHT. (For more information on <CAPTION>.)

Alongside the <TR> and <TD> tags is the <TH> tag, which can be used in setting up the header row of a table. Text inside <TH> tags appears in bold. For example:

<TR>

<TH>Name</TH>

<TH>Phone Number</TH>

</TR>

(For more information on <TH>.)

 

New Table Commands

Various commands for tables have been developed to give writers additional options in designing tables. Many of these commands, however, are not widely supported by today's browsers. Check out www.HMTLHelp.com for more information on <COLGROUP>, <COL>, <THEAD>, <TBODY> and <TFOOT>.

 

Example

Here is the code for a table with a somewhat more complex design that uses ROWSPAN and COLSPAN and other attributes discussed above:

<center>

<table border=1 cellpadding=3 cellspacing=0 bordercolor=gold summary="This table summarizes the baseball career of the great Pittsburgh Pirates outfielder, Roberto Clemente. The stats are impressive, but to see him play the game was something else again.">

<caption align=bottom>My Tribute To "The Great One"</caption>

<tr align=center>

<td colspan=5><b>My Favorite Baseball Player</b> </td>

</tr>

<tr>

<td rowspan=3>&nbsp 

<td colspan=4 align=center>Roberto Clemente, Pittsburgh Pirates<br>1934-1972</td>

</tr>

<tr align=center>

<td>Batting Average</td><td>Hits</td><td>Home Runs</td><td>Gold Gloves</td>

</tr>

<tr align=center>

<td>.317</td><td>3000</td><td>240</td><td>12</td> </tr>

</table>

</center>

 

to see this how this code looks in a window.

The line "td colspan=5" causes the cell with "My Favorite Baseball Player" to be 5 columns wide.
The line "td rowspan=3" creates the blank, vertical cell on the table's left.
The line "td colspan=4" causes the cell with "Roberto Clemente, Pittsburgh Pirates" to be 4 columns wide.

 

Other Resources

Try these links on tables:


Page Link
Tables www.w3.org/MarkUp/Guide/Advanced.html
(And scroll almost half the way down the page)

or check out one of our reference books, or look for other help on the Web.

 

Exercise

Work on either 1) your own web page, or 2) the eEverything.com site. Create a table with at least 3 rows and 3 columns that uses both ROWSPAN and COLSPAN, as well as SUMMARY and CAPTION. Don't simply mimic what I did in my Roberto Clemente tribute table; do something different.

If you work on eEverything.com, create a table that includes at least three links to different departments of eEverything.com. Perfume, for example, is at www.eEverything.com/perfume. Snowblowers are found at www.eEverything.com/snowblowers. And tennis rackets can be located at (you guessed it) www.eEverything.com/tennis.