Join James Williamson for an in-depth discussion in this video Displaying data, part of HTML: Building Tables.
- Tables have a long and somewhat complicated history in HTML. Browsers had begun supporting tables as early as 1994, although they weren't explicitly added to HTML until the 2.1 specification. They were originally intended to represent data. However, enterprising designers began to realize that since tables could contain any content, they could also be used as a mechanism for controlling page layout. This is largely the result of there being no other option, as CSS had not matured to the level of controlling page layout just yet.
It also didn't help that the HTML 3.2 specification actually stated in it that tables could be used for layout purposes. Now this led to increasingly more complex pages as designers tried to create more sophisticated layouts. Now, this bit of confusing code, for example, is from Yahoo's homepage in 1998. And as you can see, as I'm just scrolling through this, lot of table markup here for the little bit of content that's inside of them.
Well, over time this practice just wasn't sustainable. It required designers to create code that was a nightmare to maintain. And it only targeted one screen at one size. So the standards community realized how serious a problem this was. And they set about solving it by strengthening and promoting the layout capabilities in CSS, all the while refocusing attention on the actual semantics of tables. Now, thankfully, tables have all but ceased to be used as a layout device, but they still remain an important part of HTML.
They're really designed to do just one thing, represent data that requires more than one dimension. Now that may sound a little weird, but you really need to think about this way. If you wanted to rank your favorite albums of all time, you really only need one dimension, and for that you can just use a list. But what if you wanted to add additional information? Like genre, date recorded, and band name. Well, now you've introduced a second dimension of data, and that's best represented by using a table.
So the criteria for using a table are pretty straightforward. You just wanna make sure that a table is the best fit semantically for the data you need to represent, and, honestly, that's usually pretty obvious. As we go through the process of learning how to build tables, I'll also go over some ways that you can improve the semantics and accessibility of them. Doing so is important, as it can ensure that your data is discoverable by other user agents and that the information they contain is available to all your users.
- Adding content to tables
- Defining table headers
- Styling borders
- Alternating table row colors
- Grouping table content
- Defining columns and headers
- Making table data accessible