NewsPhotographyProduct DesignWeb DesignWeb Development

TABLE MARKUP

Before we launch into the markup for tables, let’s check in with our progress so far. We’ve covered a lot of territory: how to establish the basic structure of an HTML document, how to markup text to give it meaning and structure, how to make links, and how to embed simple images on the page.

HOW TO USE TABLES

HTML tables were created for instances when you need to add tabular material (data arranged into rows and columns) to a web page. Tables may be used to organize schedules, product comparisons, statistics, or other types of information, as shown in FIGURE 8-1. Note that “data” doesn’t necessarily mean numbers. A table cell may contain any sort of information, including numbers, text elements, and even images and multimedia objects.

TABLE HEADERS

As you can see in FIGURE 8-4, the text marked up as headers (th elements) is displayed differently from the other cells in the table (td elements). The difference, however, is not purely cosmetic. Table headers are important because they provide information or context about the cells in the row or column they precede. The th element may be handled differently than tds by alternative browsing devices.

Connecting Cells and Headers

We discussed headers briefly as a straightforward method for improving the accessibility of table content, but sometimes it may be difficult to know which header applies to which cells. For example, headers may be at the left or right edge of a row rather than at the top of a column. And although it may be easy for sighted users to understand a table structure at a glance, for users hearing the data as text, the overall organization is not as clear.

Conclusion

It is essential to consider how users without the benefit of visual browsers will be able to understand and navigate through your web forms. The label, field set, and legend form elements improve accessibility by making the semantic connections between the components of a form clear.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button