Click Here for FREE Web Hosting!

Home >> Tables >> Table Borders

Table Borders: Just Rows or Just Columns

Table Borders: Between Groups of Columns

Table Borders: 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

Table Borders: Just Rows or Just Columns

Table Borders: Between Groups of Columns