Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So far, we've looked at the three basic structural table tags, which are table, table row, and table cell. In this movie, I want to introduce another structural tag that can really enhance the meaning of tables, and that would be the table header tag. So I've got the tables.htm page opened from the 05_05 folder, and I've opened it up in a browser first. The reason for that is I want to take another quick look at the table here as it's rendering. It's pretty easy to tell that the top row of this table has special meaning. Essentially what you're seeing in those cells--the tag name, description--they're the title for the content that's underneath them.
We need to be able to identify that content as being, if you will, headers to the content that appears below them, and thankfully, we have the table header tag, which is a nice structural element that allows us to do that. So I'm going to go back into my code editor here, and I just want to find this opening table row right here that has Tag, Name, and Description inside of it. And the same way that td is table cell, if you will, th is table header. So to make those headers all you need to do is use the th tag instead of the td tag.
So I'm just going to go ahead and modify mine so that both of the opening and the closing tags for all of those are using the th tag. If I save this and then go back out to my browser and refresh the page, you can see that we have some stylistic differences going on here. It centers it, it bolds it, and it's really just the default rendering. If you wanted to make them look even more different than this, or change their alignment, or change their color, change their background, things like that, you can do that through the use of CSS styles.
What I want you to focus on is that now more information is being passed to the user agent about this table. It's saying that this row is special. These are headers, and they're going to basically refer to all the rest of the information in the table. Our sample table is nearly complete. There is one last thing that we need to discuss, however, and that's how to make this table data a little bit more accessible, and we're going to explore that in out next exercise.
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.
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.