<div class='example'>
  <table cellspacing='0'>
    <thead>
      <tr class='odd'>
        <th>Title</th>
        <th>One</th>
        <th>Two</th>
        <th>Three</th>
        <th>Four</th>
        <th>Row Total</th>
      </tr>
    </thead>
    <tbody>
      <tr class='even'>
        <th>Single</th>
        <td class='numeric'>1.0</td>
        <td class='numeric'>2.0</td>
        <td class='numeric'>3.0</td>
        <td class='numeric'>4.0</td>
        <td class='numeric'>10.0</td>
      </tr>
      <tr class='odd'>
        <th>Tens</th>
        <td class='numeric'>10.0</td>
        <td class='numeric'>20.0</td>
        <td class='numeric'>30.0</td>
        <td class='numeric'>40.0</td>
        <td class='numeric'>100.0</td>
      </tr>
    </tbody>
    <tfoot>
      <tr class='even'>
        <th>Total</th>
        <td class='numeric'>11.0</td>
        <td class='numeric'>22.0</td>
        <td class='numeric'>33.0</td>
        <td class='numeric'>44.0</td>
        <td class='numeric'>110.0</td>
      </tr>
    </tfoot>
  </table>
</div>

.example
  %table{:cellspacing => "0"}
    %thead
      %tr.odd
        %th Title
        %th One
        %th Two
        %th Three
        %th Four
        %th Row Total
    %tbody
      %tr.even
        %th Single
        %td.numeric 1.0
        %td.numeric 2.0
        %td.numeric 3.0
        %td.numeric 4.0
        %td.numeric 10.0
      %tr.odd
        %th Tens
        %td.numeric 10.0
        %td.numeric 20.0
        %td.numeric 30.0
        %td.numeric 40.0
        %td.numeric 100.0
    %tfoot
      %tr.even
        %th Total
        %td.numeric 11.0
        %td.numeric 22.0
        %td.numeric 33.0
        %td.numeric 44.0
        %td.numeric 110.0

@import "https://compass-style.org/files/docs/examples/compass/tables/compass/utilities/tables/alternating-rows-and-columns";
.example {
  table {
    $table-color: #7a98c6;
    @include alternating-rows-and-columns($table-color, adjust-hue($table-color, -120deg), #222222); } }

@import "https://compass-style.org/files/docs/examples/compass/tables/compass/utilities/tables/alternating-rows-and-columns"
.example
  table
    $table-color : #7a98c6
    +alternating-rows-and-columns($table-color, adjust-hue($table-color, -120deg), #222)

.example table th {
  background-color: white;
}
.example table th.even, .example table th:nth-child(2n) {
  background-color: #dddddd;
}
.example table tr.odd td {
  background-color: #98c67a;
}
.example table tr.odd td.even, .example table tr.odd td:nth-child(2n) {
  background-color: #76a458;
}
.example table tr.even td {
  background-color: #7a98c6;
}
.example table tr.even td.even, .example table tr.even td:nth-child(2n) {
  background-color: #5876a4;
}
.example table tfoot th, .example table tfoot td {
  background-color: white;
}
.example table tfoot th.even, .example table tfoot th:nth-child(2n), .example table tfoot td.even, .example table tfoot td:nth-child(2n) {
  background-color: #dddddd;
}