This page looks at: TABLES
|
|
A table is a gridwork like structure used to position various elements of text or images on your page. The table framework can be visable or invisable. It is made up of rows and collumns and can have as many or as few of each as you wish or will fit on your page. This is what a basic table looks like with 4 rows and 4 collumns:
| Row 1 Cell 1 | Cell 2 | Cell 3 | Cell 4 |
| Row
2 Cell 1 | Cell 2 | Cell 3 | Cell 4 |
| Row 3 Cell 1 | Cell 2 | Cell 3 | Cell 4 |
| Row 4 Cell 1 | Cell 2 | Cell 3 | Cell 4 |
The table rows and cells must be defined after the <TABLE> tag. Each table row is defined with the tag <TR> (Table Row) and each cell is defined with the tag <TD> (Table Data). All <TD>'s (cells) must be within a table row. That is to say that all <TD> </TD>'s must be between the <TR> and the </TR> tags. Both the <TR> and <TD> tags must use the closing tags </TR> and </TD>. To keep this as simple as possible I will show you the codes for table like the one above but using only 1 row.
<table>
<tr>
<td> Cell 1 </td>
<td> Cell 2 </td>
<td> Cell 3 </td>
<td> Cell 4 </td>
</tr> </table>
| Cell 1 | Cell 2 | Cell 3 | Cell 4 |
This doesn't look like much of a table does it?
That is because I have left out other attributes that
were included in the first table so I could start
with the very basic codes. Now we can add to these
codes to enhance the table starting with the
<TABLE> tag itself.
Just as with the <BODY> tag, the <TABLE> tag can use the "BGCOLOR" and/or the "BACKGROUND" element. By adding BGCOLOR="#9999FF" I get this:
| Cell 1 | Cell 2 | Cell 3 | Cell 4 |
There is also a "BORDER=" element that can be used to add a border around the table and between the cells. The border value can be a big as you want with the smallest be "1". To supress the border altogether use a value of "0". This table uses a border value of 4 and the <TABLE> tag with the BGCOLOR and BORDER looks like this:
<table bgcolor="#9999ff" border=4>
and will cause the table to look like this:
| Cell 1 | Cell 2 | Cell 3 | Cell 4 |
Other elements that can be used within the <TABLE> tag are "CELLPADDING=" and "CELLSPACING=". "CELLPADDING=" adds free space within the cells around the data while "CELLSPACING=" adds space between the cells.
CELLPADDING=20 produces this:
| Cell 1 | Cell 2 | Cell 3 | Cell 4 |
CELLSPACING=10 produces this:
| Cell 1 | Cell 2 | Cell 3 | Cell 4 |
Putting it all together, the <TABLE> tag looks like this:
<table bgcolor="#9999ff" border=4 cellpadding=20 cellspacing=10>
The resulting table then looks like this:
| Cell 1 | Cell 2 | Cell 3 | Cell 4 |
The WIDTH of your table will depend on the content of the cells and will be determined automatically by your browser. You can reduce or expand the width by adding the WIDTH= element to the TABLE tag. An equal amount of space will be added to or subtracted from each cell but it can never be more narrow than the cell contents will allow without a space in the text.
<table bgcolor="#9999ff" border=4 cellpadding=20 cellspacing=10 width=200>
| Cell 1 | Cell 2 | Cell 3 | Cell 4 |
Here, I have added a width of 200 but the table is actually wider than that. It has been compressed as much as the text in the cells will allow.
<table bgcolor="#9999ff" border=4 cellpadding=20 cellspacing=10 width=500>
| Cell 1 | Cell 2 | Cell 3 | Cell 4 |
With the width expaned to 500, extra space has been added to each cell but now the text is not centered in the cells because it will always register left. This can be corrected.
|
|
|