/CSS/ Style an HTML data table

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

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

0 Responses to “/CSS/ Style an HTML data table”

  1. Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s


%d bloggers like this: