Introduction | TrueUI

Atoms

Tables

Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4
Table Footer 1 Table Footer 2 Table Footer 3 Table Footer 4
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4

HTML

<table cellspacing="0" class="w-100">
  <thead>
      <tr>
          <th class="tl pa2 bt b--blue-medium">Table Heading 1</th>
          <th class="tl pa2 bt b--blue-medium">Table Heading 2</th>
          <th class="tl pa2 bt b--blue-medium">Table Heading 3</th>
          <th class="tl pa2 bt b--blue-medium">Table Heading 4</th>
      </tr>
  </thead>
  <tfoot>
      <tr>
          <td class="tl pa2 bt b--blue-medium b">Table Footer 1</td>
          <td class="tl pa2 bt b--blue-medium b">Table Footer 2</td>
          <td class="tl pa2 bt b--blue-medium b">Table Footer 3</td>
          <td class="tl pa2 bt b--blue-medium b">Table Footer 4</td>
      </tr>
  </tfoot>
  <tbody>
      <tr>
          <td class="tl pa2 bt b--blue-medium b">Table Cell 1</td>
          <td class="tl pa2 bt b--blue-medium b">Table Cell 2</td>
          <td class="tl pa2 bt b--blue-medium b">Table Cell 3</td>
          <td class="tl pa2 bt b--blue-medium b">Table Cell 4</td>
      </tr>
      <tr>
          <td class="tl pa2 bt b--blue-medium b">Table Cell 1</td>
          <td class="tl pa2 bt b--blue-medium b">Table Cell 2</td>
          <td class="tl pa2 bt b--blue-medium b">Table Cell 3</td>
          <td class="tl pa2 bt b--blue-medium b">Table Cell 4</td>
      </tr>
  </tbody>
</table>
Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4
Table Footer 1 Table Footer 2 Table Footer 3 Table Footer 4
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4

HTML

<table cellspacing="0" class="w-100 pa3 ba b--blue-medium">
  <thead>
      <tr>
          <th class="tl pa2 pt0">Table Heading 1</th>
          <th class="tl pa2 pt0">Table Heading 2</th>
          <th class="tl pa2 pt0">Table Heading 3</th>
          <th class="tl pa2 pt0">Table Heading 4</th>
      </tr>
  </thead>
  <tfoot>
      <tr>
          <td class="pa2 pb0 bt b--blue-medium b">Table Footer 1</td>
          <td class="pa2 pb0 bt b--blue-medium b">Table Footer 2</td>
          <td class="pa2 pb0 bt b--blue-medium b">Table Footer 3</td>
          <td class="pa2 pb0 bt b--blue-medium b">Table Footer 4</td>
      </tr>
  </tfoot>
  <tbody>
      <tr>
          <td class="pa2 bt b--blue-medium">Table Cell 1</td>
          <td class="pa2 bt b--blue-medium">Table Cell 2</td>
          <td class="pa2 bt b--blue-medium">Table Cell 3</td>
          <td class="pa2 bt b--blue-medium">Table Cell 4</td>
      </tr>
      <tr>
          <td class="pa2 bt b--blue-medium">Table Cell 1</td>
          <td class="pa2 bt b--blue-medium">Table Cell 2</td>
          <td class="pa2 bt b--blue-medium">Table Cell 3</td>
          <td class="pa2 bt b--blue-medium">Table Cell 4</td>
      </tr>
  </tbody>
</table>
Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4
Table Footer 1 Table Footer 2 Table Footer 3 Table Footer 4
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4

HTML

<table cellspacing="0" class="w-100">
  <thead>
      <tr>
          <th class="tl pa2 bt b--blue-medium bg-blue-light">Table Heading 1</th>
          <th class="tl pa2 bt b--blue-medium bg-blue-light">Table Heading 2</th>
          <th class="tl pa2 bt b--blue-medium bg-blue-light">Table Heading 3</th>
          <th class="tl pa2 bt b--blue-medium bg-blue-light">Table Heading 4</th>
      </tr>
  </thead>
  <tfoot>
      <tr>
          <td class="pa2 pb0 bt b--blue-medium b">Table Footer 1</td>
          <td class="pa2 pb0 bt b--blue-medium b">Table Footer 2</td>
          <td class="pa2 pb0 bt b--blue-medium b">Table Footer 3</td>
          <td class="pa2 pb0 bt b--blue-medium b">Table Footer 4</td>
      </tr>
  </tfoot>
  <tbody>
      <tr>
          <td class="pa2 bt b--blue-medium">Table Cell 1</td>
          <td class="pa2 bt b--blue-medium">Table Cell 2</td>
          <td class="pa2 bt b--blue-medium">Table Cell 3</td>
          <td class="pa2 bt b--blue-medium">Table Cell 4</td>
      </tr>
      <tr>
          <td class="pa2 bt b--blue-medium">Table Cell 1</td>
          <td class="pa2 bt b--blue-medium">Table Cell 2</td>
          <td class="pa2 bt b--blue-medium">Table Cell 3</td>
          <td class="pa2 bt b--blue-medium">Table Cell 4</td>
      </tr>
  </tbody>
</table>