Table

Basic

Straightforward visual style for tabular data.

JPEG 2000 JPEG-XR PNG WEBP
320×240 2K 22.6K 55.2K 112.1K
600×450 13.5K 48.5K 14.3K 26.6K
1024×768 19.2K 95.7K 325.7K 56K 
<table class="Table">
  <thead>
    <tr>
      <th></th>
      <th scope="col">JPEG 2000</th>
      <th scope="col">JPEG-XR</th>
      <th scope="col">PNG</th>
      <th scope="col">WEBP</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">320×240</th>
      <td>2K</td>
      <td>22.6K</td>
      <td>55.2K</td>
      <td>112.1K</td>
    </tr>
    <tr>
      <th scope="row">600×450</th>
      <td>13.5K</td>
      <td>48.5K</td>
      <td>14.3K</td>
      <td>26.6K</td>
    </tr>
    <tr>
      <th scope="row">1024×768</th>
      <td>19.2K</td>
      <td>95.7K</td>
      <td>325.7K</td>
      <td>56K</td>
    </tr>
  </tbody>
</table>

Ruled Modifier

Use the .Table--ruled modifier to add some rules.

JPEG 2000 JPEG-XR PNG WEBP
320×240 2K 22.6K 55.2K 112.1K
600×450 13.5K 48.5K 14.3K 26.6K
1024×768 19.2K 95.7K 325.7K 56K 
<table class="Table Table--ruled">
  <thead>
    <tr>
      <th></th>
      <th scope="col">JPEG 2000</th>
      <th scope="col">JPEG-XR</th>
      <th scope="col">PNG</th>
      <th scope="col">WEBP</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">320×240</th>
      <td>2K</td>
      <td>22.6K</td>
      <td>55.2K</td>
      <td>112.1K</td>
    </tr>
    <tr>
      <th scope="row">600×450</th>
      <td>13.5K</td>
      <td>48.5K</td>
      <td>14.3K</td>
      <td>26.6K</td>
    </tr>
    <tr>
      <th scope="row">1024×768</th>
      <td>19.2K</td>
      <td>95.7K</td>
      <td>325.7K</td>
      <td>56K</td>
    </tr>
  </tbody>
</table>

Striped Modifier

Use the .Table--striped modifier to add some stripes.

JPEG 2000 JPEG-XR PNG WEBP
320×240 2K 22.6K 55.2K 112.1K
600×450 13.5K 48.5K 14.3K 26.6K
1024×768 19.2K 95.7K 325.7K 56K 
<table class="Table Table--striped">
  <thead>
    <tr>
      <th></th>
      <th scope="col">JPEG 2000</th>
      <th scope="col">JPEG-XR</th>
      <th scope="col">PNG</th>
      <th scope="col">WEBP</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">320×240</th>
      <td>2K</td>
      <td>22.6K</td>
      <td>55.2K</td>
      <td>112.1K</td>
    </tr>
    <tr>
      <th scope="row">600×450</th>
      <td>13.5K</td>
      <td>48.5K</td>
      <td>14.3K</td>
      <td>26.6K</td>
    </tr>
    <tr>
      <th scope="row">1024×768</th>
      <td>19.2K</td>
      <td>95.7K</td>
      <td>325.7K</td>
      <td>56K</td>
    </tr>
  </tbody>
</table>