HTML HTML

HTML 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:

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:

Table Borders: Between Groups of Columns >