![[8] Tables](images/tables.gif)
Now we move onto generating tables, which can be very useful in formatting the layout of your pages besides tabulating data.
The four main elements needed to generate tables and their respected attributes are shown below. I have indicated in which version of browser the attributes were first supposed to be implemented. Internet Explorer (IE) and Netscape (NS) only.
| Element |
| Attribute | <Table> | <Tr> | <Td> | <Th> |
| Align | IE3/NS3 | IE3/NS3 | IE3/NS3 | IE3/NS3 |
| Valign | IE3/NS4 | IE3/NS3 | IE3/NS4 | IE3/NS3 |
| Background | IE3/NS4 | IE5/NS4 | IE3/NS4 | IE3/NS4 |
| Bgcolor | IE3/NS3 | IE3/NS3 | IE3/NS3 | IE3/NS3 |
| Border | IE3/NS3 | - | - | - |
| Bordercolor | IE3/NS4 | IE3/NS4 | IE3/NS4 | IE3/NS4x |
| Cellpadding | IE3/NS3 | - | - | - |
| Cellspacing | IE3/NS3 | - | - | - |
| Height | IE3/NS3 | - | - | IE3/NS4 |
| width | IE3/NS3 | - | IE3/NS3 | IE3/NS3 |
| Colspan | - | - | IE3/NS3 | IE3/NS3 |
| Rowspan | - | - | IE3/NS3 | IE3/NS3 |
| <Table> | - Defines table element |
|---|
| <Tr> | - Defines a row of the table |
|---|
| <Td> | - Defines a cell of a row (or column of a table) |
|---|
| <Th> | - Defines a table header cell |
|---|
To illustrate how to form a table using the table elements above consider the table below, where r1 and c1 represent the respective rows and columns. The atble consists of 5 rows (includiing the header) and 3 columns.
| Header r1:c1 | Header r1:c2 | Header r1:c3 |
| r2:c1 | r2:c2 | r2:c3 |
| r3:c1 | r3:c2 | r3:c3 |
| r4:c1 | r4:c2 | r4:c3 |
| r5:c1 | r5:c2 | r5:c3 |
The code needed to genarate such a table is shown below
<table border="2" bordercolor="#000000" >
<tr> <th>r1:c1</th> <th>r1:c2</th> <th>r1:c3</th> </tr>
<tr> <td>r1:c1</td> <td>r1:c2</td> <td>r1:c3</td> </tr>
<tr> <td>r1:c1</td> <td>r1:c2</td> <td>r1:c3</td> </tr>
<tr> <td>r1:c1</td> <td>r1:c2</td> <td>r1:c3</td> </tr>
<tr> <td>r1:c1</td> <td>r1:c2</td> <td>r1:c3</td> </tr>
</table>
The manner in which these elements work in the above code can be seen more clearly in the diagram below, which also illsutrares the structure of the code in comparison to the table generated.
| <table> |
| <th>Header r1:c1</th> | <th>Header r1:c2</th> | <th>Header r1:c3</th> |
| <td>r2:c1</td> | <td>r2:c2</td> | <td>r2:c3</td> |
| <td>r3:c1</td> | <td>r3:c2</td> | <td>r3:c3</td> |
| <td>r4:c1</td> | <td>r4:c2</td> | <td>r4:c3</td> |
| <td>r5:c1</td> | <td>r5:c2</td> | <td>r5:c3</td> |
| </tr> |
| </tr> |
| </tr> |
| </tr> |
| </tr> |
|
| </table> |
The border and bordercolor attributes in the table element, make the table borders 2 pixels in width and the colour of the borders are set to black. By default if no border value is set, the table is formed with an invisable border.
The width and hiegjt attributes (in pixels or as percetage) control the size of the table in comparison to the screen and will override the browsers default layout. The align attribute (left/center/right) controls the postining of the table. As with the images, aligning the table left or right will allow text to wrap neatly next to the table.
Consider the code below which genrates a 2 by 3 table, illustaring the metioned table attributes.
<table border="1" bordercolor="#0000ff" height="25%" width="25%" align="Left " >
<tr>
<td>x</td> <td>x</td> <td>x</td>
</tr>
<tr>
<td>x</td> <td>x</td> <td>x</td>
</tr>
</table>
Below are examples of 2 by 3 tables using the above code, with different attributes.
Here, the table is aligned to the left hand side of the screen.
<table border="1" bordercolor="#0000ff" height="25%" width="25%" align="Left " >
The table border colour is set to blue.
All the text wraps to the right hand side of the table.
Here, the table is aligned to the right hand side of the screen.
<table border="1" bordercolor="#0000ff" height="25%" width="25%" align="Left " >
The atble border colour is set to blue.
All the text wraps to the right hand side of the table.
Here, the table has been centered on the screen.
<table border="10" bordercolor="#0000ff" height="20%" width="50%" align="center" >
It should be noted that the text DOES not wrap along side the table.
From my understading, the valign attribute when used in the table element controls the vertical postion of the data. By default the data witin each table is aligned centrally as shown above. However, by setting valign="top or bottom", the data/text is aligned top or bottom respectively. I have found that the browsers do not seem to comply to this, but this cab be overcome using the
valign attribute in the <tr> element (See later).
Here, the table is aligned to the left hand side of the screen and is invsable.
<table border="0" bordercolor="#0000ff" height="35%" width="20%" align="Left " >
The table border colour which is set to blue is ignored since border="0".
The size and form of the table is uneffected by setting the border to invisable. This makes it quit useful in controlling the layout of the web page with invisable tables.
It is also possible to control the overall colour of the table or palce an image which will be tiled behide the table. This is shown below.
Here, the table is aligned to the left hand side of the screen.
<table border="1" bordercolor="#000000" height="35%" width="20%" align="Left" bgcolor="#00fff" background="image/table.gif" >
The colour of the table border is set to black and the background colour of the table has been set to aqua. I have also placed a image (tables.gif) as the background image. Note the image has a transpapert colour, which therefore allows the background colour of the table to be also seen.
In this example the background image has no transpapernt colour and theerefore the background colour is not visable.
<table border="1" bordercolor="#000000" height="35%" width="20%" align="Left" bgcolor="#00fff" background="image/crywrdp.gif" >
