Table Frames and Rules

<table


frame="frame value"

rules="rules value">

...</table>

Which table border sides to draw
Which inner-table rules to draw

In conjunction with border attribute, you can also specify exactly how to display the frame around your table and the border lines or 'rules' dividing rows and columns.

These are detailed below:

frame="frame value" ~ Although not widely used, the frame attribute is officially part of the HTML 4.01 Specification and serves to define exactly how to display the border or 'frame' surrounding your table. To do this, place the frame="frame value" attribute-value pair in your <table> tag where frame value equals one of the following and will display the table sides defined in the respective definition:

void No frame is drawn (default value).

above Only the top side is drawn.

below Only the bottom side is drawn.

hsides Only the top and bottom sides are drawn.

vsides Only the left and right sides are drawn.

lhs Only the left-hand side is drawn.

rhs Only the right-hand side is drawn.

box All four sides are drawn.

border All four sides are drawn.

rules="rules value" ~ Also not widely used (largely because web authors seldom use tables as tables), the rules attribute will define which lines or rules to draw between rows and columns in your table. To do this, place the rules="rules value" attribute-value pair in your <table> tag where rules value equals one of the following and will display the rules defined in the respective definition:

none No rules are drawn (default value).

groups Rules drawn between row groups and column groups.

rows Rules are drawn between rows only.

cols Rules are drawn between columns only.

all Rules are drawn between all rows and columns.

Note that the table frame and rules can be drawn in the absence of the border attribute. However if the border attribute is expressed and has a value of "0", it will override any values entered for frame or rules (frame will default to void while rules will default to none).

Example 1 - SOURCE CODE

<table border="4" bordercolor="#808080" 

frame="hsides" rules="rows">

   <tr><td>Cell content...</td><td>Cell content...</td></tr>

   <tr><td>Cell content...</td><td>Cell content...</td></tr>

   <tr><td>Cell content...</td><td>Cell content...</td></tr>

</table>

Example 1 - RESULT

Cell content...	Cell content...
Cell content...	Cell content...
Cell content...	Cell content...

Next we'll learn how to set the width of your table and align it on your web page...

<~BACK

TOP

NEXT~>

`void`	No frame is drawn (default value).
`above`	Only the top side is drawn.
`below`	Only the bottom side is drawn.
`hsides`	Only the top and bottom sides are drawn.
`vsides`	Only the left and right sides are drawn.
`lhs`	Only the left-hand side is drawn.
`rhs`	Only the right-hand side is drawn.
`box`	All four sides are drawn.
`border`	All four sides are drawn.

`none`	No rules are drawn (default value).
`groups`	Rules drawn between row groups and column groups.
`rows`	Rules are drawn between rows only.
`cols`	Rules are drawn between columns only.
`all`	Rules are drawn between all rows and columns.