Subtitles of the Movie

In this movie we take a look at how we can use CSS to create a table-like design using other HTML elements. Now, we will be able to accomplish this by leveraging the Display Property and just a few of the values that are available for that. So for this we'll be using the Display Property values of Table, Table Row and Table Cell. Now, as you can see here, I already have pulled up the Tutorials.html file that's in our 12 Folder and we just have some HTML elements. Now, these are actually H3 tags and what we're going to do is we're going to identify what we will turn into our different table structures. So first of all, each one of these H3s are going to end up being our table cells so we're going to have to format those appropriately. We also need to figure out how these will line up with each other so that we can define our rows and then we will also need to add in some other Div tags to control the overall table structure. Now, I did kind of go backwards there. The reason why I went backwards is because we have the H3s, we don't have any of the other stuff so what we're going to have to do is build those other structures. So the first thing we'll do is we'll actually put in our divs and our classes to identify what those structures are. So let's go ahead and jump into the HTML here and let's locate our table that we're going to use here. So as you can see, we have all of our H3s here and those are going to end up being our table cells and I need to create some space here after the H1 and before the close of that Tutorial section. Let me go ahead and put in my Div here and that Div will actually be my Tutorial table. Let me go ahead and put in my closing Div there. Then the next thing I need to set up is my row. So I'll go ahead and set up a Div tag here with a class equal to CSS Row and I want to have two of these H3s in a single row so I'm going to go ahead and kind of structure that appropriately here. Then I close that Div. Then I'll jump up here and copy the Div with the class of Class Row and I'll set up the next row here and then close that Div and then lastly set up my final Div and then close that Div. So now we have our table, we have identified our row and we already know what our table cells are going to be. So let's go ahead here and jump back into our CSS and set up our rules for these elements. So I'm going to go ahead and scroll all the way down here to the bottom and get to the Tutorial section that's been set up for us and that's right below our Review section. Now, as I scroll down here to that Tutorial section, I also note that we have some rules set up here that are utilizing our Tutorial Index. So if we jump back over to our Tutorials.html and scroll up to the top we see that we have the Tutorial Index here set up on our id attribute for the body. So let's go ahead and use that same setup here for our rules. So I'll do Tutorial Index and then the Tutorial Table, which is that class I already set up and I'm going to change the display here to be Table. I'm going to set the margin to Auto and set the width to be 90 percent and then my border spacing to be 2m. Then I'll go ahead and set up the row here and this is only going to need a Display Property of Table Row and a Margin Left of 200 pixels. So I'm just doing that so it indents in. And then lastly I need to set up my Tutorial Index targeting all H3s inside of an element with a class of CSS Row and here I just need to set the display to Table Cell, set up my height and in this case I'll go ahead and set that to 120 pixels and I'll set my padding on the top to 10 pixels and I'll set my margin all the way around to 10 pixels as well and then I'll set up my vertical align to be middle. So by using our Display Property and our other properties that we are aware of with our CSS, we've been able to create a CSS-based table. So I'll go ahead and save my CSS and I jump over to my HTML and I'll save that just to make sure and then whenever I come back into my browser and refresh, I now have a table set up inside of there. Now, of course, it's not a perfect table but we have been able to repurpose our HTML elements using our CSS properties to turn this into a CSS table-like design. So that concludes this movie on how to create a table-like structure with CSS and it also concludes our look at using CSS to control tables.