, \, 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:
```markup
|
Sidebar
|
Page Header
|
|
|
```
The table tags should only be used to represent [tabular relationships between data](https://github.com/ebay/mindpatterns/tree/6c14ac7802634b97b44038d80935b912adbcd5cf/antipatterns/..structure/tables.md). The table tags have semantics that will cause problems for screen reader users if used for layout.
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:
```markup
```
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?
Take a look at [The CSS table model](http://www.w3.org/TR/CSS2/tables.html#table-display) which lets you layout DIVS and SPANS using similar table-like syntax, without the semantics.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://ebay.gitbook.io/mindpatterns/antipatterns/layout-table.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
|