Tables

Avatar
Michael Reid

Generic Table

Month Savings
Sum $270
January $100
February $80
March $90
<table class="table">
  <thead>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
    <td>Sum</td>
    <td>$270</td>
  </tr>
  </tfoot>
  <tbody>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tr>
    <td>March</td>
    <td>$90</td>
  </tr>
  </tbody>
</table>


Color Header:

Month Savings
Sum $270
January $100
February $80
March $90
<table class="table table--color-header">
  <thead>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
    <td>Sum</td>
    <td>$270</td>
  </tr>
  </tfoot>
  <tbody>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tr>
    <td>March</td>
    <td>$90</td>
  </tr>
  </tbody>
</table>

Bordered table

Month Savings
January $100
February $80
March $90
Sum $270
<table class="table table--bordered">
  <thead>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tr>
    <td>March</td>
    <td>$90</td>
  </tr>
  <tr>
    <td>Sum</td>
    <td>$270</td>
  </tr>
  </tbody>
</table>

Striped table

Month Savings
January $100
February $80
March $90
Sum $270
<table class="table table--striped">
  <thead>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tr>
    <td>March</td>
    <td>$90</td>
  </tr>
  <tr>
    <td>Sum</td>
    <td>$270</td>
  </tr>
  </tbody>
</table>

Hover-color table

Month Savings
January $100
February $80
March $90
Sum $270
<table class="table table--hover">
  <thead>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tr>
    <td>March</td>
    <td>$90</td>
  </tr>
  <tr>
    <td>Sum</td>
    <td>$270</td>
  </tr>
  </tbody>
</table>
Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Article is closed for comments.