Tables have multiple attributes that allow you to modify certain visual aspects of the table itself. Although most of these attributes have been deprecated--meaning removed in HTML5--it's important that you know about them, what their functionality is, and when it's appropriate to use them. And to sort of demonstrate those attributes we're going to be working with our sample table here. I'm back in tables.htm, this time from the 05_03 folder. For the most part, our table is exactly the same, but I'm going to look it in a browser real quick here to show you that we have a new row down here at the bottom.
It says, "Learn more about tables from the HTML5 specification," and then the other two table cells there are empty. The first thing I want to do is go back up to our opening table tag, because this is where, if you're going to use attributes on your table, you'll put the bulk of them, is up there right on the opening table tag. Now the one we have up there right now is the border attribute, and it's still available to you in HTML5. They've modified it a little bit because they basically said if you're going to use it at all, then you're only going to use values like the value 1 or an empty literal string, which I don't know what that does for you. But they've taken away the ability to do either 0 or then 1 and then the any higher number, which would represent the width of the border.
And that's the way it was in HTML 4 and below. Now the thing that you need to understand about all the attributes that I'm about to tell you, in terms of, like, oh this has been removed from HTML5, here's the thing: browsers are going to support the HTML 4 syntax for the foreseeable future. If you're going to use these attributes, the browser will still honor them, just to let you know. The first thing I'm going to do is add two more attributes to our opening table tag. The first one is going to be cellspacing and I'm going to set that value to 0, and then the second one is going to be cellpadding and I'm going to set that value to 0 as well.
Now these are HTML 4 attributes that are not available in HTML5 any more, but as I mentioned, browsers still support them. Okay, so what are these and what do they do? cellspacing is the space between the table cells. Right now it's set to 0 and that means that the table cells are going to butt right up against each other, only separated by whatever border you have on them. If I up this value--let's say I take it to a ridiculously high number like 20, so we can really see this-- if I save this, go back into my page, and refresh it, you can see these table cells are starting to push away from each other by about 20 pixels.
Even though that yes, hey, this doesn't exist in HTML5, you'll notice that modern current browsers still support this property and they will support it into infinity. The reason cellspacing is so intriguing is you're suppose to handle all of this stuff through CSS, but support for the use of margins, which controls the amount of space between elements in CSS, doesn't or hasn't extended to table cells. So for the longest time if we wanted to control that at all, we had to control it through cell spacing. So for certain user agents cellspacing is still a very valuable way of spacing table cells if that's what you want to do.
Now cellpadding controls the amount of space within the table cell. So if I go to cellpadding and let's say I put that on 20 as well, if I save that and preview my table, now you can see the table cells are still butting right up against each other, but they have a lot more space on the inside of them. Now, I recommend controlling both of those properties through CSS. But here's the thing: in older browsers, if you did not explicitly set cellspacing and cellpadding to 0, what you ended up with was whatever the default for that particular user agent was, and in most browsers the value was, oddly enough, 1.
So if you didn't set it, you got a little bit of spacing between your table cells that you really didn't want. You can certainly, especially in terms of cell padding, overwrite that value through CSS, but what if you're not controlling it through CSS at all? You would end up with those defaults. I've been in the habit, for a long time, of putting cellspacing and cellpadding at 0, and there's nothing wrong with you doing that. Just because this is not the HTML5 specification doesn't mean that you shouldn't do that because again, it's still supported in all of the browsers.
If you want to do that, go right ahead; if not, realize that in older browsers you might end up with some default values that you didn't really want. One value or one attribute that I really don't recommend you use anymore is width, and we could use width to set an explicit width on the table. We can use pixels. For example, I could say set the width of the table to 450 pixels and if I saved and previewed that, you can see my tables now restricted to 450 pixels. I can also use percentages, so I can come and say, okay, I want to set width to 80%.
So if I save that and test it, yes, indeed, now I get 80% of the page now taken up by the table. You might be asking yourself "well, if he doesn't recommend that you use it, why in the world am I even showing it you?" Because number one: it's still supported in every single browser out there and every single user agent. And number two: there will be some times when you don't have access to CSS. Let's say you're writing an HTML email, for example, and you're sending it to older clients that may not understand CSS. It's nice to know that these attributes exist and that you can take advantage of them.
So I don't recommend you use it, but there it is if you need it. The last attribute that I'm going to show you guys doesn't go up on the table tag itself; it goes down on the table cells. If I go back to the browser, let's focus on that bottom cell. "Learn more about tables from HTML5 specification" is a long string of text, and it is stretching the table cell that it's inside of, which is actually causing us some spacing issues above this, because our tags are all very small, and so because we have this really long line down here, it's causing all this empty space.
The table cells beside it are empty as well, which is causing some weird spacing below that. What would be really nice is if we could make that bottom cell just go ahead and span, or merge if you will, with those other two cells, so that the top part of our table could go back to being nice and orderly. Thankfully, we have attributes that allow us to do that. We have two attributes that we can use to merge cells, and they're rowspan and colspan. Now these two attributes might not work exactly the way you think they do. rowspan actually works vertically, because you're spanning rows, whereas colspan works horizontally because you're spanning the cells within the column.
What I'm going to do is right here where it says, "Learn more about tables from the href," inside that table data cell I'm going to go ahead and do colspan and I'm going to set colspan to 3, because I want this to span three table cells. Now, the real trick to using this is if it's going to span three cells, that means it's going to take up the space of three cells. I now have two table cells that really need to get out of the way, so I'm going to go ahead and get rid of those. And now this one table cell down here on the bottom, because it's being colspanned to three table cells, it's going to fill up the entire bottom row.
So if I save this, go back to my browser and refresh that, we can see that now we just have the one table cell in the bottom, we have merged the other two in with it, and now spacing above it goes back to being semi-normal. Just remember, some of the attributes we've used so far in this exercise are now removed from HTML5, but it's really important that you know about these guys because support is going to continue for those attributes for the foreseeable future and in instances where you can't rely on styles, they can be extremely helpful.
Get unlimited access to all courses for just $25/month.Become a member
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.
Your file was successfully uploaded.