|Landinator 9000 New||Completed||$300|
Tables are surprisingly hard to get right. The table element applies to the top-level
<table> element and results in nice-looking (albeit somewhat opinionated) tables.
Tables are one of the few elements in a17t that are more complex than a single class. The
.table selector specifies styles for
th. It automatically also applies itself to
<table> elements inside the
Responsiveness — As a UI element, tables generally don’t work well on smaller devices. (Just look at the Google Sheets app.) If a fluid mobile layout is important to you, consider using a card layout instead.
Width — This element by default is set to use all the horizontal space available to it. This is usually correct, but you can safely change the
.table width and the content will automatically reflow.
Tables do not directly respond to tone and priority variants; that information is simply passed down to child elements (e.g. chips).
Tables have complex accessibility requirements. For more information, consult this guide to WCAG standards for tables. While a17t encourages you to use a standard table structure through its selectors and default styling, the most valuable thing you can do is to structure your tables in a way that’s consistent with WCAG standards.
||color||—||sets background color of alternating rows|
||color||—||sets color of header cells|
You can also customize this element by simply overriding any of its CSS attributes, listed
here. Contextual variable defaults (e.g.,
--color-content) and global
--family-primary) are defined here.