eBay MIND Patterns
  • Introduction
  • Messaging
    • Alert Dialog
    • Confirm Dialog
    • File Preview Card
    • Form Validation
    • Inline Notice
    • Input Meter
    • Input Validation
    • Page Notice
    • Star Rating (static)
    • Time
    • Toast Dialog
    • Tourtip
  • Input
    • Button
    • Checkbox
    • Chips Combobox
    • Combobox
    • Date Picker
    • File Input
    • Input Dialog
    • Listbox
    • Listbox Button
    • Menu
    • Menu Button
    • Phone Input
    • Radio
    • Select
    • Star Rating (interactive)
    • Switch
    • Toggle Button
    • Toggle Button Group
  • Navigation
    • Breadcrumbs
    • Fake Menu Button
    • Fake Tabs
    • Link
    • Pagination
    • Skip Navigation
    • Tile
  • Disclosure
    • Accordion
    • Carousel
    • Lightbox Dialog
    • Details
    • Flyout
    • Footnote
    • Infotip Button
    • Panel Dialog
    • Pulldown List
    • Segmented Buttons
    • Tabs
    • Tooltip
  • Structure
    • Description List
    • Form
    • Heading
    • Image
    • Item Tile
    • Layout Grid
    • Region
    • Table
    • Table Cell
  • Techniques
    • Active Descendant
    • Ambiguous Label
    • Background Icon
    • Keyboard Trap
    • Live Region
    • Offscreen Text
    • Roving Tabindex
    • Skip to Main Content
    • Alternative Text
  • Anti-Patterns
    • Disabling Pinch-to-Zoom
    • Hand Cursor on Buttons
    • JavaScript HREF
    • Layout Table
    • Mouse Hover on Static Elements
    • Open New Window
    • Setting Focus on Page Load
    • Tabindex-itis
    • Title Tooltip
  • Appendix
    • ARIA Essentials
    • Checklist
    • FAQ
    • Keyboard Interface
    • Known Issues
    • Legacy Patterns
      • Fullscreen Dialog
    • MIND Pattern Template
    • Pattern Naming Scheme
    • References
    • Utilities
Powered by GitBook
On this page
  • Legacy Code
  • The CSS Table Model
  1. Anti-Patterns

Layout Table

Tables are for tabular data only.

Do not use the HTML table tags (<table>, <tr>, <td>, etc.) for page or module layout.

For example, do not use table rows and columns to arrange the header, sidebar and main content areas of a page or module:

<!-- This is bad! Please do not copy! -->
<body>
    <table>
        <tr>
            <td colspan="2">
                <!-- page header/banner -->
                <img src="sitelogo.jpg" />
            </td>
        </tr>
        <tr>
            <td>
                <h2>Sidebar</h2>
                <!-- sidebar content -->
            </td>
            <td>
                <h1>Page Header</h1>
                <!-- main content -->
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <!-- page footer -->
            </td>
        </tr>
    </table>
</body>
<!-- Urgh, I felt dirty writing that. The things I do for you all. -->

For example, in the code example above, the screen reader would pre-announce all elements inside the sidebar as "row 2 column 1", and all elements in the main content with "row 2 column 2" etc.

CSS can, and should, be used to achieve row/column layouts in pages and modules and this layout is transparent to the screen reader user.

Legacy Code

If you have legacy code that you wish to make accessible, and are unable to rewrite your entire markup and CSS, a quick fix is to apply role=presentation to the table tag:

<table role="presentation">
    <!-- rows and columns go here as normal -->
</table>

With this role, visual layout will be maintained but all table, row and column semantics will be removed from the accessibility tree.

The CSS Table Model

Annoyed that you can't use tables for layout anymore, because you find that super useful and CSS floats are a pain?

PreviousJavaScript HREFNextMouse Hover on Static Elements

Last updated 2 years ago

The table tags should only be used to represent . The table tags have semantics that will cause problems for screen reader users if used for layout.

Take a look at which lets you layout DIVS and SPANS using similar table-like syntax, without the semantics.

tabular relationships between data
The CSS table model