Demo: Compass Table Scaffolding Example

Title	One	Two	Three	Four	Row Total
Single	1.0	2.0	3.0	4.0	10.0
Tens	10.0	20.0	30.0	40.0	100.0
Total	11.0	22.0	33.0	44.0	110.0

html haml

<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

scss sass css

@import "https://compass-style.org/files/beta-sub/examples/compass/tables/compass/utilities/tables/scaffolding";
.example {
  table {
    @include table-scaffolding;
  }
}

@import https://compass-style.org/files/beta-sub/examples/compass/tables/compass/utilities/tables/scaffolding
.example
  table
    +table-scaffolding

.example table th {
  text-align: center;
  font-weight: bold;
}
.example table td,
.example table th {
  padding: 2px;
}
.example table td.numeric,
.example table th.numeric {
  text-align: right;
}