Note: There will be free exercise files for most episodes, which will allow you to follow along with author Chris Converse, as you explore all the possibilities CSS has to offer.
Skill Level Intermediate
- [Instructor] Hi, this is Chris Converse, and in this episode, we'll style rows and columns of an HTML table without adding additional markup to the HTML file. We'll use the nth-child() Selector in CSS to style specific table row elements and visually group together table data elements to highlight columns. So if you'd like to follow along with me, download the exercise files and let's begin by opening index.html in a text editor. And once you have the HTML file open, you'll see that we have a table inside of here. The table is broken into two groups. There's the table head group here and the table body.
Inside we have our table rows and all of our td's. And if you'd like to see the layout we're starting from, you can open this index.html file up in a browser. So as I mentioned earlier, we're not going to be changing any of the HTML. So let's go back to the exercise files. Let's choose style.css and let's open this in our text editor. Once this is open let's scroll down to the bottom. And you'll see that I do have some rules in place already targeting the table. So let's first create a rule that will target one of the rows in the table body.
So we'll type table, space, tbody then a space, then tr for table row, then a colon, then we'll add the nth-child() Selector. So type nth dash ... child, put in our parenthesis, then our brackets, split this open. Now inside of the parenthesis for nth-child we're going to put a number. So I'll put a number two here. Then inside of this rule let's add some properties. So we're simply going to come in and change the background color.
So we'll choose background-color. We use the rgba color space, so rgba, put in another parenthesis, then inside the parenthesis we'll set red to 255, comma, 255 for green, 255 for blue which will give us white, and then we'll set .1 for the alpha. So this will give us a 10% white highlight on the second row. If we choose save, go back to the browser, we can now see that showing up here. So now let's go back to our CSS and let's change the number two in here for the word "odd".
So we'll type in "odd", hit save, and now what will happen in the browser is that every odd row will be highlighted. So this gives us a really quick way to make the table much more readable. And I'd prefer that the first row not be highlighted just to give a little more contrast from the title. So let's come back here to the CSS and change the word "odd" to "even". Now to highlight columns of data, we will use the nth-child() and we will need to use numbers because table rows encompass table data elements, but table data elements are independent from each other.
So back in our CSS, let's come down and let's target our table data elements. So we'll type table, space, tbody then a space, then td, colon, nth-child, put in our parenthesis, put in our brackets, split the brackets open, and then in the parenthesis for nth-child we'll put the number one. So we're going to target the first column. And what I want to do here is simply set the font to be white and set the font-weight to be bold.
So for the font color, we'll set the color property. Pound sign and three f's for white. Then on the next line we're going to set the font-weight. And we're going to set this to bold. Now if we hit save, go back to the browser, we can now see that the first table data element inside of each row is now showing with our properties. So back to our CSS, let's scroll down. Let's come in here and copy this entire rule. Let's paste this again.
And now we want to target the second column. So we'll change nth-child(1) to nth-child(2). And then inside here we're going to set a couple of properties. First we're going to start with the background-color. We're going to set this to rgba. And then for red we're going to set 238, for green we're going to set 25, for blue we're going to set 238, and then for the alpha setting we're going to set .3. And now in the browser we'll see that the second td element is now showing with that background color.
So now let's come back and make a few more changes to that highlighted column. Next we'll set a border-left property. We'll set this to one pixel, solid. Set the color to rgba and then 255 for red, green, and blue, which will make this white. And then .2 for the alpha. Then we'll duplicate this rule and then come back and change border-left to border-right. And then finally in the next line, let's come in here and set the text-align to center.
That way all of the values in column two will be centered instead of flush left. Now it is worth noting, if you wanted the highlighted color to go up into the table header area as well, you could come up here and remove the tbody. So if I take this out from the CSS and we look in the browser, we can now see that the table data element, which is still the second td in that particular row now picks up the background color as well. However, I prefer that the heading table data not be styled so I'll just undo that.
And now the final change I'd like to make is I'd like to center all of the dates in the third column. So I'll come up here and copy this rule, paste it on the next line, change the two to a three, put in our brackets, and then set a text-align property to center. And now with these rules in place, we were able to help readability, we were able to highlight specific data, and add visual appeal without changing any of the html code. Now if you'd like to explore more style options for a table we have another course here entitled "Styling a Table".
And if you'd like to make your table sortable using just a little bit of jQuery and CSS, check out "Creating a Sortable Table". And both courses are available here in the library. And so with that, I'll conclude this episode and as always, thanks for watching.