Styling a Table with css: Setting the column widths with nth child

To control the width of the columns in a table, we need to set a width property on either the th or the td, and all of the associated th and td elements in a column will conform to that particular setting. So if we come over here and take a look at the html, inside of our table, inside of our heading area, we have our first cell element, which is th, and if we set a width property here, the next table cell element, which is this td down here for Mercury, will follow the width settings that we assigned to this particular element here.

So back in our CSS file, we can use something called nth-child, so that we can target a particular element in a group without having to add any additional content to our html page. Now the way that the nth-child works is in CSS, we target a group of elements or siblings. In this case, we're looking for the th elements that are inside of a table element with an ID of planets. Now the nth-child pseudo-class has a series of parentheses, and inside of the parentheses, we put a number.

So if we put a number one in here, we're going to target the first child of all of those siblings. And similarly, if we put a number three inside of the parentheses, we would target the third child. So we'll use this technique in our CSS file to target each of the four siblings and assign our width properties. So back in our CSS file, let's come up here and copy this rule, table#planets thead th. Let's copy that. Then we'll paste it down here on the next line.

Then we'll add our pseudo-class of nth-child, so :nth-child. Put in our parentheses. Now inside of the parentheses, we'll type in number one.We're gonna target the first element, and that's going to be this element here with the word planet inside. So that's the first th inside of the thead area. Back in the CSS. Add our beginning and ending brackets. Then inside, we'll set a width property. And just for demonstration purposes, I'm gonna put 50% in here.

So what that will do over here in the preview is allow the very first column of elements to take up 50% of the width of the entire table,leaving the three remaining columns to evenly divide the remaining space. And some will even take up a little bit more room if their content is larger than some of the other elements. So now let's come back to our CSS, and let's change 50% down to 20%. Then let's duplicate this entire line. Let's come in here and change the nth-child to a number two.

We're gonna set the second column to 30%. Let's duplicate this line again. Let's change nth-child(2) to nth-child(3). We're gonna set the width of the third column to 35%, since the label in this particular column is longer than the other ones. And then we'll duplicate this one more time, nth-child(4). And then we'll change the width of the fourth column to 15%. And you can see the results of all of these new widthsin the browser.

So without adding any additional code to our html file, we can use the nth-child feature of CSS to specifically target siblings and create our column widths. And now that we have our columns spaced, next we're gonna start working on the body section of the table.