- 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
- 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 --->
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 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
- 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
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> |
|
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
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> |
|
- 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
- Example A: with an outer border
- 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
LMountain Dragon
Web Designs
BAR GRAPH EXAMPLE
| Example code | Results of example code | |||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
| |||||||||||||||||||||||||
+73%