2 of 3

Write now Article Tools

Tables in web design are often misused and poorly coded. This article aims to explain when tables should and should not be used, and how they should be coded to make them more useful and accessible.

Tables have been used for many purposes on the web, including laying out the content on the page, lining up the fields and labels in forms, and aligning background images. All of these uses are inappropriate, tables should not be used for these purposes.

Why not?

Tables make the html code overly complicated and long. This makes it difficult for website maintainers to understand and alter the code, for example when they need to add more information to a page or change some of the content. They add extra unnecessary bulk to the file, causing the page to load more slowly. This is not an issue for most web users with today's high speed internet, but there are still internet users with slow connections who will not appreciate your bloated code. Also, they make the page difficult for non graphical browsers to understand. This includes screen readers, which read the contents of the page to visually impaired users. Pages built entirely of tables are extremely difficult to understand when a screen reader tries to read them.

When should tables be used?

Tables are not always a bad thing, sometimes we need to present data that belongs in a table, where we need the rows and columns to group related data so it can be more easily understood and compared. This kind of data simply doesn't make much sense if you try to describe it with paragraphs. If this is the type of content you need to display on your website, then you should use a table.

HTML provides us with several tags to allow us to make even complex tabular data easier to digest. Firstly, we start with the "table" tags to define the beginning and the end of our table. For each row in the table, we use the "tr" tags. Within each row we define the individual cells with the "td" tags. The number of "td" tags in each row should be equal to the number of columns in the table, although there are exceptions when it's appropriate for one table cell to span across more than one column (this is achieved with the colspan attribute).

Most people creating tables stop there, or worse, still manage to misuse table markup. They put heading tags inside the table cells that are used to label the content of rows or columns, they add empty cells or rows for visual effect and so on. This makes it difficult for screen readers and other non-human users

• 1
• 2
• next page >>

Add your voice

Know something about Web design tips: Best practices for designing tables?
We want to hear your view. Write now!