There is absolutely no reason not to use a table for making up tabular data. But wait, what is tabular data? Here are just a few examples:
For these examples and many others, it would take some severe CSS acrobatics to mark the data up to appear visually like a table. You could imagine trying to float and position all of the items with crafty CSS rules, only to end up with frustratingly inconsistent results. Not to mention that accurately reading the data without CSS would be nightmarish. The fact is, we shouldn't be afraid of tables—and we should use them for what they were designed for.
One of the reasons that tables get a bad rap is due to the accessibility problems they can cause if not carefully use. For instance, screen readers can have difficulty reading them properly, and small-screened devices are often hindered by tables when they are used for layout. But there are a few simple things we can do to increase the accessibility of a data table, while at the same time creating a lean structure that will be easy to style later on with CSS.
| Rank | Building | City | Year | Stories | Height (in feet) |
|---|---|---|---|---|---|
| 1 | Taipei 101 | Taipei | 2004 | 101 | 1670 |
| 2 | Petronas Tower 1 | Kuala Lumpur | 1998 | 88 | 1483 |
| 3 | Petronas Tower 2 | Kuala Lumpur | 1998 | 88 | 1483 |
| 4 | Sears Tower | Chicago | 1974 | 110 | 1450 |
| 5 | Jin Mao Building | Shanghai | 1999 | 88 | 1380 |
| 6 | Two International Finance Centre | Hong Kong | 2003 | 88 | 1362 |
| 7 | CITIC Plaza | Guangzhou | 1996 | 80 | 1283 |
| 8 | Shun Hing Square | Shenzhen | 1996 | 69 | 1260 |
| 9 | Empire State Building | New York | 1931 | 102 | 1250 |
| 10 | Central Plaza | Hong Kong | 1992 | 78 | 1227 |