| Table | Part 1 - Creates a table. Written like this: <table> with its closing tag </table> |
| caption | Part 2 - optional - Creates a caption title for the table - centered text. Written like this:<caption> with its closing tag </caption> |
| tr | Part 3 - Creates a table row in a table. Written like this: <tr> with its closing tag </tr> |
| th | Part 4 - optional - Creates a table heading cell in a table row - with bold, centered text. Written like this: <th> with its closing tag </th> |
| td | Part 5 - Creates a table data cell in a table row - results in columns. Written like this: <td> with its closing tag </td> |
Written like this:
<table>
<caption>This is the caption</caption>
<tr><th>column 1</th><th>column 2</th><th>column3</th></tr>
<tr><td>red</td><td>26</td><td>german</td></tr>
<tr><td>blue</td><td>57</td><td>english</td></tr>
<tr><td>green</td><td>15</td><td>irish</td></tr>
</table>
Will create a table like this below:
This is the caption column 1 column 2 column3 red 26 german blue 57 english green 15 irish
Confusing? Let's add a border with a width of 5 pixels to the table tag.
Written like this: <table border="5">
This is the caption column 1 column 2 column3 red 26 german blue 57 english green 15 irish
Now add cellpadding of 10 pixels to the table tag.
Written like this: <table cellpadding="10" border="5">
This is the caption column 1 column 2 column3 red 26 german blue 57 english green 15 irish
Now add cellspacing of 10 pixels to the table tag.
Written like this: <table cellspacing="10" cellpadding="10" border="5">
This is the caption column 1 column 2 column3 red 26 german blue 57 english green 15 irish
Now add width as a number of pixels or a percentage of the page to the table tag.
In this example we will make the table 500 pixels wide.
Written like this: <table width="500" cellspacing="10" cellpadding="10" border="5">
This is the caption column 1 column 2 column3 red 26 german blue 57 english green 15 irish
Now add bgcolor as a name or #RGB value to the table tag.
In this example we will make the background pink.
Written like this: <table bgcolor="pink" width="400" cellspacing="10" cellpadding="10" border="5">
In IE4 and above the table: cells and cellspacing, are pink. In Netscape only the cells are pink.
This is the caption column 1 column 2 column3 red 26 german blue 57 english green 15 irish
There are two attributes that will be shown. Align and Valign. Both of these two attributes can be added to either the tr element or the td element. If added to the tr element it will affect each cell in its row. If you write it in the td element itself, it will affect that element only. The following are written in the td element only.
note: it is possible to add a width attribute to td which will affect the whole column.
Here are the examples for the align attributes and how they are written:
<table border="1" cellspacing="10" cellpadding="10">
<tr>
<td align="left" width="100">red</td>
<td align="center" width="100">26</td>
<td align="right" width="100">german</td>
</tr>
</table>
Looks like this:
red 26 german
Valign is for when you have a list of items or an item that has a different length. Below is an example of a row containing four cells. As you will see, if there isn't enough items to fill the list the other cells will list the items toward the middle of the cell. Middle is the default setting.
This
is
a
list
of
words
on
a
pageA
list
of
words
on
a
pageA
list
of
wordsA
list
Here are the examples for the valign attributes and how they are written:
<table border="1" cellspacing="10" cellpadding="10">
<tr>
<td> This <br> is <br> a <br> list <br> of <br> words <br> on <br> a <br> page </td>
<td valign="bottom"> A <br> list <br> of <br> words <br> on <br> a <br> page </td>
<td valign="middle"> A <br> list <br> of <br> words </td>
<td valign="top"> A <br> list </td>
</tr>
</table>
Looks like this:
This
is
a
list
of
words
on
a
pageA
list
of
words
on
a
pageA
list
of
wordsA
list
In these examples we will use a table with three rows and four columns. Width of cells 100.
Looks like this:
row1 col1 row1 col2 row1 col3 row1 col4 row2 col1 row2 col2 row2 col3 row2 col4 row3 col1 row3 col2 row3 col3 row3 col4
Now for the fun. colspan is used when you want to combine td cells horizontally to make one cell. In row2 I will add colspan="2" to the first td like this:
<tr align="center"><td colspan="2">row2 col1 & row2 col2</td><td>row2 col3</td><td>row2 col4>/td><tr>
I will also do this for the middle two cells of row three.
row1 col1 row1 col2 row1 col3 row1 col4 row2 col1 & row2 col2 row2 col3 row2 col4 row3 col1 row3 col2 & row3 col3 row3 col4
In both cases the row has only three td elements instead of the four in row1. However many columns you span you must reduce the td's accordingly. Span six; rid five td cells.
rowspan is worked the same way but this time the cells will be deleted vertically to create a long column. In row(tr)2, col3 I will add rowspan="2" to td. I delete the td group in row(tr)3, col3. It produces this result:
row1 col1 row1 col2 row1 col3 row1 col4 row2 col1 row2 col2 row2 col3 row2 col4 row3 col1 row3 col2 row3 col4
As a final note you can add bgcolor to individual cells.
Hope that this helps you...
Author: Joseph Raymond
14th of April, 2001