 Hey everybody, it's Brian. If you're following along on our HTML tutorial, this is video number 12. Today, we're going to learn about tables. No, I'm not talking the type of table that you put your magazines and coffee cup on or the one that your mother keeps yelling at you to take your feet off of. Tables are a grid positioning system, basically. To sound any more confusing, I'm just going to start typing and hopefully you'll be able to follow along. A table allows you to find a space on the page and in that space you can define a row. Now, you notice how every tag has a start and a stop tag when on and off. So we have our start table, our end table, start row and row. Now, inside this, we have to create individual cells or table definitions. Whoops. And for the sake of education here, I'm going to make a couple of these number them differently so you can see what's actually going on. Now, we've got a table, one row, three columns. These TDs are columns, TRs are rows. Let's save our work and see what happens here. Refresh. Now, it looks like we just typed one, two, three. Let's go back in here and add an attribute called border. And set the border size to one. Save your work. Refresh. Ah, now you see these individual cells. Now, what good are these cells? Well, I'll explain this. You can position things anywhere you want on the page using tables. For example, let's say you want a big space to type in and then a couple of little columns off to the side. We're going to make that happen. To do that, you grab your first cell, type in the attribute of width and give it a big number like 500. Save your work. Refresh. Now you can see your first column takes 500 pixels and your second ones are automatically sized, but that's not all. Just for the sake of speed, we're going to copy and we're going to do some creative pasting here. Save our work. You can have more than one row. You can have as many rows and as many columns as you basically want. Eventually your computer will run out of memory and die a horrible smoking death, but for your purposes, you can have as many as you want. Now with these cells, you can control individual attributes. For example, let's say we want this first one, say the background color of red and let's say this one, we want a background color of blue. Now you can see control individual cells and attributes. The table itself also has attributes that you can use. For example, the border, you can also set the width. We'll say a hundred percent, set the height. Another popular one would be cell padding. We'll just say six. Save our work just so you can see what this looks like. So you can see we have our hundred percent width, hundred percent height, cell padding. And let's see, padding is actually the padding around. Let's do self spacing. So this is a little more obvious here. We'll do a 20 pixel cell spacing. That's complete overkill, but let's just see what it looks like. Now you can see the spacing between the cells is 20 pixels. So you can, you know, move things around and space them out. And that is probably the ugliest table I've ever built. Let's fix this up a little bit. Usually I put cell spacing to zero puts or sorry, self padding to zero, put spacing to a nice number like three and save our work flip over. That looks a little better. Now this is just the introduction to tables. I'm going to keep this video a little short because I realized you've just absorbed a lot of information. Let's flip back to the code here. Just remember that you start off with a table, you end with a table, you have to start with a row, end with a row. And inside those rows, you can have columns. And inside your columns, you have your actual information. For example, let's just say Chuck.jpg. If you remember from our previous tutorials, we have a pretty interesting image of Chuck Norris. Oops, don't include the beginning slash. And you can see in this cell, it's going to be a blue background with Chuck Norris inside of it. So when we refresh, there's Chuck Norris. And we unfortunately, my screen's a little small here. So now you notice how this top one got small all of a sudden. That's because you didn't define the height, you only defined the width. Let's go back into the code here. See width 500. Let's give it a height of 200 just so it's pretty self explanatory what's going on refresh. And you see now it's 200. And we've got Chuck Norris in there. Okay, so for review, because I know some of you newbies out there might be a little confused what we're doing here. This is a table. Table has rows, each row has cells. You can put pretty much anything you want in those individual cells. That's how sites get, you know, an image on one side text on the other or, you know, thumbnail galleries of images, things of that nature. Hope you found this video educational and entertaining and stay tuned for the next one where we're going to be discussing putting tables inside of tables.