Pattern library

Tables

Use the markup below to create a table. Do not use Markdown syntax; it doesn't include the wrapper element needed to ensure correct whitespace around the table.

If you want content in <td> elements to be vertically aligned to the top of the cell, add the w-table--top-align class to the <table> element.

Tables scroll when their width is larger than that of the content column.

View full screen

Details

Source (Nunjucks)

<div class="w-table-wrapper">
<table>
<thead>
<tr>
<th>Image Format</th>
<th>Lossy Plugin(s)</th>
<th>Lossless Plugin(s)</th>
</tr>
</thead>
<tbody>
<tr>
<td>JPEG</td>
<td><a href="#">imagemin-mozjpeg</a></td>
<td><a href="#">imagemin-jpegtran</a></td>
</tr>
<tr>
<td>PNG</td>
<td><a href="#">imagemin-pngquant</a></td>
<td><a href="#">imagemin-optipng</a></td>
</tr>
<tr>
<td>GIF</td>
<td><a href="#">imagemin-giflossy</a></td>
<td><a href="#">imagemin-gifsicle</a></td>
</tr>
<tr>
<td>SVG</td>
<td><a href="#">Imagemin-svgo</a></td>
<td></td>
</tr>
<tr>
<td>WebP</td>
<td><a href="#">imagemin-webp</a></td>
<td></td>
</tr>
</tbody>
<caption>
Imagemin plugins for filetypes.
</caption>
</table>
</div>

Output

<div class="w-table-wrapper">
<table>
<thead>
<tr>
<th>Image Format</th>
<th>Lossy Plugin(s)</th>
<th>Lossless Plugin(s)</th>
</tr>
</thead>
<tbody>
<tr>
<td>JPEG</td>
<td><a href="#">imagemin-mozjpeg</a></td>
<td><a href="#">imagemin-jpegtran</a></td>
</tr>
<tr>
<td>PNG</td>
<td><a href="#">imagemin-pngquant</a></td>
<td><a href="#">imagemin-optipng</a></td>
</tr>
<tr>
<td>GIF</td>
<td><a href="#">imagemin-giflossy</a></td>
<td><a href="#">imagemin-gifsicle</a></td>
</tr>
<tr>
<td>SVG</td>
<td><a href="#">Imagemin-svgo</a></td>
<td></td>
</tr>
<tr>
<td>WebP</td>
<td><a href="#">imagemin-webp</a></td>
<td></td>
</tr>
</tbody>
<caption>
Imagemin plugins for filetypes.
</caption>
</table>
</div>

Variants

Table with top aligned content

View full screen

Details

Source

<div class="w-table-wrapper">
<table class="w-table--top-align">
<thead>
<tr>
<th>Tool</th>
<th>CLI</th>
<th>CI</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lighthouse</td>
<td></td>
<td></td>
<td>
<ul>
<li>
Budgets for different types of resources based on their size or
count
</li>
</ul>
</td>
</tr>
<tr>
<td>webpack</td>
<td></td>
<td></td>
<td>
<ul>
<li>Budgets based on sizes of assets generated by webpack</li>
<li>Checks uncompressed sizes</li>
</ul>
</td>
</tr>
<tr>
<td>bundlesize</td>
<td></td>
<td></td>
<td>
<ul>
<li>Budgets based on sizes of specific resources</li>
<li>Checks compressed or uncompressed sizes</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>

Output
<div class="w-table-wrapper">
<table class="w-table--top-align">
<thead>
<tr>
<th>Tool</th>
<th>CLI</th>
<th>CI</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lighthouse</td>
<td></td>
<td></td>
<td>
<ul>
<li>
Budgets for different types of resources based on their size or
count
</li>
</ul>
</td>
</tr>
<tr>
<td>webpack</td>
<td></td>
<td></td>
<td>
<ul>
<li>Budgets based on sizes of assets generated by webpack</li>
<li>Checks uncompressed sizes</li>
</ul>
</td>
</tr>
<tr>
<td>bundlesize</td>
<td></td>
<td></td>
<td>
<ul>
<li>Budgets based on sizes of specific resources</li>
<li>Checks compressed or uncompressed sizes</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>