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 attribute to the <TABLE ...> tag. We'll set RULES to 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 ...>, and <TFOOT ...> tags. These three tags indicate different major sections of the table. <THEAD ...> designates the head section which is usually where you put column headers. <TBODY ...> indicates the main body of the table. <TFOOT ...> sets the bottom section where you put totals and other summary information.

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

There should only be one <THEAD ...> and one <TFOOT ...>. (You can also leave them out altogether.) However, you can have multiple <TBODY ...> sections. Borders will go between the <TBODY ...> sections. So, for example, this table has three <TBODY ...> sections:

<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