/CSS/ Style an HTML data table

03/11/2010 | Filed under Develop > CSS

London-based web designer Inayaili de León explains how to create an HTML data table using clean and semantic markup

<h1>SEO+4SEO+Project video</h1>

Styling CSS tables is one of those menial tasks that no web designer seems to particularly enjoy – after all, who wants to have to deal with loads of grey, amorphous information for a few hours?

Thankfully, the days when we were using tables to lay out entire websites are long gone. Still, they are the right choice for styling certain types of data, so here we’re going to try to make the act of styling a table a bit more exciting. With some advanced and uncommon CSS selectors, we’ll style an HTML table to make it look less boxy.

Starting with a carefully laid out markup, we’ll also ensure that everyone can access the data within our table, even if they’re using older browsers that can’t render the finer details.

Finally, we’ll explore the power of often underused CSS selectors to avoid adding unnecessary classes or ids to our markup, keeping it as clean and simple as possible. And with a little help from some CSS3 properties – such as text-shadow, border-radius and border-image – we’ll keep the number of images used to style the table to an absolute minimum.

About the author:

Name: Inayaili de León
Site: yaili.com
Areas of expertise: CSS and user interface design
Clients: Telmap, iSites
How do you like your coffee? Skinny caramel macchiato, 1 shot

Click here to download the support files
Click here to download tutorial PDF


 

Comments

Richard, Leeds / 03/11/2010 / 23:39 / http://www.webdesignleedsyorkshire.co.uk

If only IE supported border-radius, it would save so much time having to use images!

Add a comment

Your name:


Your email: (Not displayed)


Your website: (optional)


Enter your comment here:

.net magLatest issue Buy it

Issue 208

Discover the finest fonts for the web, and sex up your images with CSS3 Find out more ...

» Fantastic subscription offers
» Buy issue 208
» Get a corporate subs
» Join us on Facebook

 
Signup for our newsletter

Enter your email address and start receiving our new-look weekly email newsletter!