Table Borders: Borders Between Groups of Rows
Sometimes the table looks better if there are borders only between groups of rows. To do this we'll use some HTML 4.0 markup added just for that purpose. Note that currently only MSIE supports borders between groups of rows.First we'll add a
RULES
<TABLE ...>
RULES
GROUPS
to indicate that the borders should go only between groups, not between every cell:
<TABLE CELLPADDING=6 RULES=GROUPS FRAME=BOX>Now that we've indicated that the borders should go between groups we need to designate the groups themselves. To designate groups of rows we'll use the
<THEAD ...>
<TBODY ...>
<TFOOT ...>
<THEAD ...>
<TBODY ...>
<TFOOT ...>
So, for example, the following code creates a table header section with the weekday, date, manager and quantity. The table body section has several rows of data and is followed by a table footer. HTML 4.0 compliant visual browsers will render the table with borders after the first row and before the last row.
<TABLE CELLPADDING=6 RULES=GROUPS FRAME=BOX> <THEAD> <TR> <TH>Weekday</TH> <TH>Date</TH> <TH>Manager</TH> <TH>Qty</TH> </TR> </THEAD> <TBODY> <TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD> <TD>639</TD> </TR> <TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD> </TR> <TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD> <TD>1135</TD> </TR> <TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD> <TD>1002</TD> </TR> <TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD> <TD>908</TD> </TR> <TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD> </TR> <TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD> <TD>272</TD> </TR> </TBODY> <TFOOT> <TR> <TH ALIGN=LEFT COLSPAN=3>Total</TH> <TH>4923</TH> </TR> </TFOOT> </TABLE>which gives us this table:
Weekday | Date | Manager | Qty |
---|---|---|---|
Mon | 09/11 | Kelsey | 639 |
Tue | 09/12 | Lindsey | 596 |
Wed | 09/13 | Randy | 1135 |
Thu | 09/14 | Susan | 1002 |
Fri | 09/15 | Randy | 908 |
Sat | 09/16 | Lindsey | 371 |
Sun | 09/17 | Susan | 272 |
Total | 4923 |
<THEAD ...>
<TFOOT ...>
<TBODY ...>
<TBODY ...>
<TBODY ...>
<TABLE RULES=GROUPS FRAME=BOX> <THEAD> <TR> <TH>Weekday</TH> <TH>Date</TH> <TH>Manager</TH> </TR> </THEAD> <TBODY> <TR> <TD>Monday</TD> <TD>09/11/2000</TD> <TD>Kelsey</TD> </TR> <TR> <TD>Tuesday</TD> <TD>09/12/2000</TD> <TD>Lindsey</TD> </TR> <TR> <TD>Wednesday</TD> <TD>09/13/2000</TD> <TD>Randy</TD> </TR> <TR> <TD>Thursday</TD> <TD>09/14/2000</TD> <TD>Susan</TD> </TR> <TR> <TD>Friday</TD> <TD>09/15/2000</TD> <TD>Randy</TD> </TR> <TR> <TD>Saturday</TD> <TD>09/16/2000</TD> <TD>Lindsey</TD> </TR> <TR> <TD>Sunday</TD> <TD>09/17/2000</TD> <TD>Susan</TD> </TR> </TBODY> <TBODY> <TR> <TD>Monday</TD> <TD>09/18/2000</TD> <TD>Melody</TD> </TR> <TR> <TD>Tuesday</TD> <TD>09/19/2000</TD> <TD>Christiane</TD> </TR> <TR> <TD>Wednesday</TD> <TD>09/20/2000</TD> <TD>Symphony</TD> </TR> <TR> <TD>Thursday</TD> <TD>09/21/2000</TD> <TD>Starflower</TD> </TR> <TR> <TD>Friday</TD> <TD>09/22/2000</TD> <TD>Miko</TD> </TR> <TR> <TD>Saturday</TD> <TD>09/23/2000</TD> <TD>Cleo</TD> </TR> <TR> <TD>Sunday</TD> <TD>09/24/2000</TD> <TD>Alyx</TD> </TR> </TBODY> <TBODY> <TR> <TD>Monday</TD> <TD>09/25/2000</TD> <TD>Dancing Star</TD> </TR> <TR> <TD>Tuesday</TD> <TD>09/26/2000</TD> <TD>Dawn</TD> </TR> <TR> <TD>Wednesday</TD> <TD>09/27/2000</TD> <TD>Josh</TD> </TR> <TR> <TD>Thursday</TD> <TD>09/28/2000</TD> <TD>Ryan</TD> </TR> <TR> <TD>Friday</TD> <TD>09/29/2000</TD> <TD>Mary Kay</TD> </TR> <TR> <TD>Saturday</TD> <TD>09/30/2000</TD> <TD>Hallie</TD> </TR> <TR> <TD>Sunday</TD> <TD>10/01/2000</TD> <TD>Paul</TD> </TR> </TBODY> </TABLE>which gives us this table:
Weekday | Date | Manager |
---|---|---|
Monday | 09/11/2000 | Kelsey |
Tuesday | 09/12/2000 | Lindsey |
Wednesday | 09/13/2000 | Randy |
Thursday | 09/14/2000 | Susan |
Friday | 09/15/2000 | Randy |
Saturday | 09/16/2000 | Lindsey |
Sunday | 09/17/2000 | Susan |
Monday | 09/18/2000 | Melody |
Tuesday | 09/19/2000 | Christiane |
Wednesday | 09/20/2000 | Symphony |
Thursday | 09/21/2000 | Starflower |
Friday | 09/22/2000 | Miko |
Saturday | 09/23/2000 | Cleo |
Sunday | 09/24/2000 | Alyx |
Monday | 09/25/2000 | Dancing Star |
Tuesday | 09/26/2000 | Dawn |
Wednesday | 09/27/2000 | Josh |
Thursday | 09/28/2000 | Ryan |
Friday | 09/29/2000 | Mary Kay |
Saturday | 09/30/2000 | Hallie |
Sunday | 10/01/2000 | Paul |
http://www.htmlcodetutorial.com/tables/index_famsupp_180.html
Table Borders: Between Groups of Columns
In the previous example we set borders between groups of rows. In this page we'll set borders between groups of columns. Like in the previous example, we indicate that the table should have borders between groups with theRULES
<TABLE ...>
<TABLE BORDER=1 CELLPADDING=4 RULES=GROUPS FRAME=BOX>To set which columns are grouped together we use the
<COLGROUP ...>
<COLGROUP ...>
<COLGROUP SPAN="...">
SPAN
<COLGROUP ...>
<TABLE BORDER=1 CELLPADDING=4 RULES=GROUPS FRAME=BOX> <COLGROUP></COLGROUP> <COLGROUP SPAN=3></COLGROUP>which gives us this table:
Weekday | Date | Manager | Qty |
---|---|---|---|
Monday | 09/11 | Kelsey | 639 |
Tuesday | 09/12 | Lindsey | 596 |
Wednesday | 09/13 | Randy | 1135 |
Thursday | 09/14 | Susan | 1002 |
Friday | 09/15 | Randy | 908 |
Saturday | 09/16 | Lindsey | 371 |
Sunday | 09/17 | Susan | 272 |
No comments:
Post a Comment