There comes a time in your Web Design career when you are going to have to use tables on a website. It probably won’t be the most enjoyable experience, but for those bits of data that can’t be laid out any other way – this is our only solution. Our saving grace is that we can pretty much style them how we want – they don’t have to look like boring tables of data – we can spruce them up with background colours, borders, shadows etc etc.
With this in mind I wanted to provide a few good ways of helping you style these tables, so they look attractive rather than dull and off-putting.
There’s a few ways of doing this and I wanted to share a few.
Manually adding classes
So the first thing you could do is go through your table and add a whole bunch of classes. Things like ‘odd/even’.
If you have a very large table – this could be a bit of a nightmare situation.
Dynamically adding classes
You could use another method – jQuery. Put a script in your document which will search through wherever you specify and add classes for you. We use some of the jQuery selectors, which is what we can use in addition to the addClass technique which I wrote a little bit about here.
Here’s a few to get you started:
$("tr:odd").addClass("odd-tr"); // this finds all 'tr tags' and uses the ':odd' filter - then applies the class 'odd-tr'
$("td:even").addClass("even-td"); // this find all 'td tags' and uses the ':even:' filter - then applies the class 'even-td'
$("td:nth-child(2)").addClass("mid-td"); // this would find the second td child and apply the class of 'mid-td'
The last example is a bit more advanced using the the nth selector. The number in the brackets is to do with the count – so my second element will be targeted and the .addClass function would be applied.
The official jQuery selectors web pages can be found here.
Other resources
A few other resources that might be of some help can be found here:
Table sorter – table sorter is a great little plugin which allows your tables to be sorted on the front end of your website by a chosen column.
Data Tables – data tables is similar to table sorter but has more options.
UI Table Filter – UI Table Filter is a plugin to help filter results within your data.
So hopefully one of the above solutions may help your task of styling tables. Any questions or comments please leave below.
