Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Tables are a very useful feature in HTML. Let's take a look at how they work. We will start by making a working copy of tables.html here in the chapter 14 folder in your exercise files, and I will rename that tables-working,HTML. I am going to open that in my text editor. We will just scroll through this for the benefit of folks who are typing along at home, and in a moment we will explain all of that. Let's open it in the browser here. And that's what the table looks like. Now you can see that it's not very recognizable in its native state.
One of the first things that I always like to do when I am designing a table is to turn on the borders so I can see where all the rows and columns are. So I am going to come in here and I'm going to create a style, and all it's going to do is say table and td and th. I will explain what all of that is in just a moment here. Border: 1px, solid black. Now when I reload this in the browser, you see we get borders up, so we can see where the dimensions of all the elements of the table are.
So now let's go ahead--and let me see how much of this I can see on the screen at the same time as I can see the code. That's always useful. So now let's take a look at the table and see how it works. We have a table element, which starts right there, and it ends all the way down there on line 56, and that contains the entire table. So if we are looking at the table over here in the browser, you see that outer line. That's a table, and it actually also includes this line above this that says Some Favorite Albums. That's called a caption, and that's the first element inside the table.
It needs to be before there are any rows of data, and these tr elements are the rows. The first thing you have in there is a caption, if you have a caption, and there's a CSS option I will show you later that can make it show up on the bottom instead of on the top. Then we have the rows, and you see here these tr elements and if I collapse that, you see that it's that much. It's from line 27 to line 31. That's one row. So that's everything here: Title, Artist, Comment. So there are a total five of them. There's that one and then there's this one, that one, that one, and that one, and those are all the rows of the table. And the row contains cells, and there are two types of cells.
They are the header cells, which are default formatted bold like these ones up there, and there are the data cells. So the header cells are th elements, and data cells are td elements. And these are all containers, and what they contain is the content of the cell. So th element contains the word Title, and you see it up there; this th element contains the word Artist, and you see it there; and this th element contains the word Comment, and you can see that there. And these are the td element.
So that's table data. That's the one over here it says Electric Ladyland, and there's table data, and there's table data. So it's all organized on the screen here in rows and columns. So the tr elements contain a row, and then each of these cells inside the row are organized horizontally into columns. So you have rows and columns and rows and columns and rows and columns. Now you'll notice that the formatting on the table is still pretty rough. One of the first things that I notice when I look at this is that each of these elements has its own border, rather than sharing borders with the elements that are next to them. And this is actually, in my view, this is unsightly, and I wouldn't have this be the default if I were the king of the world.
But I am not and that is the default. So let's see how to change it, because you are going to probably want to change this, one of the first things you do every time you format a table. So I come in here and I go on my CSS and I use a table selector, like that, and I say border-collapse and I change it to collapse. And when I save this and come over here into the browser and reload, you will notice that now all of those borders are collapsed, so each of these cells in the table shares a border with the cell next to it in each direction. And that, to me, looks more like what a table is supposed to look like.
So the default value for the border- collapse property is separate, like that. So if I save that and reload, you see we get the other behavior, and if I put it back to collapse and reload, you see we get the behavior that we are looking for here. Now while I am in the table selector, I am going to go ahead and also change the font. I like a sans-serif font for my tables. And tahoma is one in particular that I think is very attractive for this purpose. Now that table is starting to look a lot better. See, I got a bug.
I need to take out that closing bracket there, because my border-collapse wasn't working, and there. That's much better. Another thing I like to do to my tables is I like to have them have alternate colors for each row. So the way you do that-- so I am going to come down here into the table itself and for each of these rows, I am going to give it a class. And I am going to name them odd and even, so the odd rows will be one color and the even rows will be another color. Then I come up here in to the CSS and I say tr. Remember tr is our rows, odd background color.
#ddf;. And then I am going to do the same thing for even and call that one #def, and then I want to create one also for the header rows. You notice I don't need a class for this row because these header cells, they have a different element name. So I am going to say th background-color #cef. Now when I save this and reload it in the browser, you see we now have different colors. We have this slightly brighter blue for the header row, and then we have these alternating colors for the other rows.
Now I want to show you a few other things we can do in formatting, in particular margins and padding. If you're not familiar with the box model in CSS, you will want to take a look at my CSS for Developers course here on lynda.com. But margins happen outside of the borders, and padding happens inside of the borders. That's the long and short of it. So if I say td margin 3pt, you would expect this margin to be outside of the borders, but since the borders are collapsed, it actually doesn't work at all.
It doesn't change anything. If I change this border collapse to separate, now you'll see that that has some effect. I am going to go ahead and turn the border off so we can start seeing these effects a little bit better, and I will reload this. So if I make this border collapse again, you will see that those margins go away. So instead, I am going to give a padding. Padding happens inside of the borders, and when I reload, now you see we have a little bit more room for each of these table elements. Finally, you see the caption defaults to above the table.
If we want that caption to go below instead, we can style the caption with a property called caption-side, and its possibilities are top and bottom. It doesn't have left and right. So I am just going to say bottom here, and we will save that and reload and we see that the captioning now comes at the bottom. So we have a pretty decent-looking table at this point. In HTML5, all of the table formatting options have been removed from the HTML, so we are encouraged to use CSS to format our tables. As you can see, the CSS formatting options for the tables are very powerful and rich and flexible.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 98508 Viewers
61 Video lessons · 85800 Viewers
71 Video lessons · 69704 Viewers
56 Video lessons · 102010 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.