Tables were introduced to present scientific data in a clear and simple way. And while they are used for this kind of presentation, the most common use for tables on the web is as a way to organize the display. This is also called layout. The web browser lays out the web page starting at the upper left corner and works its way to the right and down until all the elements are placed on the page. We have seen some methods to alter or control this behavior by using alignment attributes and by using paragraph or break tags.
Tables allow even more precise control. In this example, suggested by a student, the contents are aligned along the right side of the page and each box in the table is 30 pixels wide. Lets start by looking the most common table tags and attributes.
Cols | Rows | |
Cell |
A table starts with a table tag. Each of the boxes that make up the table is called a cell. There are a number of attributes that control the table appearance as a whole. The border attribute controls whether lines will be drawn around the cells. Here we can see what happens with different border settings. We can specify the table width either as a percentage of the display or in pixels. We can control the alignment (align) and background color (bgcolor). The spacing between cells (cellspacing) and the spacing around the contents (cellpadding) of a cell can also be controlled.
Each row in a table is contained by a tr tag. The most common attributes are the background color (bgcolor) and the horizontal and vertical alignment of the cells in the row (align,valign).
Within a row are one or more th or td tags. Each of these contains the contents of one cell in the table. The difference between them is that the th tags display any text inside in bold. The common attributes are the alignment attributes (align, valign), the height and width controls, the background (bgcolor) color and the span (colspan, rowspan) attributes which allow the contents of a cell to actually span several rows or columns.
This should show the basic structure of a table.
Code | Result | ||||||
---|---|---|---|---|---|---|---|
<table border> <tr> <th>Row 1, Col1 </th> <th>Row 1, Col2 </th> </tr> <tr> <td>Row 2, Col1 </td> <td>Row 2, Col2 </td> </tr> <tr> <td>Row 3, Col1 </td> <td>Row 3, Col2 </td> </tr> </table> |
|
Here is an example of using tables for layout. We want a page that has three columns. Each column is devoted to a different topic and within each topic we want links to more information on sub topics within each topic.
Code | Result | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
<table border> <tr> <!-- one row several columns--> <td> <!-- column 1, topic 1--> <table> <!-- one column, several rows --> <tr> <th>Forms</th> </tr> <tr> <td>Creation</td> </tr> <tr> <td>Processing</td> </tr> <tr> <td>Examples</td> </tr> </table> </td> <td> <!-- column 2, topic 2--> <table> <!-- one column, several rows --> <tr> <th>Tables</th> </tr> <tr> <td>Layout</td> </tr> <tr> <td>Attributes</td> </tr> <tr> <td>Examples</td> </tr> </table> </td> <td> <!-- column 3, topic 3--> <table> <!-- one column, several rows --> <tr> <th>imagemaps</th> </tr> <tr> <td>Creation</td> </tr> <tr> <td>Using in page</td> </tr> <tr> <td>Examples</td> </tr> </table> </td> </tr> </table> |
|
The td tags can have whole tables nested inside. This gives us enormous flexibility but also can make it very complex. This example should show a lot of this in action.