Why It s Not Bulletproof

Why It's Not Bulletproof

To achieve its stylish appearance, the data table is a series of nested tables, with a galaxy of extra table cells to control such things as spacing and the one-pixel lines that border the table's elements.

Figure 7.3 shows the table that we're going to zero in on; all table cells are outlined with red lines (a feature that can be similarly replicated using the Web Developer Extension toolbar mentioned in Chapter 6, "No Images? No CSS? No Problem"). You can see that extra cells are used to control spacing between the cells of data, to add borders and lines, and to add the drop shadow behind the table. I say "extra" because these cells have nothing to do with describing the data and everything to do with the design and appearance of the table.

Figure 7.3. With table cells outlined, you can only guess at the vastness of the extra amount of code that's required.

That said, one downside to this common method is the commingling of design and content. This commingling means you'll run into more difficulty when changing the design at a later date. It also means more code is required and that you'll need to use extra table cells and graphics to achieve what a few lines of CSS can do when applied to a fraction of the code.

But in addition to the bulky code and deep tangling of design and data, this table could also benefit from some accessibility enhancementsmarkup that will make it easier for those browsing with screen readers and text browsers to understand the table's structure and the data it represents. As it stands now, the table scores very low points in terms of accessibility, with screen readers having to navigate a universe of nonessential code in order to find the real data contained withina bit like flying a space ship through a maze of enemy fire on the surface of an unfamiliar planet. It's not impossible if you're Lance Spacerunnerbut is surely difficult for the average person. And you want to present the data to the widest audience possible, with a flexible design applied by using CSS.