Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The thead and tbody tags allow you to structure your tables into logical areas. Much like the div tag does for your HTML content. As a general rule, column headers will go into the thead element while the rest of the table resides in the tbody tag. There is also a tfoot element used to create table footers. The tfoot and thead tags are optional, but if you use one, you must include the tbody tag. So we have our bigsur_trails.htm file open and as you can see from our table we've gone back to having that sort of unstyled mess that we have here, but we've got all that additional structure that we added a little while ago that's going to make our table more accessible.
It's also going to give us more styling hooks. Now speaking of that, the thead and the tbody tag can really help us out with not only the styling, but also by making sure that our table data is organized correctly as well. So the best way to do this is we are going to go right back into Code View. So once again, I am going to select part of my table, switch over to Split Screen View, and that jumps right down there to my table. I can also collapse the panels down to get myself a little bit more room there, if you're finding your screen real estate starting to shrink up a bit.
Okay so here is what we need to do. The thead is going to identify the head part of the table or the heading if you will. In this table that happens to be the top row. So what I want you want to do is find the table row that's just below the column group. For me it's right here on line 56. I'm going to go ahead and highlight the entire table row starting with the opening table row tag and ending with the closing table row tag. Next I am going to go over to my Coding toolbar, you can find your Code toolbar right over here on the left-hand side.
Now depending upon your screen resolution you might see more or you might see less of the Coding toolbar. If you don't see this icon, this looks like a little tag with the pencil on it, you can get it by grabbing this little menu to show more. For me all I need is that tag. That is the Edit Tag icon, but if you already have code selected, it allows you to wrap that code in a specific tag. So I am going to go ahead and click that icon and I am going to tell Dreamweaver that I want to wrap that table row in a thead tag.
Once again, code hinting will help you out, but you just have to hit Return twice. It'll go ahead and make it edit for you. So now right after the colgroup tag, we should see an opening thead tag and then after the first closing table row tag, we should see a closing thead tag. Awesome. Now remember if you have a thead you have to have a tbody as well. So starting at line 66 for me right here, I am going to start with the next table row. I am going to scroll all the way down and highlight the remainder of my table.
Now I don't want the closing table tag. I only want to highlight table rows individually, so that's something you are going to want to double-check. That you've got the opening table row tag just underneath the th tag and then you have the closing table row tag just before the closing table tag. Once again, I am going to use the Edit Tag icon to wrap this and this time in a tbody tag. So no space there, just tbody. I'll hit Return and Dreamweaver will go ahead and wrap that for me. So now I have a thead and I also have a tbody tag surrounding and identifying different areas in my table.
Now other than helping us with code hinting, Dreamweaver doesn't really offer any automatic ways to thead and tbody elements to your table structure. You're going to have to do those by hand. While they obviously add a little bit more time to the process of building tables, the gains from the additional structure is well worth it. This is especially true for longer tables where the body of the table can be broken up by using multiple tbody elements. This can assist in the printing and scrolling of longer table data.
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.