HTML Table Tags Examples II: Advanced

• Cellpadding • Color in Tables

• Cellspacing • Color namesFor use with BGCOLOR
• Cell Width • TR Tag With Image
• Colspan • TR, TD/TH Tags, Colspan & Rowspan
• Colspec • Table Tag & TR Tag
• Null Cell • Table Tag -- 1x1 Table Within 1x1 Table
• Rowspan • Table Tag -- Cellspacing Coloring
• 1x1 Table Within a 3x3 Table • Table Colors and Font Colors
• Sample Calendar • Bar Graph Example

Table Tags Examples Page 1

CELLPADDING

• CELLPADDING="10"
<TABLE BORDER="7" CELLPADDING="10">
<TR>
<TD>This is a TD cell</TD>
<TD><PRE> </PRE></TD>
<TH>This is a TH cell</TH>
</TR>
<TR>
<TH VALIGN="TOP">Text aligned top</TH>
<TH>Image in TH cell with default alignments ---></TH>
<TH><IMG SRC="blylplne.gif" ALT="airplane"></TH>
</TR>
<TR>
<TH VALIGN="BOTTOM">Text aligned bottom</TH>
<TD><Image in TD cell with default alignments ---></TD>
<TD><IMG SRC="blylplne.gif" ALT="airplane"></TD>
</TR>
</TABLE>

This is a TD cell This a TH cell

Text aligned top

Image in TH cell with default alignments --->
 Image in TD cell with default alignments --->
Text aligned bottom

To the Table of Contents

CELLSPACING

• CELLSPACING="10"
<TABLE BORDER="7" CELLSPACING="10">
<TR>
<TD>This is a TD cell</TD>
<TD><PRE> </PRE></TD>
<TH>This is a TH cell</TH>
</TR>
<TR>
<TH VALIGN="TOP">Text aligned top</TH>
<TH>Image in TH cell with default alignments ---></TH>
<TH><IMG SRC="blylplne.gif" ALT="airplane"></TH>
</TR>
<TR>
<TH VALIGN="BOTTOM">Text aligned bottom</TH>
<TD><Image in TD cell with default alignments ---></TD>
<TD><IMG SRC="blylplne.gif" ALT="airplane"></TD>
</TR>
</TABLE>

This a TD cell This is a TH cell

Text aligned top

Image in TH cell with default alignments --->

Image in TD cell with default alignments --->

Text aligned bottom

To the Table of Contents

CELL WIDTH

• TWO COLUMNS: FIRST CELL WIDTH="50%"

<TABLE BORDER="7">
<TR>
<TH WIDTH="50%">This cell will expand to 50%
if the contents of the other cell will allow.</TH>
<TH>The first cell will expand to 50%
 if the contents of this cell will allow.</TH>
</TR>
</TABLE>

This cell will expand to 50% if the contents of the other cell will allow. The first cell will expand to 5

• THREE COLUMNS: FIRST CELL WIDTH="50%"

<TABLE BORDER="7">
<TR>
<TH WIDTH="50%">This cell will expand to 50%
if the contents of the other cells will allow.</TH>
<TH>The first cell will expand to 50%
if the contents of the other cells will allow.</TH>
<TH>The first cell will expand to 50%
if the contents of the other cells will allow.</TH>
</TR>
</TABLE>

The first cell will expand to 50% if the contents of the other

To the Table of Contents

COLSPAN

• COLSPAN="2"
<TABLE BORDER="7">
<TR>
<TD>This is a TD cell</TD>
<TH COLSPAN="2">This TH cell spans two columns</TH>
</TR>
<TR>
<TD><PRE> </PRE></TD>
<TD><PRE> </PRE></TD>
<TH ALIGN="LEFT">Text aligned left</TH>
</TR>
<TR>
<TD><PRE> </PRE></TD>
<TH><IMG SRC="redball.gif" ALT="*"></TH>
<TH ALIGN="RIGHT">Text aligned right</TH>
</TR>
</TABLE>

This a TD cell This TH cell spans two columns

Text aligned left

Text aligned right

To the Table of Contents

 NULCELL

<TABLE BORDER="7">
<TD><PRE> </PRE></TD>
<TH>Below is a null cell.</TH>
<TD><PRE> </PRE></TD>
</TR>
<TR>
<TD><PRE> </PRE></TD>
<TD></TD>
<TD><PRE> </PRE></TD>
</TR>
<TR>
<TD><PRE> </PRE></TD>
<TH>Above is a null cell.</TH>
<TD><PRE> </PRE></TD>
</TR>
</TABLE>

Below is a null cell.

Above is a null cell

To the Table of Contents

ROWSPAN

• ROWSPAN="3"
<TABLE BORDER="7">
<TR>
<TD>This is a TD cell</TD>
<TH ROWSPAN="2"><This TH cell spans three rows</TH>
<TH>This is a TH cell</TH>
</TR>
<TR>
<TD><PRE> </PRE></TD>
<TD><PRE> </PRE></TD>
</TR>
<TR>
<TH ALIGN="LEFT">Text aligned left</TH>
<TH ALIGN="RIGHT">Text aligned right</TH>
</TR>
</TABLE>

This is a TD cell This TH cell spans three rows This is a TH cell

 Text aligned left Text aligned right

To the Table of Contents

1x1 TABLE WITHIN A 3x3 TABLE

<TABLE BORDER="7" CELLSPACING="10">

<TR>
<TH><IMG SRC="redball.gif" ALT="*"></TH>
<TD><PRE> </PRE></TD>
<TH><IMG SRC="redball.gif" ALT="*"></TH>
</TR>
<TR>
<TD><PRE> </PRE></TD>
<TD>
     <TABLE BORDER="7" CELLSPACING="5">
     <CAPTION ALIGN="BOTTOM">
     The USS Enterprise arrives home
     </CAPTION>
     <TR>
     <TD><IMG SRC="ee.jpg" ALT="Star Trek pic"></TD>
     </TR>
     </TABLE>
</TD>
<TD><PRE> </PRE></TD>
</TR>
<TR>
<TD ALIGN=:LEFT"><B>Bold Text in a TD cell</B></TD>
<TD><BR></TD>
<TD><I>Italic Text in a TD cell</I></TD>
</TR>
</TABLE>

The USS Enterprise arrives home

Bold Text in a TD cell Italic Text in a TD cell

To the Table of Contents

 COLOR IN TABLES

• For 141 color names (including the 16 listed in the HTML 3.2 documentation) go to the
Color page.
• IN TR TAG WITH IMAGE.
Results of example code
<TABLE BORDER="7" CELLPADDING="7"
CELLSPACING="10">
<TR BGCOLOR="#00FF00">
Example code <TD><IMG SRC="rrose.gif" ALT="rose"></TD>
<TD>Image is a transparent .gif.</TD>
</TR>
</TABLE>

Image is a
transparent .gif.

• IN TR AND TD/H TAGS, COLSPAN AND ROWSPAN

Results of example code
<TABLE BORDER="7"
CELLPADDING="7"
CELLSPACING="10">
<TR BGCOLOR="#00FF00">
<TD>A green row.</TD>
<TD BGCOLOR="#FFFF00">This
cell should be yellow, overriding the
row color.</TD> <TD>Back to the
row color.</TD>
<TR BGCOLOR="#0000FF">
Example code <TD>A blue row.</TD>
<TD><PRE> </PRE></TD>
<TD ROWSPAN="2">This cell takes
the color of the topmost row that it
spans</TD>
</TR>
<TR BGCOLOR="#FF0000">
<TD>A red row.</TD>
</TR>
</TABLE>

This cell should be

A green
yellow, overriding Back to the row color.
row.
the row color.
 A blue
This cell takes the
row.
color of the topmost
row that it spans.
A red row.

• IN TABLE AND TR TAGS

Results of example code
<TABLE BGCOLOR="#FF0000" BORDER="7"
CELLPADDING="7" CELLSPACING="10">
<TR>
<TD>The table has a red background</TD>
<TD><PRE> </PRE></TD>
</TR>
Example code <TR>
<TD BGCOLOR="#0000FF">BGCOLOR in
TD/H or TR overrides BGCOLOR in the TABLE
tag.</TD>
<TD><PRE> </PRE></TD>
</TR>
</TABLE>

The table has a red background

BGCOLOR in TD/H or TR
overrides BGCOLOR in the TABLE
tag.

• IN TABLE TAGS, 1x1 TABLE WITHIN A 1x1 TABLE, BORDERS=7 & 7

Example Code Code Result
<TABLE BORDER="7" CELLPADDING="10" CELLSPACING="10"
BGCOLOR="#0000FF">
<CAPTION ALIGN="BOTTOM">Butterfly</CAPTION> <TR>
<TD>
<TABLE BORDER="7" CELLPADDING="10" CELLSPACING="10"
BGCOLOR=#FF0000>
<TR>
<TD><IMG SRC="bfly.gif" ALT="butterfly"></TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
 Butterfly

• IN TABLE TAGS, CELLSPACING COLORING

• Example A: with an outer border
Code
Example Code
Result
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0"
BGCOLOR="#0000FF">
<TR>
<TD>
<TABLE BORDER="5" CELLPADDING="10" CELLSPACING="10">
<TR>
<TD BGCOLOR="#FFFFFE"> blah blah blah blah</TD><TD
BGCOLOR="#FFFFFE"> more blah blah blah blah</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>

blah blah blah blah more blah blah blah blah

• Example B: with no outer border

Code
Example Code
Result
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0"
BGCOLOR="#0000FF">
<TR>
<TD>
<TABLE BORDER="0" CELLPADDING="10" CELLSPACING="10">
<TR>
<TD BGCOLOR="#FFFFFE"> blah blah blah blah</TD><TD
BGCOLOR="#FFFFFE"> more blah blah blah blah</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>

blah blah blah blah more blah blah blah blah

 • TABLE COLORS WITH FONT COLORS
Results of example code
<TABLE BGCOLOR="#FF0000" BORDER="0"
CELLPADDING="7" CELLSPACING="0">
<TR>
<TH BGCOLOR="#FF8000"><FONT COLOR=#804000"
SIZE="6">
H<BR>T<BR>M<BR>L<BR></FONT></TH>
Example code <TH BGCOLOR="#804000">
<FONT COLOR=#FF8000" SIZE="5" FACE="ARIAL">
Mountain Dragon<BR>Web Designs</FONT></TH>
<TH BGCOLOR="#FF8000"><PRE> </PRE></TH>
</TR>
</TABLE>

H
Mountain
T Dragon
M Web Designs
L
To the Table of Contents

BAR GRAPH EXAMPLE

Example code Results of example code

<table width=95% border=0 cellspacing=0 cellpadding=0>
<tr><td colspan=3><hr noshade></td></tr>
<tr><td> </td><th colspan=2>Web Page Hits 1996</th></tr>
<tr><td colspan=3><hr noshade></td></tr>
<tr><td nowrap>WWW Recipies</td><td> </td>
<td align=left nowrap><img border=2 src="reddot.gif" height=25
width=73>+73%</td>
</tr><tr>
<td>Jane's Page</td><td> </td>
<td align=left><img border=2 src="reddot.gif" height=30 width=25>+25%
</tr><tr>
<td>Joe's Page</td>
<td align=right>-10%<img border=2 src="reddot.gif" height=30 width=10>
<td> </td></tr><tr><td>PC Page</td>
<td align=right>-92%<img border=2 src="reddot.gif" height=30 width=92>
</td><td></td></tr>
<tr><td colspan=3><hr noshade></td></tr>
</table>
 Web Page Hits 1996

WWW Recipies +73%

Jane's Page
+25%
Joe's Page
-10%
-92%
PC Page

To the Table of Contents

|Title Page| |Basic Template|

|Color| |Dynamic HTML/Layers| |Form Tags| |Frame Tags| |HTML Entities / ISO
Characters|
|Image Tags| |Link Tags| |List Tags| |Other Spacing / Layout Tags| |Rule Tags| |Sound Tags|
|Style Sheets| |Table Tags I| |Table Tags II| |Text Tags| |Bibliography / Resources| |Index|
Practice Window

© David Merchant 1997-2004.

<