Examining the Markup Code in Graphic Format
The following tabular data table illustrates color-coded markup elements in a linear fashion, as an Assistive Technology (A.T.) would read it.
You can use this graphic code view as a model to construct an accessible tabular data table.
| <tablesummary="Contains accessible tablular data"> | ||
| <caption> Accessible Tabular Data Table </caption> | ||
| <thead><tr><thscope="col"> Column 1 </th> | <thscope="col"> Column 2 </th> | <thscope="col"> Column 3 </th></tr></thead> |
|---|---|---|
| <tfoot><tr><tdcolspan="3"> End table </td></tr></tfoot> | ||
| <tbody><tr><thscope="row"> Row A </th> | <td> data </td> | <td> data </td></tr> |
| <tr><thscope="row"> Row B </th> | <td> data </td> | <td> data </td></tr> |
| <tr><thscope="row"> Row C </th> | <td> data </td> | <td> data </td></tr> |
| <tr><thscope="row"> Row D </th> | <td> data </td> | <td> data </td></tr></tbody> |
| </table> | ||
- table element <table></table>
- This element starts and ends a tabular data table.
- summary attribute summary=" "
- This attribute is added to the opening table element <table summary=" ">.
- It is acknowledged by a screen reader application but it will not be rendered in a browser view of the data table.
- It is implemented to give a short idea of what is contained within the data table.
- Important Note: Following web standards and accessibility, always try to keep your attribute descriptions concise and to as few words as possible.
- caption element <caption></caption>
- Abiding by web standards, the caption element should accompany all tabular data tables.
-
A <caption></caption> element added to your tabular data table:
- gives a short descriptive title to the data table
- is visible in browser view
- is easily identified by assistive devices
- is discoverable by search engines
- If placed at the top of the table, its opening tag comes directly after the opening <table> tag.
- If placed at the bottom of the table, its opening tag comes directly after the last closing </tr> tag.
- table header element <thead></thead>
- Not to be confused with the table heading element <th></th>, this element defines the table header section of the data table.
- Its opening tag is placed directly after the caption closing tag </caption> and directly before the first table row <tr> opening tag.
- table footer element <tfoot></tfoot>
- This element defines the footer section of the data table.
- It is an optional addition and can be omitted if it suits your design.
- Note: This element must be placed directly before the table body opening tag <tbody>.
- colspan attribute colspan="3"
- This attribute is added to the opening table data element tag <td colspan="3"> which is part of the table footer element section.
- It enables the table footer to safely span the three columns without a break, eliminating the vertical column lines.
- table body element <tbody></tbody>
- This element defines the body area of the table and surrounds its contents.
- It comes directly after the closing table footer element </tfoot>, and before the opening table row element <tr>.
- table row element <tr></tr>
- This element marks the start and end of a data table row.
- A title attribute title=" " may be added to the opening table row tag <tr title=" "> if a short description of a row is needed.
- table heading element <th></th>
- This element identifies our data table rows and columns.
- We can now apply the scope attribute scope=" " in the opening table heading tag <th scope=" "> to define our rows and columns.
- scope attribute scope=" "
- Use the scope attribute to declare a table heading element <th></th> either a row or a column.
- It is inserted in the opening table heading element tag as shown above.
- table data element <td></td>
- This element contains tabular data.
- It is also known as an origin, which is located at the intersection of a vertical column and a horizontal row.