Table

Selector

table, tr, th, td

Don't use these for layout! Tables are useful for easily presenting data in two dimensions. The markup involved is fairly verbose, each table will have two direct children: tbody and thead. Each of those will then have tr elements surrounding td elements or th elements. The table can also optionally have a caption as a direct child to provide a useful description for the table.

The scope attribute on the th element is useful and can also be used within the table body to make tables with two headers. This can be done to the previous table to more explicity associate each country with its mango export performance.

For particularly dense and wide tables, you can use the .striped class to make it easier for users to visually parse the table. The class will add a light background to every other row in the table.