Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
>> We learned in earlier movies that tables should be reserved for tabular data and that CSS should be used to control all the visual formatting. This applies to our form as well. When we talked about avoiding tables for layout, we discussed how it's acceptable to use the table if it linearizes well and you don't have other options, so it's not imperative that you switch the form over to CSS layout. However, if you do keep a form inside a table for layout, do not add any of the table accessibility features we talked about in the previous chapter, such as TH header cells to your layout table.
However, if you do keep a form inside a table for layout, do not add any of the table accessibility features we talked about in the previous chapter, such as TH header cells to your layout table. These should only be used by data tables. Screen readers like JAWS look for these features to try to determine if a table is being used for layout or for data and they change what they read out to the user accordingly, so always keep layout tables marked up with plain TD table cell elements and no other special HTML markup. Laying out your form with CSS is still the more accessible option.
Remember that CSS layouts can adjust more easily to different devices and user settings, while tables remain stuck in rigid grids. Someone using a very narrow screen or only viewing a small area of the screen at a time with a screen magnifier may have a harder time filling out a table based form. To layout our form with CSS, we'll first group each labeled field pair. We'll use a list to do this as this form really is a list of questions. If you're following along with the exercise files, open departments.html in the 08_04 folder of the chapter eight exercise files.
We're going to add an ordered list, one to each field set. We're going to have to start this out in code view because Dreamweaver won't let us use the ordered list button on the properties inspector inside a field set, but while still in design view, click inside the first set so that we'll go to the correct spot in the code when we switch over. Now click on the code button in the document tool bar. Your cursor should be after the first closing table tag. Highlight over the entire paragraph element below the closing table tag then type an opening OL tag, hit enter to go to a new line, then type in an opening LI tag, and then close the OL tag.
Now click on the design button of the document tool bar. You'll see the number one and our bullet flower image. Now we can start pulling the labels and form fields out of the table into our new list. Click on the name label. To make sure that we move the entire label element, not just its text, click on the label tag in the tag selector then move your mouse back over the highlighted name text and click and drag it down beside the one and the bullet flower image then click on the input field that went with the name label. Click and drag this down beside the name label.
Place your cursor after this input field and hit enter to start this next list item. Click inside the email label then click on the label tag in the tag selector. Place your mouse back over the highlighted email text and click and drag it down into the second list item them click on its field and drag it down beside the email label. We'll continue doing this for the rest of the table. Now all of the fields are in the list. Click anywhere inside the table then select the table tag showing in the tag selector then hit delete on your keyboard.
We can repeat this process for each field set so that each labeled field pair in an ordered list. This gives the form a more semantic HTML structure. Although it doesn't look that great right now, it's still quite clear what label goes with which field. Fortunately we can use CSS to improve its appearance for sighted users.
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.