Tables

<TABLE> continued with <TR> <TD> <TH>

Modifying the <TD> tag

The <TD> tag can also be modified with additional elements to change the appearance or behavior of a single cell in the table.

Elements that can be used in the <TD> tag are:

ALIGN="CENTER"
ALIGN="LEFT"
ALIGN="RIGHT"
BGCOLOR=" "
BACKGROUND=" "
WIDTH=#
HEIGHT=#
COLSPAN=#
ROWSPAN=#

<table bgcolor="#9999ff" border=4 cellpadding=20 cellspacing=10 width=500>
<TR> <TD ALIGN="CENTER">

Cell 1

Cell 2

Cell 3

Cell 4

This will have to be done in each cell you want centered so the complete codes for the above table will look like this:

Adding BGCOLOR="color" to the tag will color the background of that cell.

Adding BACKGROUND="image url" will place an image background in the cell. You can have different colors or backgrounds for each cell.

Cell 1

Cell 2

Cell 3

Cell 4

Using the WIDTH=# and HEIGHT=# allows you to specify a particular width and height for a cell. If you have more then one cell (<TD>) in a row, they will all adjust to the same height. If you have more than one row, then all of the cells in any column will adjust to the widest cell in that column. In other words, the columns and rows in a table will always be uniform.

To add more rows to your table need to add more table rows <TR>. This is mearly a duplication of the codes for the first row but with different data in the content.

Cell 1	Cell 2	Cell 3	Cell 4
Cell 5	Cell 6	Cell 7	Cell 8
Cell 9	Cell 10	Cell 11	Cell 12
Cell 13	Cell 14	Cell 15	Cell 16

What if we don't want the same number of cells in each row? We can make one cell span two or more columns by using the COLSPAN=# element. The "#" is the number of columns you want the cell to span. For example, if I want cell 6 to be two columns wide, then the <TD> tag for cell 6 would look like this:

<td align="center" colspan=2> cell 6 </td>

Of course now I only have 3 cells in row two so I'll have to get rid of cell 7. (To save space I am also reducing the size of the table by changing the values of width, cellpadding, and cellspacing in the <table> tag.)

Cell 1	Cell 2	Cell 3	Cell 4
Cell 5	Cell 6		Cell 8
Cell 9	Cell 10	Cell 11	Cell 12
Cell 13	Cell 14	Cell 15	Cell 16

We can also make one cell span two or more rows by using the ROWSPAN=# element. By adding ROWSPAN=2 to cell 9 and removing cell 13 I get this:

<td align="center" rowspan=2> cell 9 <td>

Cell 1	Cell 2	Cell 3	Cell 4
Cell 5	Cell 6		Cell 8
Cell 9	Cell 10	Cell 11	Cell 12
	Cell 14	Cell 15	Cell 16

If I combine COLSPAN and ROWSPAN in cell 6 and remove cells 7, 10, and 11, the result is this:

<td align="center" colspan=2 rowspan=2> cell 6 <td>

Cell 1	Cell 2	Cell 3	Cell 4
Cell 5	Cell 6		Cell 8
Cell 9			Cell 12
Cell 13	Cell 14	Cell 15	Cell 16

One more thing to cover on this page is the

<TH> </TH>

<th colspan=4> A Table For You </th>

A Table For You
Cell 1	Cell 2	Cell 3	Cell 4
Cell 5	Cell 6		Cell 8
Cell 9			Cell 12
Cell 13	Cell 14	Cell 15	Cell 16

The complete codes for the above table are:

NEVER PUT ANY DATA IN A TABLE THAT IS NOT INSIDE A TABLE CELL.

All information contained within a table must go between the <TD> and </TD> tags.