These tags specify the Table Header, Table Footer, and Table Body. Basically the top area, bottom area, and main area of the table. These three tags are used to create sections of rows just like COLGROUP and COL were used for columns.
A table may contain only one THEAD and TFOOT area. It may however contain multiple TBODY tags. Each of these areas (like a normal row) require the same number of columns. This may be adjusted when COLSPAN and ROWSPAN are in place, but that is another story. Each area must contain at least one row.
These three tag sets are a set in themselves. That is... if you are going to use them, you must use all 3 of them in any specific table area. You can't have just a THEAD or whatever. They are a complete set.
Lets start with one of the COLGROUP examples, add in three rows, and work out from there...
<table border="1" width="600">
<colgroup span="4" width="150">
</colgroup>
<tr>
<td>cell 1-1</td>
<td>cell 1-2</td>
<td>cell 1-3</td>
<td>cell 1-4</td>
</tr>
<tr>
<td>cell 2-1</td>
<td>cell 2-2</td>
<td>cell 2-3</td>
<td>cell 2-4</td>
</tr>
<tr>
<td>cell 3-1</td>
<td>cell 3-2</td>
<td>cell 3-3</td>
<td>cell 3-4</td>
</tr>
<tr>
<td>cell 4-1</td>
<td>cell 4-2</td>
<td>cell 4-3</td>
<td>cell 4-4</td>
</tr>
</table> |
So each column is set at 150 pixels using the COLGROUP tag. We are concentrating on rows for this segment though.
First enter the THEAD area. Where is the HEAD of something usually found? Right... at the top. So we will specify the top row as the THEAD area. Same with the TFOOT. A footer is usually found at the bottom, so we will specify the last row as the TFOOT area. The two middle rows will be the TBODY area. In an actual use, you may specify many TBODY areas. This may help distinguish specific row sections in a large table setting.
<table border="1" width="600">
<colgroup span="4" width="150">
</colgroup>
<thead>
<tr>
<td>cell 1-1</td>
<td>cell 1-2</td>
<td>cell 1-3</td>
<td>cell 1-4</td>
</tr>
</thead>
<tbody>
<tr>
<td>cell 2-1</td>
<td>cell 2-2</td>
<td>cell 2-3</td>
<td>cell 2-4</td>
</tr>
<tr>
<td>cell 3-1</td>
<td>cell 3-2</td>
<td>cell 3-3</td>
<td>cell 3-4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>cell 4-1</td>
<td>cell 4-2</td>
<td>cell 4-3</td>
<td>cell 4-4</td>
</tr>
</tfoot>
</table> |
Since these are just specifying groups of rows, there is no visual difference from the above example code and the previous one above. The "T" tags specify sections of rows. Here is the visual of the example anyways just so you can see what it looks like...
Still with me? Did I lose anyone? So far all this has done is put a "label" on different rows in the table area. The colgroup took care of the columns. Well... now what? Glad you asked! FRAME and RULES will put these row and column tags into good use...
-----------------
Article by David Stanley. Visit his site http://www.htmlite.com. Reprinted with permission.
|
What is hot:
