Layout Table References

General

• "Layout tables are used to visually format the images, text, and other information on the page. Each cell in a layout table is normally independent and can be viewed on its own. Examples include a navigation bar or a magazine page." - A-Prompt
• Minnesota Electronic and Information Technology Accessibility - "When tables are coded inaccurately or table codes are used for non-tabular material (newspaper-style columns), some screen-reader users may find it difficult or impossible to access the information. Visitors with low-vision, cognitive impairments, visual tracking impairments or users of some hand-held devices may have difficulty accessing materials presented in a tabular or multicolumn format. When tables are used to present information, be sure appropriate coding is used and that a de-columnized version or other means of acquiring the information is available. "
• Tables for layout, while not explicitly "good", can be made "not bad" pretty easily. CSS-P (the positioning aspects of CSS2) is still rather unreliable these days, while most assistive technology and non-graphical browsers have learned to cope with tables used for layout. This means that it's generally somewhat "safe" to use layout tables, vs. using CSS-P. - Kynn Bartlett

Summary

• Indicate layout tables with a human-readable summary attribute reading something like "Page Layout."
• Provide a summary for tables - Bobby
• WAI checkpoint (5.5)
• Provide summaries for tables. - W3c example

Structural markup

• If a table is used for layout, do not use any structural markup for the purpose of visual formatting - W3c example
• Only use <td> elements for layout. Do not use <th>, or any other elements such as <thead>, <tbody>, <caption>, etc. - Kynn Bartlett
• Do not use headers, scope, or axis on layout tables. - Kynn Bartlett
• Don't use a title element on your layout table, or on any cells of your layout table. This will cause unwanted tooltips. - Kynn Bartlett
• Use CSS and/or HTML align and valign attributes to make your page layouts align properly. This probably won't break anything.

Linearized

• Check if reading order makes sense.
• Do not use tables for layout unless the table makes sense when linearized. - W3c example
• Avoid using tables to format text documents in columns unless the table can be linearized - Bobby
• Tablin - an HTML Table linearizer from W3c
• If this is a layout table used for formatting text in columns, provide a linear text alternative - Bobby
• Reading Order and Tables - wave tutorial
• For the web developer who does not wish to place form elements immediately adjacent to their corresponding titles, the HTML 4.0 specification includes the <LABEL> tag that lets web developers mark specific elements as "labels" and then associate a form element with that label.
• Consider Reading Order when using Tables for Layouts- Leonard R. Kasday
• More Examples of Reading Order - Leonard R. Kasday
• Test your layout to make sure that it makes sense when read in linear order -- the order in which it appears in the source code, usually. (Change all <td> and <table> tags to <div> to test.) - Kynn Bartlett

Relative sizing

• Use relative rather than absolute units in markup language attribute values and style sheet property values - W3c example
• Liquid Tables - Rudy Limeback
• Liquid Web Design: Build it right and it will work no matter what the container - Nick Finck
• Make Liquid Pages - projectcool
• Ice, jello, and liquid - WhatIs.com

Staff Meeting Home Page | Intro Exercise | 508 Law | Improve Your Pages | References

© 1998-2024 Laura L. Carlson
Email: lcarlson@d.umn.edu
Department: Information Technology Systems and Services, University of Minnesota Duluth
Document Last Modified: 2006
Page URL: http:// www.d.umn.edu /~lcarlson/staffmeeting/tables_layout.html

The views and opinions expressed in this page are strictly those of the page author. The contents of this page have not been reviewed or approved by the University of Minnesota.