Tables - Component
Core table styles, wrapper block and scrolling utility.
Code
Source (Nunjucks)
<div class="table-wrapper scrollbar">
<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="table-wrapper scrollbar">
<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>Information
Use HTML markup for tables. Do not use Markdown syntax. It is also
recommended that you use the table-wrapper and scrollbar classes to
provide a good user experience for smaller viewports.
If you want content in <td> elements to be vertically aligned to the top of
the cell, add the [data-align="top"] exception to the <table> element. You can also
add [data-align="baseline"] for baseline alignment. The default alignment
is center and bottom alignment isn't available because it provides a poor
reading experience.
Key links
Variants
Aligment exception example
Code
Source (Nunjucks)
<div class="table-wrapper scrollbar">
<table data-alignment="top">
<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="table-wrapper scrollbar">
<table data-alignment="top">
<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>Misc content examples
Code
Source (Nunjucks)
<div class="table-wrapper scrollbar">
<table>
<thead>
<tr>
<th>Element type</th>
<th>How to add a name</th>
</tr>
</thead>
<tbody>
<tr>
<td>
HTML document
</td>
<td>
<a href="#label-documents-and-frames">Label documents and frames</a>
</td>
</tr>
<tr>
<td>
<code><frame></code> or <code><iframe></code> elements
</td>
<td>
<a href="#label-documents-and-frames">Label documents and frames</a>
</td>
</tr>
<tr>
<td>
Image elements
</td>
<td>
<a href="#include-text-alternatives-for-images-and-objects">
Include text alternatives for images and objects
</a>
</td>
</tr>
<tr>
<td>
<code><input type="image"></code> elements
</td>
<td>
<a href="#include-text-alternatives-for-images-and-objects">
Include text alternatives for images and objects
</a>
</td>
</tr>
<tr>
<td>
<code><object></code> elements
</td>
<td>
<a href="#include-text-alternatives-for-images-and-objects">
Include text alternatives for images and objects
</a>
</td>
</tr>
<tr>
<td>
Buttons
</td>
<td>
<a href="#label-buttons-and-links">Label buttons and links</a>
</td>
</tr>
<tr>
<td>
Links
</td>
<td>
<a href="#label-buttons-and-links">Label buttons and links</a>
</td>
</tr>
<tr>
<td>
Form elements
</td>
<td>
<a href="#label-form-elements">Label form elements</a>
</td>
</tr>
</tbody>
</table>
</div>Output
<div class="table-wrapper scrollbar">
<table>
<thead>
<tr>
<th>Element type</th>
<th>How to add a name</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML document</td>
<td>
<a href="#label-documents-and-frames">Label documents and frames</a>
</td>
</tr>
<tr>
<td>
<code><frame></code> or <code><iframe></code> elements
</td>
<td>
<a href="#label-documents-and-frames">Label documents and frames</a>
</td>
</tr>
<tr>
<td>Image elements</td>
<td>
<a href="#include-text-alternatives-for-images-and-objects">
Include text alternatives for images and objects
</a>
</td>
</tr>
<tr>
<td><code><input type="image"></code> elements</td>
<td>
<a href="#include-text-alternatives-for-images-and-objects">
Include text alternatives for images and objects
</a>
</td>
</tr>
<tr>
<td><code><object></code> elements</td>
<td>
<a href="#include-text-alternatives-for-images-and-objects">
Include text alternatives for images and objects
</a>
</td>
</tr>
<tr>
<td>Buttons</td>
<td>
<a href="#label-buttons-and-links">Label buttons and links</a>
</td>
</tr>
<tr>
<td>Links</td>
<td>
<a href="#label-buttons-and-links">Label buttons and links</a>
</td>
</tr>
<tr>
<td>Form elements</td>
<td>
<a href="#label-form-elements">Label form elements</a>
</td>
</tr>
</tbody>
</table>
</div>