{"id":233,"date":"2008-11-03T23:01:10","date_gmt":"2008-11-04T04:01:10","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=233"},"modified":"2008-11-03T23:01:10","modified_gmt":"2008-11-04T04:01:10","slug":"styling-zebra-striped-tables-with-css","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/styling-zebra-striped-tables-with-css\/","title":{"rendered":"Styling Zebra Striped Tables With CSS"},"content":{"rendered":"

\"\"<\/a><\/p>\n

I recently spent a bit of time on the OneHundredPushups website,<\/a> and the aspect of the site that most caught my eye (aside from ninja-girl on the front page) was the zebra-striped tables strewn throughout. (For those not in the know, zebra striping tables refers to alternating colored backgrounds on table rows, a la iTunes.) Studies have shown<\/a> that there is (or at least can be) a slight performance increase associated with zebra striped tables (or at least there isn\u2019t a decrease), and that most users prefer zebra striping to traditional lined tables.<\/p>\n

I thought the tables on OneHundredPushups were fairly well done (take a look for yourself here<\/a>), but a glance at the code showed me that the developer had put more work than was necessary into creating his stripes. Here, I\u2019ll show you an easy way to create a table like the one in the image above (or on the example page here<\/a>) that doesn\u2019t require you to mess with your XHTML — in fact, you could easily apply this to tables already on your website!<\/p>\n

Of course, before we can dive into the CSS, we\u2019ll need a table to style. Mine looks something like this:<\/p>\n

\n<table cellpadding="0" cellspacing="0">\n\t<tr>\n\t\t<th>State<\/th>\n\t\t<th>Date of Poll<\/th>\n\t\t<th>% Voting Dem.<\/th>\n\t\t<th>% Voting GOP<\/th>\n\t<\/tr>\n\t<tr>\n\t\t<td>AR<\/td>\n\t\t<td>10\/27<\/td>\n\t\t<td>44<\/td>\n\t\t<td>54<\/td>\n\t<\/tr>\n\t<tr>\n\t\t<td>AZ<\/td>\n\t\t<td>10\/23<\/td>\n\t\t<td>41<\/td>\n\t\t<td>49<\/td>\n\t<\/tr>\n\t... and so on ...\n<\/table>\n<\/pre>\n
As you can see, it\u2019s nothing out of the ordinary. I\u2019ve used the old-school cellspacing and cellpadding attributes just to ensure consistent treatment across browsers. And otherwise, I\u2019m using a <th> tag or four to distinguish my table headers from the rest of my code. Otherwise, we\u2019ve just got rows and cells galore. You\u2019ll notice there\u2019s not a single class or ID present here (although if I only wanted to style some<\/em> of the tables on my site, I\u2019d probably give the styled ones a specific class name).<\/p>\n
Next, let\u2019s take a look at the basic CSS styles I\u2019m using:<\/p>\n
table {\n\twidth: 100%;\n\tborder: 1px solid #cef;\n\ttext-align: left; }\nth {\n\tfont-weight: bold;\n\tbackground-color: #acf;\n\tborder-bottom: 1px solid #cef; }\ntd,th {\n\tpadding: 4px 5px; }<\/pre>\n
I\u2019ve set the table width to 100% to stop it from collapsing to its minimum size (the default behavior), then given it a pale blue border around the outside. I\u2019ve also set the text alignment throughout the table to \u201cleft\u201d — this is to prevent my table headers from centering themselves, which is the default. I prefer my headers to be aligned with my content, but your mileage may vary.<\/p>\n
When it comes to the headers, I\u2019ve done a little styling: I\u2019ve given them a background color (a bit darker than my border), bolded the text, and given the bottom of the headings a border what matches the border around my entire table.<\/p>\n
Finally, I\u2019m just adding a bit of padding to the interiors of the table cells, to give them a little breathing room. Personally, I think an appropriate use of white (or at least negative) space can be just as critical to legibility as zebra striping — perhaps someone out there more statistically inclined than me should look into that!<\/p>\n
Those styles give us our basic table layout, which looks something like this:<\/p>\n
\"\"<\/p>\n
So how do we get the alternating rows? For that, I\u2019m creating a new class in my CSS, specifically for the odd (that is, not-even) rows of the table:<\/p>\n
.odd {\n\tbackground-color: #def; }\n.odd td {\n\tborder-bottom: 1px solid #cef; }<\/pre>\n
This class, once applied to alternating rows of my table, would cause every other row to gain a pale blue background color and a slightly darker bottom border. Since this A List Apart<\/em> study by Jessica Enders<\/a> suggested that alternating colored rows and underlines were two of the most aesthetically appealing ways to present tabular data, I figured… why not use both?<\/p>\n
Now if I wanted, all I would need to do is go back through my HTML and apply this class to alternating rows in my tables, like the folks at OneHundredPushups have done. However, you\u2019ll notice that my code above doesn\u2019t have any CSS classes. That\u2019s because I prefer to work smarter whenever I have the chance. Instead of turning back to my HTML, I\u2019m going to look to JavaScript (specifically, jQuery<\/a>) to do my heavy lifting for me.<\/p>\n
To apply our class automatically, all the jQuery I need is this:<\/p>\n
$(document).ready(function(){\n\t$(\"tr:odd\").addClass(\"odd\");\n});<\/pre>\n
In layman\u2019s terms, this tiny snippet is saying, \u201conce the document is done loading, cycle through the page, find every \u2018odd\u2019 table row, and give it a class of \u2018odd.\u2019\u201d Then our CSS takes over and does the rest. Oh, and for the record, you could also write a second rule like this:<\/p>\n
$(\"tr:even\").addClass(\"even\");<\/pre>\n
Which would do the exact same thing as above, only apply it to the \u201ceven\u201d rows of the table. And just so you\u2019re not caught off guard by this script\u2019s behavior, it\u2019s good to know in advance that the :odd and :even pseudo-classes start counting at zero, not one. So the first row of your table is, according to jQuery, the \u201c0th\u201d row, and is therefore even.<\/p>\n
And there you have it! You can see the whole thing in action here.<\/a> And now, go forth and make the web a more beautiful (or at least stripy-er) place.<\/p>\n
Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"
In this article, I will show you an easy way to create an easily scanable and aesthetically pleasing table that doesn\u2019t require you to mess with your XHTML. In fact, you could easily apply this to tables already on your website! […]<\/p>\n
Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[168,184],"tags":[199,291,130,384],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/233"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=233"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/233\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=233"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=233"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=233"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}