|
Everybody knows that the annoying double lines the table draws, are removed by adding 'cellspacing=0 cellpadding=0' to the TABLE tag.
The CAPTION element is only permitted immediately after the TABLE start tag. It may be positioned using 'caption-side: bottom;' or top, left or right, but IE ignores height, width, position and margins on CAPTION.
Sample code
BODY {
margin-left: 8em
}
TABLE {
margin-left: auto;
margin-right: auto
}
CAPTION {
caption-side: left;
margin-left: -8em;
width: 8em;
text-align: right;
vertical-align: bottom
}
| |
<TABLE border="1" bordercolor=red
cellspacing=0 cellpadding=0>
<CAPTION style="
caption-side: bottom;
margin-left: -8em;
width: 8em; text-align: right;
background-color:orange;
color: blue;
border: 10 double green; ">
A test table in rows</CAPTION>
<TR><TD>The first row cells...
<TR><TD>2nd row</td></tr>
<tr><td>3rd row</td></tr>
</TABLE>
| |
A test table in rows The first row cells... | 2nd row | 3rd row |
|
A TABLE element may only contain one CAPTION element, which may be dressed up using text enhancements. I tried <CAPTION style="background-color:orange; color: blue; border: 10 double green; font: bold large cursive">. Looks good, I think.
Mozilla Browser puts CAPTION element last.
<THREAD>
This is header information for a group of cells and is placed above the group of cells set apart by the TBODY command.
<TABLE border="1" bordercolor=red
cellspacing=0 cellpadding=5>
<CAPTION style="background-color:orange;
color: blue; border: 10 double green; font: bold large cursive">
A test table in rows</CAPTION>
<THREAD><TR><TD bgcolor=yellow>
The thread cells...</THREAD>
<TFOOT><TR><TD>The footer cells...</TFOOT>
<TBODY bgcolor="palegreen">
<TR><TD> text
<TR><TD> text
</TBODY>
</TABLE>
|
A test table in rows
thread cells...
| The footer cells... |
text
| text
|
|
<TBODY>
surrounds a block of table cells so that you can affect just that section. Place the TBODY tag immediately before the opening TR that you want to format and the end tag may be omitted, outside the closing /TR tag. Your tables can contain multiple TBODY statements.
1st Body |
2nd Cell |
2nd Body |
2nd row |
3rd row |
3rd row |
|
<TABLE border="1" cellpadding="3" cellspacing="0" width="50%">
<tbody align="center" style="font-family:verdana; color:purple; background-color:yellow">
<tr>
<td >1st Body</td>
<td>2nd Cell</td>
</tr>
</tbody>
<tbody align="center" style="font-family:verdana; color:green; background-color:wheat">
<tr>
<td>2nd Body</td>
<td>2nd row</td>
</tr>
<tr>
<td>3rd row</td>
<td>3rd row</td>
</tr>
</tbody>
</table>
|
<TFOOT> will allow you to place a footer below the TBODY section of a table. TBODY must come after TFOOT. Notice all the commands are TR rather than TD. Here's an example for both TBODY and TFOOT:
<TABLE border="1" bordercolor=red cellspacing=0 cellpadding=0>
<TFOOT><TR><TD>The footer cells...</TFOOT>
<TBODY align="center" style="font-family:verdana;
color:purple; background-color:yellow">
<TR><TD>1st Body Cell
</tr></tbody>
<tbody align="center" style="font-family:verdana;
color:purple; background-color:pink">
<TR><TD>2nd Body</td></tr>
<tr><td>3rd row</td></tr>
</TBODY>
</TABLE>
|
The footer cells... |
1st Body Cell |
2nd Body |
3rd row |
|
More than one TBODY in the table
<TABLE border=10 bordercolor=palegreen cellspacing=0 cellpadding=0>
<THEAD style="background-color:pink">
<TR><TD> ...header information...
<TFOOT style="background-color:yellow">
<TR><TD> ...footer information...
<TBODY style="background-color:skyblue">
<TR><TD> ...first row of block one data...
<TR><TD> ...second row of block one data...
<TBODY style="background-color:tan">
<TR><TD> ...first row of block two data...
<TR><TD> ...next row of block two data...
<TR><TD> ...third row of block two data...
</TABLE>
|
...header information... |
...footer information... |
...first row of block one data...
| ...second row of block one data... |
...first row of block two data...
| ...next row of block two data...
| ...third row of block two data... |
|
|