Styling a Table with css: Setting styles for the first column
Now I want to create some rules that'sgoing to style the first column of this table.I'd like to have a background color behindall 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 firstitem 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 herein 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 onehere 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 thatthat is now aligning to the left.Back in the CSS we'll hit a spaceand we're gonna set a padding-left property of 20 pixels.And that will keep the planet element herealigning 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 elementinside of the body element.
So in our CSS we're basically gonna add another ruleto 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 gonnause 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 hereand 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 upfrom the heading through the bodyall 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 colorto 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 emphasisto 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 differentiatesome of the content inside of the table.And now with this in place,next we'll take a look at a few other optionsfor differentiating the rows by using the nth-childpseudo class on the tr elements.