Internet Explorer Tables
You'll find that you have many more layout and design options when you are
creating Tables for Internet Explorer. Keep in mind that this excludes all
browsers but IE.
The Table Code examples below will only list the relevant source, not the
source of the entire table as listed on other pages in the Table Tutorial
<TABLE> Elements in Explorer
BORDERCOLOR - Specifies the border color of the Table in Hex, RGB
triplet, or Color name.
Note: This does work in Netscape 4, but not 3
| Purple Border |
Purple Border |
<table border="1" bordercolor="purple">
BORDERCOLORLIGHT - Sets an independent lighter color to be displayed
on the border. BORDER is also required, and the color can be in Hex, RGB
triplet, or Color name.
| Light Border Color |
Light Border Color |
<table border="1"
bordercolorlight="purple">
BORDERCOLORDARK - Sets an independent darker color to be displayed
on the border. BORDER is also required, and the color can be in Hex, RGB
triplet, or Color name.
| Dark Border Color |
Dark Border Color |
<table border="1"
bordercolordark="purple">
BACKGROUND - Tiles an image throughout the table, like
<BODY> does
throughout a page.
Note: This does work in Netscape 4, but not 3
| How to make Tables - An in-depth Table tutorial covering Table standards
and Netscape and Explorer enhancements. Full examples included, as
always. |
| Your feedback is very important on features you'd like to
see here! If you have any suggestions, please
let me know! |
<table border="1" cellpadding="5"
cellspacing="1" width="80%"
background="images/tablebody.jpg">
Table Frames
Frames affect the display of the table borders. BORDER is also required.
The FRAME commands are:
Note: All Tables are below are 3x3.
VOID - Removes external borders.
| D.J. Quad's |
Ultimate Table Tutorial |
Internet Explorer |
| Table Tags |
Cell Padding 5 |
3 Rows |
| 3 Columns |
Frame Borders |
Cool eh |
<table border="1" cellpadding="5" frame="void">
ABOVE - Displays external borders at the top only.
| D.J. Quad's |
Ultimate Table Tutorial |
Internet Explorer |
| Table Tags |
Cell Padding 5 |
3 Rows |
| 3 Columns |
Frame Borders |
Cool eh |
<table border="1" cellpadding="5" frame="above">
BELOW - Displays external borders at the bottom only.
| D.J. Quad's |
Ultimate Table Tutorial |
Internet Explorer |
| Table Tags |
Cell Padding 5 |
3 Rows |
| 3 Columns |
Frame Borders |
Cool eh |
<table border="1" cellpadding="5" frame="below">
HSIDES - Displays external borders on the top and bottom only.
| D.J. Quad's |
Ultimate Table Tutorial |
Internet Explorer |
| Table Tags |
Cell Padding 5 |
3 Rows |
| 3 Columns |
Frame Borders |
Cool eh |
<table border="1" cellpadding="5" frame="hsides">
LHS - Displays external borders on the left only.
| D.J. Quad's |
Ultimate Table Tutorial |
Internet Explorer |
| Table Tags |
Cell Padding 5 |
3 Rows |
| 3 Columns |
Frame Borders |
Cool eh |
<table border="1" cellpadding="5" frame="lhs">
RHS - Displays external borders on the right only.
| D.J. Quad's |
Ultimate Table Tutorial |
Internet Explorer |
| Table Tags |
Cell Padding 5 |
3 Rows |
| 3 Columns |
Frame Borders |
Cool eh |
<table border="1" cellpadding="5" frame="rhs">
VSIDES - Displays externalborders on the left and right only.
| D.J. Quad's |
Ultimate Table Tutorial |
Internet Explorer |
| Table Tags |
Cell Padding 5 |
3 Rows |
| 3 Columns |
Frame Borders |
Cool eh |
<table border="1" cellpadding="5" frame="vsides">
BOX - Displays external borders on the top, bottom, left, and right
| D.J. Quad's |
Ultimate Table Tutorial |
Internet Explorer |
| Table Tags |
Cell Padding 5 |
3 Rows |
| 3 Columns |
Frame Borders |
Cool eh |
<table border="1" cellpadding="5" frame="box">
Table Columns
<COL> - Aligns the data by columns. Possible values are
ALIGN=CENTER, JUSTIFY, LEFT, or RIGHT. You may also use SPAN, which sets
the number of columns to affect.
<COLGROUP> - Sets the
number of columns that ALIGN
will affect. Additional commands include- ALIGN (CENTER, JUSTIFY, LEFT, or RIGHT),
- VALIGN (BASELINE, BOTTOM, MIDDLE, or TOP), and
- SPAN, which sets the number of
columns to affect.
Here is a table with both Tags:
| Heading 1 |
Cell 1 |
Cell 2 |
Cell 3 |
| Heading 2 |
Cell 4 |
Cell 5 |
Cell 6 |
| Heading 3 |
Cell 7 |
Cell 8 |
Cell 9 |
<table border="1" width="75%">
<col align="left">
<col align="right">
<colgroup span="2" align="center" valign="top">
<tr>
<th>Heading 1</th>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<th>Heading 2</th>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
<tr>
<th>Heading 3</th>
<td>Cell 7</td>
<td>Cell 8</td>
<td>Cell 9</td>
</tr>
</table>
<THEAD>, <TBODY>, and <TFOOT>
THEAD - Specifies the default layout for table rows.
TBODY - Encloses the Table Body, much like the <BODY> Tag does.
TFOOT - Encloses the Table Footer
The only requirement for using THEAD, TBODY, and TFOOT Tags is
RULES, in the <TABLE> Tag, which is listed in the
section below.
Here is an example of using THEAD, TBODY, and TFOOT Tags, in one example:
| Heading 1 |
Cell 1 |
Cell 2 |
Cell 3 |
| Heading 2 |
Cell 4 |
Cell 5 |
Cell 6 |
| Heading 3 |
Cell 7 |
Cell 8 |
Cell 9 |
<table border="1" width="75%" rules="cols">
<thead>
<colgroup span="4">
</thead>
<tbody>
<tr>
<th>Heading 1</th>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<th>Heading 2</th>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
<tr>
<th>Heading 3</th>
<td>Cell 7</td>
<td>Cell 8</td>
<td>Cell 9</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
Table Rules
Rules affect the display of the internal table borders. BORDER is also
required. It can only be used in Tables with the <THEAD>,
<TBODY> and <TFOOT> commands.
NONE - No internal table borders are displayed.
| Heading 1 |
Cell 1 |
Cell 2 |
Cell 3 |
| Heading 2 |
Cell 4 |
Cell 5 |
Cell 6 |
| Heading 3 |
Cell 7 |
Cell 8 |
Cell 9 |
<table border="1" width="75%" rules="none">
<thead>
<colgroup span="4">
</thead>
<tbody>
<tr>
<th>Heading 1</th>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<th>Heading 2</th>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
<tr>
<th>Heading 3</th>
<td>Cell 7</td>
<td>Cell 8</td>
<td>Cell 9</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
BASIC - Only displays internal table borders between
<TBODY> and <TFOOT>.
Note: For the rest of this section, the only thing that will change is the
first line of the above Table
| Heading 1 |
Cell 1 |
Cell 2 |
Cell 3 |
| Heading 2 |
Cell 4 |
Cell 5 |
Cell 6 |
| Heading 3 |
Cell 7 |
Cell 8 |
Cell 9 |
<table border="1" width="75%" rules="basic">
ROWS - Only displays internal table border rows.
| Heading 1 |
Cell 1 |
Cell 2 |
Cell 3 |
| Heading 2 |
Cell 4 |
Cell 5 |
Cell 6 |
| Heading 3 |
Cell 7 |
Cell 8 |
Cell 9 |
<table border="1" width="75%" rules="rows">
COLS - Only displays internal table border columns.
| Heading 1 |
Cell 1 |
Cell 2 |
Cell 3 |
| Heading 2 |
Cell 4 |
Cell 5 |
Cell 6 |
| Heading 3 |
Cell 7 |
Cell 8 |
Cell 9 |
<table border="1" width="75%" rules="cols">
ALL - All internal table borders are displayed.
| Heading 1 |
Cell 1 |
Cell 2 |
Cell 3 |
| Heading 2 |
Cell 4 |
Cell 5 |
Cell 6 |
| Heading 3 |
Cell 7 |
Cell 8 |
Cell 9 |
<table border="1" width="75%" rules="all">
Captions and Headers
The <CAPTION> Tag can also be used to ALIGN and VALIGN
itself. The <CAPTION></CAPTION> Tags go just after
the <TABLE> Tag.
D.J. Quad's Table
| Cell 1 |
Cell 2 |
Cell 3 |
| Cell 4 |
Cell 5 |
Cell 6 |
| Cell 7 |
Cell 8 |
Cell 9 |
<caption align="right" valign="bottom">D.J. Quad's Table</caption>
Table Row Elements in Explorer - <TR>
BORDERCOLOR - Specifies the border color of the Table in Hex, RGB
triplet, or Color name.
| October 27, 1996 |
New York, NY |
Los Angeles, CA |
| Time |
12:36 PM |
9:36 AM |
| Weather |
Cloudy |
Rainy |
<tr bordercolor="#800080">
BORDERCOLORLIGHT - Sets an independent lighter color to be displayed
on the border. BORDER is also required, and the color can be in Hex, RGB
triplet, or Color name.
| October 27, 1996 |
New York, NY |
Los Angeles, CA |
| Time |
12:36 PM |
9:36 AM |
| Weather |
Cloudy |
Rainy |
<tr bordercolorlight="#800080">
BORDERCOLORDARK - Sets an independent darker color to be displayed
on the border. BORDER is also required, and the color can be in Hex, RGB
triplet, or Color name.
| October 27, 1996 |
New York, NY |
Los Angeles, CA |
| Time |
12:36 PM |
9:36 AM |
| Weather |
Cloudy |
Rainy |
<tr bordercolordark="#800080">
Table Cell Elements in Explorer - <TD>
BORDERCOLOR - Specifies the border color of the Table in Hex, RGB
triplet, or Color name.
| October 27, 1996 |
New York, NY |
Los Angeles, CA |
| Time |
12:36 PM |
9:36 AM |
| Weather |
Cloudy |
Rainy |
<td bordercolor="#800080">
BORDERCOLORLIGHT - Sets an independent lighter color to be displayed
on the border. BORDER is also required, and the color can be in Hex, RGB
triplet, or Color name.
| October 27, 1996 |
New York, NY |
Los Angeles, CA |
| Time |
12:36 PM |
9:36 AM |
| Weather |
Cloudy |
Rainy |
<td bordercolorlight="#800080">
BORDERCOLORDARK - Sets an independent darker color to be displayed
on the border. BORDER is also required, and the color can be in Hex, RGB
triplet, or Color name.
| October 27, 1996 |
New York, NY |
Los Angeles, CA |
| Time |
12:36 PM |
9:36 AM |
| Weather |
Cloudy |
Rainy |
<td bordercolordark="#800080">
BACKGROUND - Tiles an image throughout the cell, like
<BODY> does
throughout a page.
Note: This does work in Netscape 4, but not 3
| October 27,
1996 |
New York, NY |
Los Angeles, CA |
| Time |
12:36 PM |
9:36 AM |
| Weather |
Cloudy |
Rainy |
<td background="tablebody.jpg">
|
