|
|
|
               |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Tables Example</TITLE>
</HEAD>
<BODY>
<B>Table Tag Attributes</B><BR><BR>
<TABLE WIDTH="50%" HEIGHT="25%" BORDER="4" CELLSPACING="4" CELLPADDING="6" ALIGN="center" BORDERCOLOR="#ff99ff" BGCOLOR="#333399">
<TR>
<TD> Cell 1 </TD>
</TR>
</TABLE><BR>
This table uses all of the table attributes discusses. Width is set to 50%, height is set to 25%, the border is set to 4, cellspacing is set to 4, and the cellpadding is set to 6 (notice the space inside the border, and the space inside the cell that is around the content), the alignment is centered, and the background color is blue, and the border color is pink.<BR><BR>
<B>TR Tag Attributes</B><BR><BR>
<TABLE WIDTH="50%" HEIGHT="25%" BORDER="4" CELLSPACING="4" CELLPADDING="6" ALIGN="center" BORDERCOLOR="#ff99ff" BGCOLOR="#333399">
<TR ALIGN="right" VALIGN="bottom" BGCOLOR="#99ff99">
<TD> Cell 1 </TD>
</TR>
</TABLE><BR>
The same is the same as above, exept with the TR attributes changes, so that you can see how the override the table attributes. The background color is set to a green, the alignment for the row is to the right, and the vertical alignment is bottom.<BR><BR>
<B>TD Tag Attributes</B><BR><BR>
<TABLE WIDTH="50%" HEIGHT="35%" BORDER="4" CELLSPACING="4" CELLPADDING="6" ALIGN="center" BORDERCOLOR="#ff99ff" BGCOLOR="#333399">
<TR ALIGN="right" VALIGN="bottom" BGCOLOR="#99ff99">
<TD COLSPAN="3" ALIGN="center" VALIGN="top"> Cell 1 </TD>
</TR>
<TR ALIGN="right" VALIGN="bottom" BGCOLOR="#99ff99">
<TD ALIGN="left" VALIGN="baseline" BGCOLOR="#CCCCCC" NOWRAP> Cell 1 </TD>
<TD ALIGN="left" VALIGN="bottom" BGCOLOR="#CCCCCC" NOWRAP> Cell 1 A few cells have the NOWRAP Attributes </TD>
<TD ROWSPAN="2" ALIGN="left" BGCOLOR="#FFFF99"> Cell 1 </TD>
</TR>
<TR ALIGN="right" VALIGN="bottom" BGCOLOR="#99ff99">
<TD VALIGN="middle" BGCOLOR="#CCCCCC"> Cell 1 </TD>
<TD VALIGN="middle" BGCOLOR="#CCCCCC"> Cell 1 </TD>
</TR>
</TABLE><BR>
This table has all the TD attributes notice how the colors come through from the table bgcolor and the bordercolor. The nowrap is shown so that you can see that it will push your table beyond the width that is set and also wrap text in cells that do not have the nowrap. The first row has the colspan set to 3, and on the second row the last cell has a rowspan of 2.<BR><BR>
</BODY>
</HTML>
Check out how this code looks when displayed on your browser, by clicking here.
© Copyright 2000-2002 by Pepmint.com. All Rights Reserved