![]() |
![]() |
Here are some additional tags that can be used to create more sophisticated table layouts. They are structural markup tags.
The basic markup looks like this:
<table border="#" frame="value">
The frame attribute has eight values:
Here is the markup for a 3X3 table with borders at the top and the bottom of the table
<table border="4" bordercolor="#ff0000" frame="hsides">
<tr>
<td>Cell #1</td>
<td>Cell #2</td>
<td>Cell #3</td>
</tr>
<tr>
<td>Cell #4</td>
<td>Cell #5</td>
<td>Cell #6</td>
</tr>
<tr>
<td>Cell #7</td>
<td>Cell #8</td>
<td>Cell #9</td>
</tr>
</table>
And here's the table:
| Cell #1 | Cell #2 | Cell #3 |
| Cell #4 | Cell #5 | Cell #6 |
| Cell #7 | Cell #8 | Cell #9 |
Here's the table again with the value of the frame attribute changed from hsides to void
| Cell #1 | Cell #2 | Cell #3 |
| Cell #4 | Cell #5 | Cell #6 |
| Cell #7 | Cell #8 | Cell #9 |
Note: This attribute does not work across all browsers. Be sure to check your page with different machines and browsers before going live with it.
The basic markup looks like this:
<table border="#" rules="value">
The rules attribute has five values:
Here is the markup for a 3X3 table with borders at the top and the bottom of the table
<table border="4" bordercolor="#ff0000" rules="cols">
<tr>
<td>Cell #1</td>
<td>Cell #2</td>
<td>Cell #3</td>
</tr>
<tr>
<td>Cell #4</td>
<td>Cell #5</td>
<td>Cell #6</td>
</tr>
<tr>
<td>Cell #7</td>
<td>Cell #8</td>
<td>Cell #9</td>
</tr>
</table>
And here's the table:
| Cell #1 | Cell #2 | Cell #3 |
| Cell #4 | Cell #5 | Cell #6 |
| Cell #7 | Cell #8 | Cell #9 |
Here's the table again with the value of the rules attribute changed from cols to none
| Cell #1 | Cell #2 | Cell #3 |
| Cell #4 | Cell #5 | Cell #6 |
| Cell #7 | Cell #8 | Cell #9 |
Note: This attribute does not work across all browsers. Be sure to check your page with different machines and browsers before going live with it.
<tbody></tbody> This paired tag defines a table row that appears ar the top of the btable.
<tfoot></tfoot> This paired tag defines a table row that appears at the bottom of the table.
All three of these tags must have a <tr> paired tag enclosing the table cells in the row.
These tags may also use attributes< for formatting that will be applied to the entire table row
So, to have a table with a table header, a table body, and a table footer with the top and bottom rows different colors, you would use the following markup:
<table border="2">
<thead bgcolor="gray">
<tr>
<td colspan="2">Here is the <thead> content</td>
</tr>
</thead>
<tbody>
<tr>
<td>Cell#1</td>
<td>Cell#2</td>
</tr>
</tbody>
<tfoot bgcolor="aqua">
<tr>
<td colspan="2">Here is the <tfooter> content</td>
</tr>
</tfoot>
</table>
The table would look like this:
| Here is the <thead> content | |
| Cell#1 | Cell#2 |
| Here is the <tfooter> content | |
Note that this structural markup is not supported by all browsers
<col> This unpaired tag is used to specify which columns will be affected by the formatting
The <span> attribute is used with this tag to define the number of columns included in the grouping
Here is a 3X3 table with a width of 40%. The first two columns are grouped together and have a gray background. The third column has a silver background.
<table border="2" width="40%">
<colgroup>
<col span="2" bgcolor="gray" align="center" />
<col bgcolor="silver" />
</colgroup>
<tr>
<td>Cell#1</td>
<td>Cell#2</td>
<td>Cell#3</td>
</tr>
<tr>
<td>Cell#4</td>
<td>Cell#5</td>
<td>Cell#6</td>
</tr>
<tr>
<td>Cell#7</td>
<td>Cell#8</td>
<td>Cell#9</td>
</tr>
</table>
It would look like this:
| Cell#1 | Cell#2 | Cell#3 |
| Cell#4 | Cell#5 | Cell#6 |
| Cell#7 | Cell#8 | Cell#9 |
Note that this structural markup is not supported by all browsers
Enough! Let's try forms
| Demo Page Navigation: |
DemoPage contents | About HTML | UNIX help | HTML tags | Lists | Links | Images |
| Imagemapping | Tables | Forms | Frames | Javascript | CSS (style sheets) | XML |
|---|
| Page by Howard Rosenbaum | |
| Find me at hrosenba@indiana.edu | http://www.slis.indiana.edu/hrosenba/www/Demo/Demo4.html |