Previously I’ve shown HTML & CSS patterns for various kinds of tables, including designs with zebra stripes, rounded corners and scrolling data. Things get slightly more complex when we turn to “data grids”: tables that feature headers for both column and row information.

For this example I’ll use technical specifications of the giant Jaeger fighting mechs in Guillermo del Toro’s Pacfic Rim because, well, why the heck not.

Read more about HTML Data Grid Tables

Allowing elements to scroll inside a browser viewport is generally a bad design decision: users are likely to confuse the scrollbars on the inner element and the browser viewport, slowing speed and usability.

However there are rare occasions when scrolling might be considered for HTML elements. One such scenario is a shopping table, in which products or services with small but important distinctions are presented in rows.

In a future article, I’ll show you how to use JQuery to “stick” ; rows in the table, allowing easy comparison between products. In this section, I’ll present the markup and CSS for the table.

The code is fairly straightforward: a table header section (<thead>) with column headings, table body (<tbody>) containing the table data (different computer processors, in this case) and a table footer (<tfoot>). Rather oddly, the table footer is placed before the body in the code, but automatically appears underneath it in the browser. In this example, there is no data in the table footer, and its role is purely presentational.

Read more about Scrolling, Fade-in Table

By default, information is jammed into the cells of HTML tables like a rebellious prisoner.  OpenType fonts and CSS3 can be used to make tabular data much more legible and typographically attractive through the use of tabular numerals.

The table above has the following markup (in minified HTML5, to save space):

Read more about Aligned OpenType Table Data