HTML Table Tutorial Lesson 2h: The FRAME Attribute of the TABLE Element

hitmill.com

HTML Table Tutorial Lesson 2h
The FRAME Attribute of the TABLE Element

A free HTML tutorial about the FRAME attribute of the TABLE element which allows the creation of partial borders on tables.

ALIGN
BACKGROUND
BGCOLOR
BORDER
BORDERCOLOR
BORDERCOLORLIGHT
BORDERCOLORDARK
CELLPADDING
CELLSPACING
COLS
COLSPAN
FRAME
HSPACE
ROWSPAN
VSPACE
WIDTH

First I would like to say that the FRAME attribute of the <TABLE> tag is in no way connected to HTML Frames. That is an altogether different topic. This FRAME attribute has to do with making partial borders around tables. First I will show you a table, then I will share the code, so you know to do it. (Some browsers will not yet support the frame attribute of the table tag. Internet Explorer will support the FRAME attribute of the TABLE tag, so use Internet Explorer for your testing.) If you use the FRAME attribute your tables will not display correctly in the browsers that do not support the FRAME attribute of the TABLE tag. Your tables and pages may be skewed and look terrible in those browsers not supporting this attribute.

FRAME=HSIDES

HSIDES means that the top and bottom horizontal borders will appear:

FRAME="HSIDES"


	<TABLE FRAME="HSIDES" BORDER="4" CELLSPACING="4"
CELLPADDING="10" 	BORDERCOLOR="red" ALIGN="center">
<TR VALIGN="top">

	<TD><FONT SIZE="4">FRAME="HSIDES"</FONT></TD>

</TR>

	</TABLE>

Note: When you code FRAME=HSIDES you need to still specify the BORDER width for the outer part and if you want a second fine line with it, you have to code CELLSPACING. The effect will not show up well on certain backgrounds unless you also code a BORDERCOLOR for your partial frame.

FRAME=VSIDES

FRAME=VSIDES will render vertical frames on the left and right edges of the table:

FRAME="VSIDES"

<table frame="vsides" border="4" cellspacing="4" bgcolor="cornsilk" bordercolor="green" cellpadding="10">
<tr valign="top">
<td><div class="again" style="margin-left:0; margin-right:0">
FRAME="VSIDES"</div>
</td>
</tr>
</table>

See what happens now if we add more than one cell to a table that has vertical borders:

Row 1: Column 1	Row 1: Column 2
Row 2: Column 1	Row 2: Column2

The vertical borders lose their effectiveness, the table has become sloppy and looks like "something is missing". Adding a subtle background color would help to restore some cohesiveness to the table. Another thing to keep in mind is that not all browsers support the FRAME attribute of the TABLE tag.

Back | Next

Lesson #1 | Beginning of Lesson#2