Comparison Table

HTML

<table id="comparetable" class="blueshine">
  <tr>
    <td class="blank"> </td>
    <th>Turkey Carver</th>
    <th>Turkey Roaster</th>
    <th>Turkey Baster</th>
  </tr>
  <tr>
    <td class="rowTitle">Media</td>

    <td>Mention in advertisements and promotions and potential partnership with special media events</td>
    <td>&#10060;</td>
    <td>&#10060;</td>
  </tr>
  <tr>
    <td class="rowTitle">
      <p><strong>Newsletter</strong></p>
      <p class="BenefitDescription">Monthly circulation of nearly 100,000</p>
    </td>

    <td>Recognition in Denver Rescue Mission's October or November Changing Lives Newsletters</td>
    <td>&#10060;</td>
    <td>&#10060;</td>
  </tr>
  <tr>
    <td class="rowTitle">
      <p><strong>Social Media</strong></p>
      <p class="BenefitDescription">Audience of 25,500+</p>
    </td>

    <td>5-6 posts of recognition on Denver Rescue Mission's social media channels</td>
    <td>3-4 posts of recognition on Denver Rescue Mission's social media channels</td>
    <td>1-2 posts of recognition on Denver Rescue Mission's social media channels</td>
  </tr>
  <tr>
    <td class="rowTitle">
      <p><strong>Website</strong></p>
      <p class="BenefitDescription">Average of 14,500 unique visitors per month</p>
    </td>

    <td>Premier recognition on Denver Rescue Mission's website (<a href="http://www.DenverRescueMission.org/Turkey" target="_blank">DenverRescueMission.org/Turkey</a>)</td>
    <td>Logo recognition on Denver Rescue Mission's website (<a href="http://www.DenverRescueMission.org/Turkey" target="_blank">DenverRescueMission.org/Turkey</a>)</td>
    <td>Name recognition on Denver Rescue Mission's website (<a href="http://www.DenverRescueMission.org/Turkey" target="_blank">DenverRescueMission.org/Turkey</a>)</td>
  </tr>
  <tr>
    <td class="rowTitle">
      <p><strong>Flyer</strong></p>
    </td>

    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td class="rowTitle">
      <p><strong>Signage</strong></p>
   ...

CSS

body {
  background: #FFF
}


/* START COMPARISON TABLE STYLES */

.BenefitDescription{
  font-size:.8em;
  font-style:italic;
}

#comparetable {
  width: 100%;
  table-layout: fixed;
  text-align: center;
  margin: 4em 0;
  border-collapse: collapse;
}

#comparetable tr {
  background: transparent!important;
}

#comparetable td,
#comparetable th {
  padding: 7px;
  text-align: center;
}

#comparetable td.rowTitle {
  text-align: left;
}

#comparetable .blank {
  background: none!important;
  border: none!important;
}

#comparetable.blueshine th {
  background-color: #297FB8;
  font-size: 18px;
  color: #FFF;
  text-align: center;
  font-weight: bold;
  border: 1px solid #9fb6c8;
}

#comparetable.blueshine td {
  background-color: #f9f9f9;
  border: 1px solid #c8d6e2;
}

#comparetable.blueshine td.rowTitle {
  border-left: 4px solid #297FB8
}


/* END COMPARISON TABLE STYLES */