TABLES

Basic Table (two rows, three columns each)

<TABLE BORDER="1">   <TR>     <TD>Row1,Cell1</TD>     <TD>Row1,Cell2</TD>     <TD>Row1,Cell3</TD>   </TR>   <TR>     <TD>Row2,Cell1</TD>     <TD>Row2,Cell2</TD>     <TD>Row2,Cell3</TD>   </TR> </TABLE>

Row1,Cell1 Row1,Cell2 Row1,Cell3 Row2,Cell1 Row2,Cell2 Row2,Cell3

<TABLE> </TABLE>

Table open and close tags. Border size is set at 1 pixel in the above example.

<TR> </TR>

Defines a table row.

<TD> </TD>

Defines table data and divides a row into cells.

Row & Column Span

These cell attributes enable the construction of a spreadsheet type layout. There is unlimited
flexibility in the spanning of rows and columns that allows for customized display of data or
columns of text with headers.

<TABLE BORDER="1">   <TR>     <TD ROWSPAN="3">Row1, Cell1</TD>     <TD COLSPAN="3">Row1, Cell2</TD>   </TR>   <TR>     <TD>Row2, Cell1</TD>     <TD>Row2, Cell2</TD>     <TD ROWSPAN="2">Row2, Cell3</TD>   </TR>   <TR>     <TD>Row3, Cell1</TD>     <TD>Row3, Cell2</TD>   </TR> </TABLE>

Row1 Cell1 Row1, Cell2 Row2, Cell1 Row2, Cell2 Row2 Cell3 Row3, Cell1 Row3, Cell2

ROWSPAN="3"

Instructs the browser how many rows the current cell should span. Here, the first cell spans three rows, its own row plus Row 2 and Row 3.

COLSPAN="3"

Instructs the browser how many columns the current cell spans. Here, Cell 2 of Row 1 spans the three cells (or columns) of Row 2.

ROWSPAN="2"

Here, Cell 3 of Row 2 spans two rows, its own row plus Row 3.

Table Borders

Table border width can be specified in pixels. It is wise to set borders equal to "1" while designing table layouts so that you can see what is going on. After being satisfied with placement of content and alignments, turn borders *off* (set border equal to "0") for a better, less cluttered presentation . However, for tabulating numerical data it is sometimes useful to leave borders equal to "1". Another option is to use background color (discussed below) to highlight alternate columns or rows.

<TABLE BORDER="1">		Row1, Cell1 Row1, Cell2 Row2, Cell1 Row2, Cell2
<TABLE BORDER="10">		Row1, Cell1 Row1, Cell2 Row2, Cell1 Row2, Cell2

Cell Spacing & Padding

Values of spacing and padding control the width in pixels of spaces between cells and how much padding is put between each cell boundary and its content.

Cell Spacing

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

Row1, Cell1 Row1, Cell2 Row2, Cell1 Row2, Cell2

Cell Padding

<TABLE BORDER="1" CELLPADDING="10">

Row1, Cell1 Row1, Cell2 Row2, Cell1 Row2, Cell2

Table Background Colors

There are a selection of commands which allow you control over how a table is colored.

<TABLE BORDER="1"   BGCOLOR="#FFFFCC"> This sets the background color for the whole table. Be considerate, choose background and text colors that provide high contrast for readability.	Row1,Cell1 Row1,Cell2 Row2,Cell1 Row2,Cell2
You can also set background colors for the individual cells. <TABLE BORDER="1">   <TR>     <TD BGCOLOR="#FFCCFF">Row1,Cell1</TD>     <TD BGCOLOR="#00FFFF">Row1,Cell2</TD>   </TR>   <TR>     <TD BGCOLOR="#FFFF99">Row2,Cell1</TD>     <TD BGCOLOR="#CCFFCC">Row2,Cell2</TD>   </TR> </TABLE>	Row1,Cell1 Row1,Cell2 Row2,Cell1 Row2,Cell2

Alignment Of Table Contents

ALIGN & VALIGN attributes for placement within a cell

<TABLE BORDER="1">   <TR>     <TD ALIGN="LEFT" VALIGN="TOP">     Aligned top left</TD>     <TD VALIGN="TOP">     Aligned vertically top</TD>     <TD ALIGN="RIGHT" VALIGN="TOP">     Aligned top right</TD> </TR> <TR>     <TD ALIGN="LEFT">     Aligned horizontally left</TD>     <TD ALIGN="CENTER" VALIGN="MIDDLE">     Aligned horizontally and vertically in middle</TD>     <TD ALIGN="RIGHT">     Aligned horizontally to the right</TD> </TR> <TR>     <TD ALIGN="LEFT" VALIGN="BOTTOM">     Aligned bottom left</TD>     <TD VALIGN="BOTTOM">     Aligned vertically at bottom</TD>     <TD VALIGN="BOTTOM" ALIGN="RIGHT">     Aligned bottom right</TD>   </TR> </TABLE>

Aligned top left Aligned vertically top Aligned top right Aligned horizontally left Aligned horizontally and vertically in middle Aligned horizontally to the right Aligned bottom left Aligned vertically at bottom Aligned bottom right

Table Captions

Although not seen too frequently, a line of text as a heading can be applied at the top or bottom of a table. For example, if the table is a single cell that contains an image, the caption could be the image title or description.

<TABLE BORDER="1">   <CAPTION ALIGN="top">   Caption at top   </CAPTION>   <TR>      <TD>Row1,Cell1</TD>      <TD>Row1,Cell2</TD>   </TR>   <TR>      <TD>Row2,Cell1</TD>      <TD>Row2,Cell2</TD>   </TR> </TABLE>	Caption at top Row1,Cell1 Row1,Cell2 Row2,Cell1 Row2,Cell2
<TABLE BORDER="1">   <CAPTION ALIGN="bottom">    Caption at bottom    </CAPTION>   <TR>     <TD>Row1,Cell1</TD>     <TD>Row1,Cell2</TD>   </TR>   <TR>      <TD>Row2,Cell1</TD>      <TD>Row2,Cell2</TD>   </TR> </TABLE>	Caption at bottom Row1,Cell1 Row1,Cell2 Row2,Cell1 Row2,Cell2

Table Header

Table header tags, <TH>title</TH>, have the same attributes as the table data tags, <TD>data</TD>. The basic difference is the bold type and title is often centered in the cell it occupies.

<TABLE BORDER="1"> <TR> <TH>January</TH> <TH>February</TH> <TH>March</TH> </TR> <TR> <TD>Row 1 Cell 1</TD> <TD>Row 1 Cell 2</TD> <TD>Row 1 Cell 3</TD> </TR> <TR> <TD>Row 2 Cell 1</TD> <TD>Row 2 Cell 2</TD> <TD>Row 2 Cell 3</TD> </TR> </TABLE>

January February March Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3 Row 2 Cell 1 Row 2 Cell 2 Row 2 Cell 3 (TABLE above with BORDER="0" ,CELLPADDING="5", CELLSPACING="0" and with February and CELLS 2 with BGCOLOR="#FFFFCC") January February March Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3 Row 2 Cell 1 Row 2 Cell 2 Row 2 Cell 3

An Example of Both Column and Row Headings

<TABLE BORDER> <TR> <TH></TH> <! empty cell > <TH>January</TH> <TH>February</TH> <TH>March</TH> </TR> <TR> <TH>Week 1</TH> <TD>Row 1 Cell 1</TD> <TD>Row 1 Cell 2</TD> <TD>Row 1 Cell 3</TD> </TR> <TR> <TH>Week 2</TH> <TD>Row 2 Cell 1</TD> <TD>Row 2 Cell 2</TD> <TD>Row 2 Cell 3</TD> </TR> </TABLE>

(BORDER="1")  January  February   March   Week 1 Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3 Week 2 Row 2 Cell 1 Row 2 Cell 2 Row 2 Cell 3   (TABLE above with BORDER="0", CELLPADDING=0, CELLSPACING=2 and BGCOLOR="#000000" for top headers, font color="#ffffff"; then, side headers, BGCOLOR="#FFFFCC")  January  February   March   Week 1 Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3 Week 2 Row 2 Cell 1 Row 2 Cell 2 Row 2 Cell 3

BORDERCOLOR, BORDERCOLORLIGHT, and BORDERCOLORDARK

Works like the <TABLE ...> tag. They only set the colors of the inside borders.

Example, the following code sets the bordercolors of the first row to red in this table:

<TR BORDERCOLOR=RED>

which gives us

fruit	state
watermelon	Georgia
apples	Washington

The following code sets the dark borders to fuchsia and the light borders to lime in the first row:

<TR BORDERCOLORDARK=FUCHSIA BORDERCOLORLIGHT=LIME>

which gives us

fruit	state
watermelon	Georgia
apples	Washington

One of the nifty effects you can do with BORDERCOLOR is to set the colors to white so that the cells don't appear sunk in, but they still have words in them:

<TR BORDERCOLOR=WHITE>

which gives us this table

fruit	state
watermelon	Georgia
apples	Washington