HTML and CSS Reference
In-Depth Information
Ideas for Going Further
You can find many examples of deliciously styled tables online. Beyond the basic examples
shown here, you can consider using the
background-image
property on the tables, individual
rows, or heads to achieve great effects. Veerle Pieters does this very well in her example at
http://veerle.duoh.com/index.php/blog/comments/a_css_styled_table/
, as well as her CSS-styled
calendar at
http://veerle.duoh.com/index.php/blog/comments/a_css_styled_calendar/
.
Nathan Smith also uses a calendar as a demonstration of some beautiful table design at
http://
sonspring.com/journal/scoping-things-out
.
Using your creativity and CSS's power, you should be able to make tables that not only
look brilliant but are accessible, readable, and usable to boot.
Summary
CSS allows you to present data tables in virtually limitless ways. Although the examples here
are relatively simple, they illustrate the kind of things you can do—and your creativity can take
it from here. A real key to creating tables that are useful, readable, and interesting to look at is
the (X)HTML markup you use to provide those additional styling “hooks.” By taking advantage
of some of the newer and more semantic elements, you can create tables that both look great
and work effectively for users visiting your site with assistive technology and other alternate
devices.
Now that you're familiar with styling tabular data, let's move on to laying out another
common web page component: forms.
