1. Selway Theme Demo
  2. Usage Guides
  3. Formatting Content

Tables

Author photo Michael Reid
Have more questions? Submit a request

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>

Articles in this section

See more
Was this article helpful?
0 out of 0 found this helpful
Share

Comments

0 comments

Please sign in to leave a comment.