HTML Tables

Learn how to format tables using HTML through this sixth video of a beginner's guide to HTML and CSS!

TRANSCRIPT:
So to make a table, you’ll have to start by making a table tag and making the closing table tag, and now all of our table data will go in between these two tags. You’re also going to have a table head and a table body. Much like we have our HTML head and body, our table is going to have a head and body as well. In the head, we’re going to put all of our table headers. As you can see here, I’m going to make a table of popular dog, cat, and rabbit names. So let’s make a header (th), and this is going to be – oh, actually, first we should make a table row. So tr for table row. Now we can make our three headers. One of them will be dog, then we have cat, and rabbit. See what I did here? We have these three headers going in one row, so it’s going to be dog cat rabbit all in the same row, and these are all enclosed with the thead tags. Now in the body, we’re going to have all of our data which we will put into a row. So I’m going to do three names for each animal. One of them, we’re going to put in td for table data, one of them will be Max and this is going to be in the dog column. Since we’re working with a row, we’ll go from left to right. So now we’re on the cat column. And I’ll use Tigger as a popular cat name, and our last one will be Thumper for a rabbit.
So I’m going to create a new row by making more tr tags, and then start by adding the second row of names. A popular dog name would be Lucky, another popular cat name is Chloe, and then let’s do Snowball for a rabbit. Okay, so now I’m going to start the third and final row for our table. Here, I’m going to do three more. Okay, so that’s all and now we have our three names for each animal. Let’s save this and run it, and see how it looks.
Here we have our headers, and these th elements went in the thead tag. And then for each row, we have the names. If you want to straighten this out a bit and add borders, it’s best to do that with CSS, which I’ll get to in another video.