Styling a Table with css: Styling the table body

Now we're gonna target the body area of the table, which is gonna start up here with Mercury and go all the way down to the moons of Neptune, so all of these elements inside of here. So, back in our CSS, let's come in here and copy the table#planets. Let's paste that down here, then hit a space. Then, we'll type tbody. Put in our brackets. First thing we'll do is lower the font size just a little bit. So, we'll type font-size .9em's, so that'll be 10% smaller than the base font.

Then, a space. Then, line-height, we're gonna set this down to 15 pixels. And now, the next thing I wanna do is add a rule in-between all of the individual rows. So, what we'll do is target the table row element inside of the table body. So, on the next line, let's paste in our table#planets, tbody, then a space. Then, we'll target the table row, so tr. Put in our brackets. The property we're gonna set here is going to be border-top, so border-top, colon space.

We use short-hand style here, which starts with the width, so that's one pixel, then a space. The style's gonna be solid, then a space. And for the color, we'll use the the rgba color space, so rgba, put in your parentheses, semicolon. Inside of here, I wanna create a semi-transparent tan color. So, for the red property, we're gonna set this to 248, then a comma, 220 for green, comma, 174 for blue, comma, and then, .8 for the alpha.

So that's 20% transparent. And now, to space out the rows, we're gonna target the table data element inside of the table body. So, next line, paste in table#planets, table body, then a space. Then, we'll target the td element, put in our brackets. And then, we'll come in here and set a padding property of 12 pixels, which will put 12 pixels of padding on all four sides of each td element. So, once you have these rules in place, save your file, go back to the browser, hit reload.

And so, now with this spacing being added to the individual rows and the body element, we can now see the table's much taller. And this allows us to see more of that background image that we added earlier in the course. So, next, we can focus on the footer area of the table,creating a boundary between the last item, here, which is Neptune, and the footer content, and then, making the footer content much less prominent.