HTML Tables: Splitting Cells

Today is an examination of building a table that is not so straightforward. At times, you may need to split header rows or table cells to display data in a certain way. This post will tackle how to create such a table. I am not a CSS wizard by any means but the styling is reasonably close.

Normally I like to provide explanations for what is going on. Given that this is a rather lengthy post, I am going to omit that this time. This should be looked at as a template of how to build a more complex table. If someone actually wants to hear the rational, just let me know.

Let's break this in to several chunks just to see the code a little bit more clearly. Of course, all of the code will be in a table tag. The style used for the table is width 977px and margin-top 10px. First, let's look at the header.

   <tr class="trHeader">
      <td class="tdNoStyle"></td>
      <td rowspan="2" style="width: 157px;">Pizza</td>
      <td rowspan="3" style="width: 157px;">Assetts You May Give</td>
      <td colspan="2" style="width: 269px;">Your bake if you eat</td>
      <td rowspan="3" style="width: 253px;">Expectations & Exceptions</td>
   </tr>
   <tr class="trHeader">
      <td class="tdNoStyle"></td>
      <td rowspan="2" style="width: 137px; vertical-align: bottom">In-House</td>
      <td rowspan="2" style="width: 131px; vertical-align: bottom">Out-Of-House</td>
   </tr>
   <tr class="trHeader">
      <td class="tdNoStyle"></td>
      <td rowspan="2" style="width: 157px;">Planned Event</td>
   </tr>
   <tr class="trHeader">
      <td class="tdNoStyle"></td>
      <td style="width: 293px;"></td>
      <td style="width: 137px;">Provisions</td>
      <td style="width: 131px;">Provisions</td>
      <td style="width: 253px;"></td>
   </tr>

The first section:

   <tr>
      <td></td>
      <td class="col1bkGrnd">If you meant pizza</td>
      <td class="rowStyle1">Pizza/Sandwich options and services</td>
      <td class="rowStyle1">$20 slice*</td>
      <td class="rowStyle1">30% sandwich</td>
      <td class="rowStyle1">-----none-----</td>
   </tr>
   <tr>
      <td></td>
      <td class="col1bkGrnd">pizza, sandwich</td>
      <td class="rowStyle5">Pizza/Sandwich options and services</td>
      <td class="rowStyle5">20% insurance</td>
      <td class="rowStyle5">30% insurance</td>
      <td class="rowStyle5">-----none-----</td>
   </tr>
   <tr>
      <td></td>
      <td rowspan="2" class="col1bkGrnd">toppings or veggies</td>
      <td class="rowStyle4"></td>
      <td class="rowStyle4"></td>
      <td class="rowStyle4"></td>
      <td class="rowStyle4"></td>
   </tr>
   <tr>
      <td></td>
      <td class="rowStyle1">Pizza/Sandwich options and services</td>
      <td class="rowStyle1">$20 slice*</td>
      <td class="rowStyle1">30% sandwich</td>
      <td class="rowStyle1">-----none-----</td>
   </tr>
   <tr>
      <td></td>
      <td class="col1bkGrnd, col1BrdrBtm">needs</td>
      <td class="rowStyle4">Pizza/Sandwich options and services</td>
      <td class="rowStyle4">20% insurance</td>
      <td class="rowStyle4">30% insurance</td>
      <td class="rowStyle4">-----none-----</td>
   </tr>

The second section:

   <tr>
      <td></td>
      <td class="col1bkGrnd"></td>
      <td class="rowStyle1">Premium slices and sandwiches are highly recommended</td>
      <td class="rowStyle1">$20 slice*</td>
      <td class="rowStyle1">30% insurance</td>
      <td class="rowStyle1">-----none-----</td>
   </tr>
   <tr>
      <td></td>
      <td rowspan="2" class="col1bkGrnd">For a private visit</td>
      <td class="rowStyle4">Special visit</td>
      <td class="rowStyle4">$20 slice*</td>
      <td class="rowStyle4">30% insurance</td>
      <td class="rowStyle4">-----none-----</td>
   </tr>
   <tr>
      <td></td>
      <td class="rowStyle3"></td>
      <td class="rowStyle3">Artichoke: Not</td>
      <td class="rowStyle3">Artichoke: Not</td>
      <td class="rowStyle3"></td>
   </tr>
   <tr>
      <td></td>
      <td class="col1bkGrnd">and private tour</td>
      <td class="rowStyle3">Special visit and tour</td>
      <td class="rowStyle3">included</td>
      <td class="rowStyle3">included</td>
      <td class="rowStyle3">-----none-----</td>
   </tr>
   <tr>
      <td></td>
      <td class="col1bkGrnd">or show</td>
      <td class="rowStyle3"></td>
      <td class="rowStyle3">Pepperoni: $20</td>
      <td class="rowStyle3">Pepperoni: 30%</td>
      <td class="rowStyle3"></td>
   </tr>
   <tr>
      <td></td>
      <td class="col1bkGrnd"></td>
      <td class="rowStyle1"></td>
      <td class="rowStyle1">slice*</td>
      <td class="rowStyle1">insurance</td>
      <td class="rowStyle1"></td>
   </tr>
   <tr>
      <td></td>
      <td class="col1bkGrnd"></td>
      <td class="rowStyle4">Preventive damage/death/dismemberment</td>
      <td class="rowStyle4">No charge</td>
      <td class="rowStyle4">30% insurance</td>
      <td class="rowStyle4">-----none-----</td>
   </tr>

The third section:

   <tr>
      <td></td>
      <td rowspan="2" class="col1bkGrnd">If you more pizza to</td>
      <td class="rowStyle3"></td>
      <td class="rowStyle3">Preferred: $10</td>
      <td class="rowStyle3"></td>
      <td class="rowStyle3"></td>
   </tr>
   <tr>
      <td></td>
      <td class="rowStyle3"></td>
      <td rowspan="2" class="rowStyle3">slice* at retail </td>
      <td class="rowStyle3"></td>
      <td class="rowStyle3"></td>
   </tr>
   <tr>
      <td></td>
      <td class="col1bkGrnd">treat your addiction</td>
      <td class="rowStyle3"></td>
      <td class="rowStyle3">30% insurance</td>
      <td rowspan="2" class="rowStyle3">31 day supply retail/93 day supply</td>
   </tr>
   <tr>
      <td></td>
      <td rowspan="2" class="col1bkGrnd">condition</td>
      <td rowspan="2" class="rowStyle3">Premium pizza</td>
      <td class="rowStyle3">slice* at mail</td>
      <td rowspan="2" class="rowStyle3">at retail, mail not</td>
   </tr>
   <tr>
      <td></td>
      <td rowspan="2" class="rowStyle3">Non-preferred: $45</td>
      <td rowspan="2" class="rowStyle3">mail order</td>
   </tr>
   <tr>
      <td></td>
      <td class="col1bkGrnd"></td>
      <td class="rowStyle3"></td>
      <td rowspan="2" class="rowStyle3">covered</td>
   </tr>
   <tr>
      <td></td>
      <td class="col1bkGrnd"></td>
      <td class="rowStyle3"></td>
      <td class="rowStyle3">slice* at retail, $90</td>
      <td class="rowStyle3"></td>
   </tr>
   <tr>
      <td></td>
      <td rowspan="2" class="col1bkGrnd">More information</td>
      <td class="rowStyle1"></td>
      <td class="rowStyle1">slice* at mail</td>
      <td class="rowStyle1"></td>
      <td class="rowStyle1"></td>
   </tr>
   <tr>
      <td class="rowStyle2"></td>
      <td class="rowStyle2"></td>
      <td class="rowStyle2"></td>
      <td class="rowStyle2"></td>
      <td class="rowStyle2"></td>
   </tr>
   <tr>
      <td></td>
      <td class="col1bkGrnd">about pizza</td>
      <td rowspan="2" class="rowStyle2">Preferred pizza</td>
      <td class="rowStyle2">$15 slice at retail,</td>
      <td class="rowStyle2"></td>
      <td class="rowStyle2"></td>
   </tr>
   <tr>
      <td></td>
      <td rowspan="2" class="col1bkGrnd">pizza addiction</td>
      <td rowspan="2" class="rowStyle2">$30 slice* at mail</td>
      <td class="rowStyle2"></td>
      <td class="rowStyle2"></td>
   </tr>
   <tr>
      <td class="rowStyle2"></td>
      <td class="rowStyle2"></td>
      <td class="rowStyle2"></td>
      <td class="rowStyle2"></td>
   </tr>
   <tr>
      <td></td>
      <td class="col1bkGrnd">available at www</td>
      <td class="rowStyle2"></td>
      <td class="rowStyle2"></td>
      <td class="rowStyle2"></td>
      <td class="rowStyle2"></td>
   </tr>
   <tr>
      <td></td>
      <td class="col1bkGrnd">.pizzaproblem.com</td>
      <td class="rowStyle4"></td>
      <td class="rowStyle4"></td>
      <td class="rowStyle4"></td>
      <td class="rowStyle4"></td>
   </tr>
   <tr>
      <td></td>
      <td class="col1bkGrnd">/public/pizza</td>
      <td class="rowStyle3"></td>
      <td rowspan="2" class="rowStyle3">$45 slice* at retail</td>
      <td class="rowStyle3"></td>
      <td class="rowStyle3"></td>
   </tr>
   <tr>
      <td></td>
      <td rowspan="2" class="bol1bkGrnd">addiction/help</td>
      <td rowpsan="2" class="rowStyle3">Non-Preferred pizza</td>
      <td class="rowStyle3"></td>
      <td class="rowStyle3"></td>
   </tr>
   <tr>
      <td></td>
      <td rowspan="2" class="rowStyle3">$10 copay* at mail</td>
      <td class="rowStyle3"></td>
      <td class="rowStyle3"></td>
   </tr>
   <tr>
      <td></td>
      <td rowspan="2" class="rowStyle3">/morepizza/index.</td>
      <td class="rowStyle3"></td>
      <td class="rowStyle3"></td>
      <td class="rowStyle3"></td>
   </tr>
   <tr>
      <td></td>
      <td class="rowStyle3"></td>
      <td class="rowStyle3"></td>
      <td class="rowStyle3"></td>
      <td class="rowStyle3"></td>
   </tr>
   <tr>
      <td></td>
      <td class="col1bkGrnd">html.</td>
      <td class="rowStyle1"></td>
      <td class="rowStyle1"></td>
      <td class="rowStyle1"></td>
      <td class="rowStyle1"></td>
   </tr>
   <tr>
      <td></td>
      <td class="col1bkGrnd"></td>
      <td class="rowStyle2"></td>
      <td class="rowStyle2"></td>
      <td class="rowStyle2">30% insurance</td>
      <td rowspan="2" class="rowStyle2">$400 minimum order</td>
   </tr>
   <tr>
     <td></td>
     <td class="col1bkGrnd"></td>
     <td rowspan="2" class="rowStyle2">Specialty pizza</td>
     <td rowspan="2" class="rowStyle2">20% insurance</td>
     <td rowspan="2" class="rowStyle2">at retail, mail not</td>
   </tr>
   <tr>
     <td></td>
     <td class="col1bkGrnd"></td>
     <td rowspan="2" class="rowStyle4">per month</td>
   </tr>
   <tr>
     <td></td>
     <td class="col1bkGrnd, col1BrdrBtm"></td>
     <td class="rowStyle4"></td>
     <td class="rowStyle4"></td>
     <td rowspan="2" class="rowStyle4">covered</td>
   </tr>

And the CSS classes:

.trHeader {
   background: #A9A9A9;
}

.thHeader > .tdNoStyle {
   border: none;
   background-color: rgb(239, 238, 239) !important;
}

.trHeader > td {
   border-left: #C0C0C0 1px solid;
   border-right: #C0C0C0 1px solid;
   padding-left: 5px;
}

.btnBorderHeader {
   border-bottom: #C0C0C0 1px solid;
}

.col1bkGrnd {
   background: #C0E8FB;
   padding-left: 5px;
   border-left: #70AFD9 1px solid;
   border-right: #70AFD9 1px solid;
}

.col1BrdrBtm {
    background: #C0E8FB;
    padding-left: 5px;
    border-left: #70AFD9 1px solid;
    border-right: #70AFD9 1px solid;
    border-bottom: #C0E8FB 1px solid;
    border-bottom: #70AFD9 1px solid;
}

.rowStyle1 {
    border-right: #70AFD9 1px solid;
    border-bottom: #70AFD9 1px solid;
    background: #EFF9FF;
    padding-left: 5px;
}

.rowStyle2 {
    border-right: #70AFD9 1px solid;
    vertical-align: bottom;
    padding-left: 5px;
}

.rowStyle3 {
    background: #EFF9FF;
    border-right: #70AFD9 1px solid;
    padding-left: 5px;
}

.rowStyle4 {
    border-bottom: #70AFD9 1px solid;
    border-right: #70AFD9 1px solid;
    padding-left: 5px;
}

.rowStyle5 {
    border-right: #70AFD9 1px solid;
    padding-left: 5px;
}