HTML Tables

Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.

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 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 Text aligned top This a TH cell

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 Text aligned top Image in TH cell with default alignments --->

This is a TH cell

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

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

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>

This is a TD cell Text aligne d left

This TH cell span s three rows

This is a TH cell Text aligne d right

<TR> <TH ALIGN="LEFT">Text aligned left</TH> <TH ALIGN="RIGHT">Text aligned right</TH> </TR> </TABLE>

COLOR IN TABLES
<TABLE BORDER="7" CELLPADDING="7" CELLSPACING="10"> <TR BGCOLOR="#00FF00"> <TD>A green row.</TD> Example code Results of example code <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. A blue row.

This cell should be yellow, overriding the row color.

Back to the row color.

This cell takes the color of the topmost row that it spans. A red row.