- [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.