Assistive technology gags when it encounters HTML tables coded by the old school methods. Using the new coding lets you make tables more accessible to your users, and it really isn't that much harder--just remember what a table really is. Chris Heilmann reminds us, and gives an introduction to CSS.
HTML, CSS and Tables: The Beauty of Data - Our CSS (Page 7 of 7 )
We start by defining a black border around the table and making sure that there is no spacing in between the cells. We also define the font size and family (this could be inherited from the body element, too).
We use the IDs of the headers to define the width of the columns (this could also be achieved via a colgroup and col definition in the HTML, but this is more flexible).
Next on our list is the caption. It needs a background, a slightly larger font and a border. As our caption sits on top of the table, we have to get rid of the bottom border. Texts in captions are centered by default, therefore we need to set the text-align to left.
This tutorial should only give you an insight of what is possible when you ditch old school solutions and embrace a cleaner structure. By using the right markup and creating CSS that uses inheritance and descendant selectors we can cut down the amount of markup drastically, make it easier to maintain, and accessible to boot.
If you want to know more about the taming of HTML tables, read the following:
DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.