[MUSIC] Hi and welcome to the lesson. In our last lesson we looked at taking many of the CSS techniques we've applied to our previous work and brought them together into one example. In this lesson I'd like to take a few more steps with the table, to examine some of the details we can get out of an HTML table using CSS. So here we have starting on line 46 a table, the same one we've seen in previous examples. And notice that its structure, as we've discussed before, starts with the table tag and then with every table there are rows. TR stands for table row and within the rows there are table data cells. And in our table each row has three cells and then another row and another row and so forth. So, one of the things we can do is style the table data elements, table row elements separately from the table itself. So here, as we saw once before, we have selected for the table tag here, we have a border of one pixel. It's going to be solid and red, and we want the table to occupy 90% of the page. The table data here, starting on line 28, it's going to be a little different. We're going to align the text in the cells to the left and we're going to supply padding. Now this is the first time, on line 31, we've seen padding. Padding means we want there to be a little space around our text, top, bottom, and sides. So the eight pixels here is a matter of choice, you can choose the padding you want or no padding at all. And then finally, we're seeing something new here with the table row. Now, on line 35 and like 39, we see TR, table row, :nth-child(even). Now the nth-child refers to each row, so going back to our table for a moment, consider that the table's the parent, and within the table, each of the rows are children. This is just an idea that's applied to HTML and CSS. So, if each row is a child, this on line 35 refers to the even rows, and this on line 39 refers to the odd rows. So, the effect here will be the background color on even rows will be light grey and the background color on the odd rows will be white. So let's give this a try. We'll go up, and we'll make sure that we're referring to the CSS table 2. We are here and we'll open table 2. And we can see here, scrolling down a bit, that we have an interesting effect on our table. Notice that because of the padding, there's a bit more room around our text, and we have the alternating colors. Sort of like a green bar, or in this case, gray bar effect. So, we can get a lot out of our tables with CSS. This one looks quite a bit different than our previous incarnations of exactly the same data. So let's go just a little further and look at placing some other things besides text in the table. You can use tables to contain almost anything an HTML page can contain. So let's look at an example of that. We'll close this page and we'll go back, and we'll look at an alternative, table 3. And down at the bottom in table 3, notice on line 45, I placed some different contents on line 41, the first table data has day 5 and Resting and then 500 minutes as its data. But on line 45, we have Link and Image and then we have an image tag which you've seen, and we have a link, an anchor tag. And, Let's go have a look at this table 3 file. And here we can see that same effect we had before but now we have our Google image and our anchor tag here and this is clickable it will go to Google. Now, keep in mind that this image and this image, both Google, are really the same image. This one is appearing at it's natural size and this one is appearing at only 40 pixels tall, so it's scaled down. So in our page, in our code, this is our only image right here, google source open. But down here below where we have the same image and the same source, notice here we aren't using an ID, there's no id=google. While here there's id=google and in our CSS, we're styling this image to make it 40 pixels tall with the id of google. And I'll show you that briefly, it was from a previous lesson. So down here, at 49 we're selecting for id=Google, and we have float left and 40 pixels at height. But in our version of the same image, the same file we are using the source, the source appearing as it would naturally. So we're getting this effect, the large Google image and the small Google image are ultimately we really have just one image in the page. So this concludes our initial survey of CSS, and we'll be moving on to HTML forms in our next lesson.