Thứ Bảy, 2 tháng 4, 2016

Styling a Table with css: TH and TD tags


Now we're going to target the table-header elements, and the table-data elements. Now in the browser, you'll notice the top row is showing the type in bold, and is centered. If we take a look at the HTML, we'll see here that 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 browsers will 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 first is 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 target all of the th elements, and td elements.
Then a space, we'll put in our brackets, and I simply want to come in here and set text-align to centered. Now over here in the Preview, you'll see that now all of the columns are centered. Now back in the CSS file, I want to create a rule that'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 going to 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 match pretty close to the font-size. This way, we can control the spacing when 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 here and 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 spacing in 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 text in those table-header elements, and align the type to the bottom. If I were to come in here and decrease the width of the browser to the point where the distance from the sun label needs to stack vertically, the alignment of all of the type will be aligned to the bottom. This will keep a consistent spacing between the header elements, and the table data underneath that they represent. Now with the header styled, next we're going to control the width of each column using the nth-child feature of CSS.

Không có nhận xét nào:

Đăng nhận xét