Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Using tables to group and present data is the perfectly acceptable way to structure data on the web. That doesn't mean that we shouldn't do all that we can to make that data more accessible to the widest array of people and users. To that end we're going to take the table that we inserted into our page in the last movie and make it a little bit more accessible by modifying the code. So, I've graphic-design.htm open from the 09_03 directory and there are lot of things that we can do with the Properties Inspector, if I scroll down for example and select my table using the Tag Selector and grab the Property Selector, you can see we can give the table an ID, we can modify the numbers of rows and columns, we can set those width value, cell padding, cell spacing, border.
Now I do want to warn you about some of these options however. The width value for example should really be set through your CSS. Cell padding, cell spacing and the border attributes, those have been made obsolete in HTML 5, so it's again better to leave those off and go ahead and perform those functions through the use of styles. So, be careful about assigning these properties depending upon the version of HTML that you're using. So, although we do have a lot of things that we can set via the property inspector in terms of being able to visually do that, sometimes there is just no substitute or no alternative if you will of actually going into the code and making those changes yourself this is one of those instances.
So, with the table selected I'm going to switch right over to the code view and by having the table already selected it just goes ahead and jumps right into code view and jumps down to that table for me. Okay, now I'm kind of cheating a little bit here, because when we inserted the table on the page, you may remember that we went ahead and make sure that border cell spacing and cell padding were already turned off. Well, I kind of flipped them back on again. If you ever go into code view and you're seeing those elements within your table. What you want to do is just go ahead and get rid of those attributes. Now it is acceptable to have border if you don't want a border instead of 0, you could go ahead and leave that as an empty literal string, but if you're going to set that through the use of styling which we're going to do a little bit later on, there is really no good reason to have them in your table, so I'm going to go ahead and get rid of all those attributes and just leave sort of the opening table tag there.
Now, the next thing we want to do is something that we just simply didn't get an option for when we were inserting the tabular data and that's assigning a caption for a table. Not every table needs a caption, but if you want to make the table data a little bit more accessible to user agents or screen readers or things like that that a caption is a nice option to have for your table. As you're going to see when we start creating our styles the caption doesn't necessarily have to visible. The content can still be there be machine readable, but it doesn't have to be presented to the user visually.
So, I'm going to go down to the next line, and I'm just going to do a new caption tag and inside my caption, I'm going to type in First semester course load for Graphic Design degree and then I'll close my caption tag out. So, just a nice single sentence description of what is going to be going on within the table. Now the next thing I'm going to do is I'm going to create what's known as a column grouping, so to do that I use the colgroup tag, so I'm just going to do colgroup and this is a structural element that allows you to assign IDs to the different columns within a table.
Now our table is really simple, it only has two columns, but if you had a table for example, that had 10 columns or 15 columns, the colgroup allows you to assign IDs to that and essentially that's giving again descriptive information to any user agent that comes and reads this table, so it can tell for example that our far right-hand column is dealing with credit hours. So, what I'm going to do is, I'm going to go inside the colgroup and I'm going to identify each of the columns within our table. Our first column deals with the semester, so we'll have multiple tables or maybe this table might get extended out to have more than one semester in it, so I want people to know that the first column deals with the courses within that semester.
So, I'm just going ahead and do a col tag C-O-L and then I assign an ID to it and this ID is what's going to be used to identify the contents of this particular column. So in this case I'm just going to type in semester. Now remember IDs need to be one word, you don't want to use any punctuation or any type of spacing in those at all, I don't need to close the col tag and I can just leave that open, it doesn't need a closing tag, you can certainly give it one, but it's okay, it's not required in the specification. Now I'm going to do another col tag, and again we're going to ID here and then I'm going to do credits and then I close that.
So, essentially what I have is I have two of these column tags and the order in which these are found are the order in which the IDs are assigned to the columns themselves. So, you'll notice that the first one's ID is semester that's going to apply to the first column the second ID is credits that will apply to the second column, so if I had additional columns I would just continue to add those until I had all my columns identified. Now how do we identify which content belongs to which column? Well, for that we use the scope attribute of the table header tag. So, I'm going to go down to each of my table header tags and I'll start with first semester, I'm just going to do the scope attribute and the scope for this one is going to be col, C-O-L, so your options for scope or either col or row, row would be if you're having a table where the headers were on the left or right hand side and identifying the contents of the row.
In this case, we've columns, so that's going be scoped as a column. Same thing for this table header, I'm going to ahead and scope that one to column as well. So, it's recognizing that these table headers are representational of the content that comes beneath them with in the column. All right, I'm going to go ahead and save that and now as you can see when I go back to Design view our table doesn't look dramatically different aside from the caption that's now appearing above it, but the structure that we have just added is going to go a long way towards making sure that our data is accessible.
Now note that if we had used Dreamweaver's table insertion method that you saw a little earlier in the chapter, we could have added the th and caption properties as we were creating the table. Just realize that no matter which method you use to insert a table on the page to get the structure just the way you want it you are probably going to have to spend at least sometime modifying the code itself.
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.