Now we're going to target the table-headerelements, and the table-data elements.Now in the browser, you'll notice the top rowis showing the type in bold, and is centered.If we take a look at the HTML, we'll see herethat this is inside of a table-header element,and we have these th elements here,which stand for table-header, where we see Planet Type,distance from the sun and moons.Having these inside a th, in most browserswill make these bold, and center these elements,as opposed to the content down here,where we see Mercury, for example,which is inside of td elements.
I'll come back up here, turn my preview back on.Now over in my CSS file, what we're going to do firstis target all of the th's and td elements,just to make some of the styling more consistent.Let's come up here and copy the table#planets.I'll paste that on the next line down here, hit a space,type th then a comma, space.We're going to paste this again, and then type td.This way, in one CSS rule, we can targetall of the th elements, and td elements.
Then a space, we'll put in our brackets,and I simply want to come in hereand set text-align to centered.Now over here in the Preview, you'll seethat now all of the columns are centered.Now back in the CSS file, I want to create a rulethat's going to target specifically the table-header area.Let's paste in table#planets space,thead, put in our brackets.Let's split this open since were goingto put a couple properties in here.We're going to start with font-size,we're going to set this to .8mm,next we'll set a line-height,we're going to set this to 12 pixels.
I want to have the line-height matchpretty close to the font-size.This way, we can control the spacingwhen we target the th elements,inside of the thead element.Still inside of the thead element,next line, let's add a background color.We're going to set this to hexadecimal value,so #, we'll type E7 for red, 93 for green, 00 for blue,and then we'll set one more property.That's going to be text-transform,and we're going to set this to uppercase.
Now to control some of this spacing in the header,we're going to target the th elements,inside of the thead element,Let's add another rule after that one,let's paste in our table#planets,then hit a space, target thead,then a space, then th,put in our beginning and end brackets.I'll spit these open, we're going to come in hereand set the color of the type, so color: space.We'll use rgba.I want to use a semi-transparent black,so rgba, put in your parentheses,then a semi-colon.
Inside of the parenteses black is going to be specified,with 0 for red, 0 for green, 0 for blue,then another comma, and then we'll set the alpaha to .7,which will give us 30 percent transparent black.Now to give ouselves a little more spacingin that heading area, let's add another property.We'll add padding, we'll set this to eight pixels,which will give us eight pixels on all four sides,and then we'll add one more property.We're going to set vertical-align to bottom.
What this will do is take all of the textin those table-header elements,and align the type to the bottom.If I were to come in here and decreasethe width of the browser to the pointwhere the distance from the sun labelneeds to stack vertically, the alignmentof all of the type will be aligned to the bottom.This will keep a consistent spacingbetween the header elements,and the table data underneaththat they represent.Now with the header styled,next we're going to control the widthof each column using the nth-child feature of CSS.