Join James Williamson for an in-depth discussion in this video Understanding the basic table structure, part of HTML: Building Tables.
- In this chapter we're gonna focus on the basics of using tables in HTML. I'm gonna start by taking a look at the basic syntax of a table. Now to do that I'm gonna work with the tables.htm file, which I can find in 01_02 folder in our Exercise Files. So I've got the page opened up in my code editor. The first thing I want to do is switch over the same page opened up in a browser. The reason I'm gonna do that is because it allows me to go over the basic syntax of the table before we actually type it in.
So I'm gonna scroll down 'cause I've got a code example here already on the page. So you can see at the very top and the very bottom of this example, we have an opening and a closing table tag. That's the first thing you need. It lets the browser know that a table is about to follow and be contained within the opening and closing table tags. After that, you'll see a series of tr tags. That stands for table row. So tables can really be thought of as collections of rows, and then inside the rows are contained cells and then inside those rows are contained table cells represented by the td or table data tag.
So those are probably the three most basic table tags, table, tr, and td. With them you can create a functioning table. I'm gonna jump back into my code editor and I want to go ahead and build this. I'm gonna scroll down all the way towards the bottom of the page, and right down there I seen an HTML comment that says create table here, so I'm gonna do just that. I'll hit Enter to go down to the new line, and again, the first thing you want to do anytime you're building a table is just to start off with a table tag.
Once I do that, you'll notice I have both an opening and a closing table tag. Just to make things a little bit more readable, I'm gonna go ahead and place them on separate lines. Now it's inside the table that the table rows are going to go. So to establish a table row, I'm gonna open up a tr tag. Then inside the tr tag I'm gonna place the individual table cells. Now again I'm gonna hit return to go down to a new line just to make this a little more readable, but you don't have to do that. Now inside the first table row, I'm gonna go ahead and establish my first table cell.
That of course is done with the td, or again, table data tag. Inside this one I'm gonna type in Cell 1, Row 1 so an identifier as to who this data is. Now I'm a huge fan of being efficient, so what I'm gonna do is I'm gonna select that entire table data, both the opening and closing tag, and the text inside of it, and I'm gonna copy that. Then I'm just gonna paste that three times. What that does for me is it establishes three table cells in the first table row.
So now we have a table that has one row, three cells. Then for each one of these, I'm gonna change it to Cell 2 and Cell 3, just so I can keep it representative. Now again one of the basic things about a table is that the structure tends to repeat itself, so a lot of times you can save a lot of time and effort by copying and pasting regions rather than typing them in all over again. Instead of creating a brand new table row, I can simply copy the existing one, and then paste it below it. Then inside the cells I could go ahead and change the data to reflect where it is.
In this case, all of those are gonna be Row number 2. Then I'll just do the same thing again and change that to Row 3. Now this is a pretty real world example. I've built a lot of tables this way by going ahead and establishing all the rows and all the table cells and then pasting or typing in the content that I need inside those cells. A little bit later on we'll take a look at what type of content that you can place inside these individual cells. I'm gonna save that, go back out to my browser, and refresh the page.
Now when I do that, if I scroll down to the bottom, I can see here's my initial table. So with just those three HTML elements, the table, tr, and td tags, you can create a basic table. Now I know our table doesn't look that great right now, and the structure isn't visible, and that's because we haven't set any attributes or styled it which are things we're gonna be doing in the future. But we've certainly established the basic structure of our table and that's a great starting point.
- Adding content to tables
- Defining table headers
- Styling borders
- Alternating table row colors
- Grouping table content
- Defining columns and headers
- Making table data accessible