Home arrow HTML arrow Page 7 - HTML, CSS and Tables: The Beauty of Data
HTML

HTML, CSS and Tables: The Beauty of Data


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.

Author Info:
By: Chris Heilmann
Rating: 4 stars4 stars4 stars4 stars4 stars / 97
November 17, 2004
TABLE OF CONTENTS:
  1. · HTML, CSS and Tables: The Beauty of Data
  2. · What is a table?
  3. · W3C to the rescue
  4. · Summary needed
  5. · Styling tables: the days of the spacer GIF
  6. · Embracing CSS and separating "what is what" and "what it looks like"
  7. · Our CSS

print this article
SEARCH DEVARTICLES

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).

table {
 border:1px solid #000;
 border-collapse:collapse;
 font-family:arial,sans-serif;
 font-size:80%;
}

We repeat the border information for all of the inner elements and set their padding to 5 pixels.

td,th{
 border:1px solid #000;
 border-collapse:collapse;
 padding:5px;
}
 

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).

#fn,#dp,#ar{width:58px;}
#fr,#to{width:138px;}

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.

caption{
 background:#ccc;
 font-size:140%;
 border:1px solid #000;
 border-bottom:none;
 padding:5px;
 text-align:left;
}

The same applies to headers, and to distinguish between headers in the head and those in the body of the table, we use descendant selectors:

thead th{
 background:#9cf;
 text-align:left;
}
tbody th{
 text-align:left;
 background:#69c;
}

The same descendant selectors help us defining the differences for the data cells:

tfoot td{
 text-align:right;
 font-weight:bold;
 background:#369;
}
tbody td{
 background:#999; 
}
tbody tr.odd td{
 background:#ccc;
}

Voila, our table is styled. You might have realized that we still need a class if we want to have alternate row colors. In CSS3 we will have a chance to avoid that, via the n-th child selector, or alternatively, we can use a Javascript to add the alternate line classes for us.

More reading

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.

blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials