Tables are another useful way to display data to users so of course you can create them in HTML. In this video, we'll focus on creating a simple table, but there are also more advanced tags you can use to create really complex tables. So a basic table looks a lot like this. It's got rows, headers and cells for information. There are four main tags you'll need to use for a table. The table tag itself, which tells the browser that what follows is a table or in other words, defines a table, the table row tag represents a table row, the header tag defines the header for each row and the table data tag defines each cell for a table. Here's an example of how this works. Say I want to create a table for displaying information about anything, I don't know, I'll go with planets, simple enough. First, I'll open my table with the table tag. I can adjust the width of the table using the style attribute for it so I'll set this as equal to 100% which means it will take up the entire width of the page. Next, I'll create my first columns using the table row tag in combination with the table header tag. This might sound confusing. I mean, how can you create columns using the table row tag? Well, it's because of the table header tag, which adds the headers in, centers them and puts them in bold. Basically then, you're actually creating a row but with centered headers so it looks like a column. Let me show you what I mean. 

First, I'll open a table row, then add in my header using the th tags. I'll go with the planet names, type the distance from the sun, and then I'll close the table row tag. Next, I'll add in some data. For this, I'll need to open a new row, then add in some standard data using the table data tag. I'll start with earth, which is a rocky planet and it's about 148.31 million kilometers from the sun. Great, now I can close that row. I can repeat this as many times I want. So for now I'll add in Jupiter and Neptune. Now all I need to do is close the table off like this and it's done. So that's a basic table, but there are a few slightly more advanced elements we can use to improve it. First off, right now, the table doesn't have a caption. Captions are basically just titles that we use for images, lists, tables and this sort of thing. Just like other tags, I need to open the caption tag, then add the text I want to display, which will be the planets and then close the tag, simple. Another useful set of elements are the thead, tbody and tfooter tags. These give you the option to group different content in the table, thead for the header content, tbody for body content and tfooter for footer content. In the context of our example, this will look like this. 

So you probably noticed two things with that example. First, our table didn't really work that well as an example because it probably only really had header and body content with no real footer, but we added the tfooter tag in just to make sure that you knew about it. Okay, so the second thing you might've noticed is that nothing visually changed when I added in the new elements. This is because these are structural semantic tags. They group content but don't actually make any visible changes. You can use CSS later to change the style of these and because you've grouped them together, really makes it a lot easier to do so. And that's it for this video. Creating basic tables is actually really easy to do and it's a great way to present data to your users. With a little more effort, you can also actually add a lot more functionality to your tables and even give yourself the option to style them in interesting ways later down the line.