Styling a Table with css: Setting styles for the first column

Now I want to create some rules that's going to style the first column of this table. I'd like to have a background color behind all of these first elements here, and I'd like to have the header, and all of these items also be aligned left. So earlier when we were targeting this first item here in the table header area, we used a pseudo class called nth-child up here. So nth-child one picks out the first element here in a series of siblings. Now we can also use something called first-child. So we'll use first-child for the td, but since we've already defined nth-child one here for the table header, let's add some additional properties onto this item.

So for the table header element, I'm gonna come in here and split this open. We're gonna keep width of 20%. Next we're gonna come in here and set text align. We'll set this to left, and we can see here in the preview that that is now aligning to the left. Back in the CSS we'll hit a space and we're gonna set a padding-left property of 20 pixels. And that will keep the planet element here aligning with the content inside of the footer. And now to get the rest of these items to be targeted, we're gonna target the td element inside of the body element.

So in our CSS we're basically gonna add another rule to this item here: tbody space td. So I'm gonna copy that. On the next line I'll paste this down here. And now the pseudo class we're gonna use here is first child. So colon first dash child, then a space, put another brackets.Again this does the same thing as nth-child one, like we did up here. Split this open. First thing we'll do is come in here and set the text align property to left.

Then we'll come in here and set padding-left to 20 pixels, matching what we did with the heading. So now we can see that all of these items line up from the heading through the body all the way down to the footer. The next property's gonna be the font weight. I want the first item in each row to be bold. So set the font weight to 700. And then finally I want to add a background color. I want to add a slightly transparent gold color to the entire first column.

So I'll come in here and add a property of background color, use the rgba color space. For red, we're gonna set this to 231 then a comma,147 for green, then a comma, zero for blue, another comma, and then .35 for the alpha. I want this to be 65% transparent. So once you have these rules in place, save your CSS, preview this in a browser. You'll see now that we've added some emphasis to the first column by using that background color, a bolder font, and resetting the alignment of the text.

And this helps us to more quickly differentiate some of the content inside of the table. And now with this in place, next we'll take a look at a few other options for differentiating the rows by using the nth-child pseudo class on the tr elements.