HTML Table Tags Examples II: Advanced

• 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 ---> Text aligned bottom Image in TD cell with default alignments --->

• 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 ---> Text aligned bottom Image in TD cell with default alignments --->

• 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 50% if the contents of this cell will allow.

• 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 cells will allow. The first cell will expand to 50% if the contents of the other cells will allow. The first cell will expand to 50% if the contents of the other cells will allow.

• 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

<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

• 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

<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

• For 141 color names (including the 16 listed in the HTML 3.2 documentation) go to the Color page.

• IN TR TAG WITH IMAGE.

  Example code	Results of example code
  <TABLE BORDER="7" CELLPADDING="7" CELLSPACING="10"> <TR BGCOLOR="#00FF00"> <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

  Example code

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

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

• IN TABLE AND TR TAGS

  Example code	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> <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

    Example Code		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

    Example Code		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

  Example code	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> <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 T M L Mountain Dragon Web Designs

To the Table of Contents

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%</td> </tr><tr> <td>Joe's Page</td> <td align=right>-10%<img border=2 src="reddot.gif" height=30 width=10></td> <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% PC Page -92%

To the Table of Contents