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>
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>
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>