Jaeger Technical Specifications
Country Height (meters) Weight (tonnes)
Gipsy Danger United States 79 1980
Striker Eureka Australia 76 1850
Crimson Typhoon China 76 1722
Coyote Tango Japan 86 2312
Cherno Alpha Russia 85 2412

Previously I’ve shown & patterns for various kinds of , 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.

Package Manufacturer Name Speed Cores Cache Price
AMD Opteron 6172 Twelve-Core 2.1GHz w/ 18MB Cache AMD Opteron 6172 2.1 GHz 12 18 MB $1,199.99
Intel Core™ i7-3960X Processor Extreme Edition 3.30GHz w/ 15MB Cache Intel Core i7-3960X 3.3 GHz 6 15 MB $1,049.99
Core™ i7-990X Processor Extreme Edition 3.46GHz w/ 12MB Cache Intel Core i7-990X 3.46 GHz 6 12 MB $899.99
Opteron 6168 Twelve-Core 1.9GHz w/ 18MB Cache Intel Opteron 6168 1.9 GHz 12 18 MB $849.99
Opteron 6134 Eight-Core 2.3GHz w/ 12MB Cache AMD Opteron 6134 2.3 GHz 8 12 MB $619.99
Core i7-3930K Processor, 3.20GHz w/ 12MB Cache Intel i7-3930K 3.2 GHz 6 12 MB $569.99

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.

2007 Greenhouse gas contributions
per country (megatonnes)
  USA China India Canada Brazil
CO2 29,529.1 6,702.6 1410.4 583.9 373.7
Methane 521.1 853.3 547.7 102.1 389.1

By default, information is jammed into the cells of 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):