<h1>Basic Table Styles</h1>
<table>
  <caption>Table</caption>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
      <td>Cell 4</td>
      <td>Cell 5</td>
    </tr>
    <tr>
      <td>Cell 6</td>
      <td>Cell 7</td>
      <td>Cell 8</td>
      <td>Cell 9</td>
      <td>Cell 10</td>
    </tr>
    <tr>
      <td>Cell 11</td>
      <td>Cell 12</td>
      <td>Cell 13</td>
      <td>Cell 14</td>
      <td>Cell 15</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
    </tr>
  </tfoot>
</table>
/* Center tables for demo */
table {
  margin: 0 auto;
}

/* Default Table Style */
table {
  color: #333;
  background: white;
  border: 1px solid grey;
  font-size: 12pt;
  border-collapse: collapse;
}
table thead th,
table tfoot th {
  color: #777;
  background: rgba(0,0,0,.1);
}
table caption {
  padding:.5em;
}
table th,
table td {
  padding: .5em;
  border: 1px solid lightgrey;
}

External CSS

  1. //fonts.googleapis.com/css?family=Fira+Sans:300,400,500,700,300italic,400italic,500italic,700italic
  2. //fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic
  3. //fonts.googleapis.com/css?family=Source+Code+Pro:300,400,500,600,700,900
  4. //fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700,700italic,900,900italic
  5. //fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic
  6. //staticresource.s3.amazonaws.com/template/css/basic.css
  7. //staticresource.s3.amazonaws.com/template/plugins/buttons/data-buttons.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/eqcss/1.1.0/EQCSS-polyfills.min.js
  2. //cdnjs.cloudflare.com/ajax/libs/eqcss/1.1.0/EQCSS.min.js