Styling a Table with css: Styling the table footer

Now, before add any additional styling, such as hover states and styles for the first column, let's take a few minutes and take care of styling the footer. So in the CSS file, let's come in here, let's copy our table#planets. Let's hit a few returns. Let's paste that after all of our table body rules. Then a space. Then we'll type tfoot. Then a space. Put in our brackets. For the main footer element, we're gonna set a font size to .8 ems, this will be 20% smaller than the base font.

So in the preview area, we can see that showing up here. Now, next we'll target the table row. We're gonna add a border top, so we can separate the footer from the body content. So in the next line, table#planets, hit a space. Tfoot, space, tr for table row. Put in our brackets.We're gonna set a property of border top. For the width, we're gonna set this to 2 pixels, then a space.

Style's gonna be solid, and then for the color, I wanna use the same color as the background of the header area. So in the CSS, I come up here and find the thead rule. Background color, let's come in here and copy the pound sign and the hex code. Let's copy that. Come down here, after solid, and a space, we'll paste this down here. And now in the preview, we can see that border showing up at the top of the footer element. And now we'll planet the td elements inside of the footer.

So I'll come in here and copy this rule. Paste on the next line, so after tfoot, hit a space. We're gonna target the td element. I'm gonna split this open. So first we'll come in here and set the color of the type, so color, colon, space, and then the color that I wanna use is gonna be a really light semi-transparent yellow. So we'll use the rgba color space. We're gonna set the red value to 255. 255 for green, and then for blue, we're gonna set this to 215.

Then a comma, then we're gonna set the alpha setting to 0.6, which will make the type 40% transparent. Next we're gonna set the text alignment to left. Next we'll set the line height. We're gonna set this to 15 pixels. And then lastly, we're gonna set a padding property of 15 pixels on the top and bottom, and 20 pixels on the right and left. So now that that spacing looks much better inside of the footer, the last two rules I wanna create are gonna target the anchor length that's inside of the footer.

So in the CSS, I'll scroll up here a little bit. Let's paste in our rule, up to tfoot, then a space, let's target the anchor tag. Put in our brackets.We're gonna set a color property here. And we're gonna set this to #f8 for red, dc for green, and ac for blue. Then the space. And then I'll set text decoration to none. Which will remove the underline. Then I'll duplicate this rule.

Come in here and change the a to a:hover. Then for color, let's come in here and change the color to white. So I'll # and three Fs. And we'll change the text decoration to underline. So now if you previewed this in a browser, when you hover over the link, it will turn white, and you'll see an underline. So now that we've finished dialing the footer, next we're gonna create a rule that's gonna target all of the elements in the first column, and style those just a little differently from the other columns.

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.

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.

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.

Uncode - Creative Multiuse WordPress Theme v1.2 - Free Download

This will, when you hover over it, tell you that padding controls the space around the page. Browser fill, that's what color the background of the browser window is, will draw in this area, and it tells you here that when you choose a different fill color for the page, in the browser fillyou will be able to see the effect most clearly. Uncode - Creative Multiuse WordPress Theme v1.2 UPDATE  on 22/02/2016)  Uncode - Creative Multiuse WordPress Theme is a pixel perfect creative multi purpose beautiful and stylish agencyWordPress Theme that features multiple parallax sections on the home page, and a sleek slide-out main navigation. based on Visual Composer designed with terrific attention to details and performance. If you choose the HiDPI method, you're going to be able to deliver the higher resolution option to those people with higher resolution screens, but as you'll see when I click there, you get a warning that this is going to significantly increase the page load time and the amount of data viewers must download in order to view it.

Uncode v1.2  - Creative Multiuse WordPress Theme UPDATE  (22/02/2016)
INCREASED OVERALL PERFORMANCE

NEW:
- Asynchronous adaptive image system
- Content block for the content of archive pages
- Content block for the header of archive pages
- Featured media for category and custom text for header
- Possibility of use content blocks inside the VC rows
- Single post/portfolio and the breadcrumb navigation logic
- Option for share module on single post/portfolio
- Adjustable active and hover color for menu items
- Adjustable menu font size
- Adjustable submenu font size
- Custom labels for CPT portfolio
- Option to have scroll up arrow in mobile
- Production mode for CSS and JS
- Single products width in the products default template
- Possibility to remove Google Map drag on mobile
- Possibility to remove double tap for the Posts and Media gallery module in mobile
- Error fallback with PHP version minor than 5.3
- Visual preview of the Content Blocks
- Icon picker for icons in menu items
- Single Media lightbox linkage option
- SVG animation delay
- Self-Hosted video, autoplay and loop
- WPML file (wpm-config.xml) for translation of parts of the Theme Options
- Language files (Italian, French, Hungarian)
- Real memory available on the Welcome page
- Custom Post Types support in the Posts module
- Added more media ratio values
- Added possiblity to color the Counter module
- Plugin Visual Composer Clipboard
- Plugin VC Particles Background

FIX:
- Google Maps responsivity
- Full compatibility WPML plugin (WPML official certificate)
- Visibility align options for overlay menu from admin
- Added missing string for translation
- Logo image responsivity
- Redirect page options
- Background image and color when using redirect page
- Uncode slider inside a column
- Sidebar sticky with background
- SVG picking up dimensions when uploaded in the media gallery
- Lightbox correct size when used for the Button and Icon module
- Fontsystem for PHP7
- Demo Import imporvments
- WooCommerce 2.5 compatibility and ajax add to cart
- Portfolio detail links open _blank
- Autosave dynamic CSS after theme update
- I recommend this when clicked disappear number
- Better read measurements for single blog reading time

UPDATE:
- Visual Composer 4.10
- Revolution Slider 5.1.6
- Icon library

We're not going to use padding this time around, and we're not going to use margins either, so set both of those to zero. Under here is probably what I consider to be one of the most important settings, and that's the resolution. Standard or HiDPI. Standard means that you're going to bring images in from other places like Illustrator, Photoshop, or wherever you'vecreated them, and if you're using standard resolution that means it's going to serve up a standard resolution 72 pixel per inch image to everybody that comes to the site.

Renew - Building, Renovation & Construction WordPress Theme

Now you could work on a desktop environmentbetween eight and 12 columns. Renew - Building, Renovation & Construction WordPress Theme is dedicated to different types of repair and maintenance of houses. The theme is built with responsive layout and HD retina-ready to adapt and function marvelously on different mobile devices.If you're doing something for a tablet, you're probably working between six to eight columns, and if you're doing something for a phone, probably two to four columns, something like that. The gutter here, we're going to leave that alone at 20 pixels.

 DEMO

Underneath there we're going to open the advanced settings of Renew - Building, Renovation & Construction WordPress Theme. The advanced settings have several things that we have the ability to control.First of all, the minimum width and the minimum height of the webpage. Both of these really don't make that big of a difference, but it is helpful to understand exactly what they are.

Renew - Building, Renovation & Construction WordPress Theme

Now you could work on a desktop environmentbetween eight and 12 columns. Renew - Building, Renovation & Construction WordPress Theme is dedicated to different types of repair and maintenance of houses. The theme is built with responsive layout and HD retina-ready to adapt and function marvelously on different mobile devices.If you're doing something for a tablet, you're probably working between six to eight columns, and if you're doing something for a phone, probably two to four columns, something like that. The gutter here, we're going to leave that alone at 20 pixels.

 DEMO

Underneath there we're going to open the advanced settings of Renew - Building, Renovation & Construction WordPress Theme. The advanced settings have several things that we have the ability to control.First of all, the minimum width and the minimum height of the webpage. Both of these really don't make that big of a difference, but it is helpful to understand exactly what they are.