Tables

Tables

Introduction

Table style is handled automatically by Paper, using proper coloring for headers and footer, alternating colors for rows and adding a subtle border around cells.

Headers automatically bolden the text, leaving it left-aligned by default. If you prefer centered text, use the center specialization class (see Justification).

Captions are handled as well. Unlike the default, unstyled table captions, in Paper they are moved below the table itself, to better resemble image captions.

Usage

Tables are handled through traditional table tags. caption tag is handled as well. Make sure to use the tbody tag around your tr tags in order to properly style alternating rows.

Example

A simple table styled by Paper.

<table>
  <tbody>
    <tr>
      <td>Row 1, cell 1</td>
      <td>Row 1, cell 2</td>
      <td>Row 1, cell 3</td>
    </tr>
    <tr>
      <td>Row 2, cell 1</td>
      <td>Row 2, cell 2</td>
      <td>Row 2, cell 3</td>
    </tr>
    <tr>
      <td>Row 3, cell 1</td>
      <td>Row 3, cell 2</td>
      <td>Row 3, cell 3</td>
    </tr>
  </tbody>
</table>

Example

A complete table with header (centered text), footer and caption. The table itself is centered in its container.

<table class="centered">
  <thead class="center">
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, cell 1</td>
      <td>Row 1, cell 2</td>
      <td>Row 1, cell 3</td>
    </tr>
    <tr>
      <td>Row 2, cell 1</td>
      <td>Row 2, cell 2</td>
      <td>Row 2, cell 3</td>
    </tr>
    <tr>
      <td>Row 3, cell 1</td>
      <td>Row 3, cell 2</td>
      <td>Row 3, cell 3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>3</td>
      <td></td>
    </tr>
  </tfoot>
  <caption>Table caption</caption>
</table>

Live examples

Live examples