diff --git a/templates/components/tables/index.pug b/templates/components/tables/index.pug index ec5afa63..6e7daa5d 100644 --- a/templates/components/tables/index.pug +++ b/templates/components/tables/index.pug @@ -4,13 +4,19 @@ block vars - var title = 'Tables' block content - // TODO: - // Always usa a caption or aria-describedby - // Identify headers (column & row) - // Don't use absolute sizing - article h1 Tables + p Tables aren't suitable for layout on the modern web but they still serve an important purpose. + + p + .rb-note + include /partials/a11y.pug + .rb-note-text When building a table… + ul + li Always use a #[span.font-monospace <caption>] or an #[span.font-monospace aria-describedby] attribute to make the table's purpose clear. + li Always identify column & row headers with the #[span.font-monospace <th scope="…">] element. + li Don't use absolute (pixel) sizing for table content. + h2 Standard .grid-fluid @@ -19,13 +25,6 @@ block content +exampleWithCode include _tables-standard.pug - h2 Condensed - .grid-fluid - .row - .col.xs - +exampleWithCode - include _tables-condensed.pug - h2 Striped .grid-fluid .row @@ -53,3 +52,10 @@ block content .col.xs +exampleWithCode include _tables_header-contrasting.pug + + h2 Condensed + .grid-fluid + .row + .col.xs + +exampleWithCode + include _tables-condensed.pug