FRAME and RULES are properties of the opening TABLE tag. FRAME specifies which external borders will be visable (or not). RULES affects the lines that appear within the TABLE area.
FRAME values :
RULES values :
OK... You now have control over the columns, rows, outer borders, and inner borders. Can you feel the power? Lets do a test to put these newly discovered powers to work. Here is the starting example to specify the column and row areas...
Now lets get rid of the outer left and right side borders, and put the inner borders around the groupings only. All you have to do is change the opening TABLE tag to this...
See the example in action! Click here!
Think of the many possibilities all this can do for you now. Of course this is just a sectional effect. Add in some background color or image, or add in some CSS formatting... Your coding power just rose 100%!
FRAME values :
| void | Default value. No sides are visible. |
| above | Renders only top side only. |
| below | Renders only bottom side only. |
| lhs | Renders left side only. |
| rhs | Renders right side only. |
| hsides | Renders the top and bottom sides only. |
| vsides | Renders both left and right side only. |
| box | Renders all 4 sides. |
| border | Renders all 4 sides also. |
RULES values :
| none | Default value. No rules (lines) are rendered around any cells. |
| groups | Rules appear between row groupings (THEAD,TFOOD,TBODY) and column groupings (COLGROUP). Groups does not work around the COL areas. |
| rows | Rules appear only between rows. |
| cols | Rules appear only between columns. |
| all | Rules appear between all rows and columns. |
OK... You now have control over the columns, rows, outer borders, and inner borders. Can you feel the power? Lets do a test to put these newly discovered powers to work. Here is the starting example to specify the column and row areas...
|
<table border="1" width="600"> <caption>My Ultimate Table</caption> <colgroup span="1" width="200"></colgroup> <colgroup span="3" width="400"></colgroup> <thead> <tr> <td>cell 1-1</td> <td>cell 1-2</td> <td>cell 1-3</td> <td>cell 1-4</td> </tr> </thead> <tbody> <tr> <td>cell 2-1</td> <td>cell 2-2</td> <td>cell 2-3</td> <td>cell 2-4</td> </tr> <tr> <td>cell 3-1</td> <td>cell 3-2</td> <td>cell 3-3</td> <td>cell 3-4</td> </tr> </tbody> <tfoot> <tr> <td>cell 4-1</td> <td>cell 4-2</td> <td>cell 4-3</td> <td>cell 4-4</td> </tr> </tfoot> </table> |
Now lets get rid of the outer left and right side borders, and put the inner borders around the groupings only. All you have to do is change the opening TABLE tag to this...
| <table border="1" width="600" frame="hsides" rules="groups"> |
Think of the many possibilities all this can do for you now. Of course this is just a sectional effect. Add in some background color or image, or add in some CSS formatting... Your coding power just rose 100%!
