Request Information
Ready to find out what MSU Denver can do for you? We’ve got you covered.
Introduction to HTML Tables
When using tables on the web, accessibility best practices from digital documents still apply. Web pages and Canvas pages should still have programmatically determinable structure and text styles, and tables should only be used for data presentation, not for visual layout purposes. HTML markup is used to identify header cells and data cells within the table so that accessible technology such as screen readers can interpret the table correctly.
HTML table tag hierarchy means that everything that makes up the table is contained within the “table” tag and end tag. All parts of a row are contained in the “tr” tag and end tag. The table tag hierarchy on the code side, from outside to inside, is: table, tr (table row), then either th (table header) or td (table data). Each cell must be identified as either a header cell or a data cell.
Captions for HTML tables work like a title or heading for the table and are contained within “caption” tags directly after the opening table tag.
Good practice for HTML tables is to use the “scope” attribute with the header tags to define the direction of the header cells as applying to either a row or column.
While complex tables where headers span multiple rows or columns are possible, simple individual tables are recommended if possible, which may require a complex table to be split into several smaller tables.
Tutorials for Different Table Formats
Some of the math faculty at MSU Denver by concentration are displayed in the table, followed by the code used to create the table. This table has one header row with the concentration areas. Only a selection of faculty are represented in this table, for a full list visit the Math Faculty and Staff webpage.
| Applied | Theoretical | Probability & Statistics | Math Education |
|---|---|---|---|
| Bowmeester | Carter | Boneh | Evans |
| Fry | Davis | Dyhr | Gilmore |
| Harder | Ethier | Grevstad | Koester |
| Rohde Poole | Mocanasu | Li | McKenna |
An important note about HTML code: When creating content within another structure such as WordPress or Canvas, some of the formatting is automatically set for you. Also, sometimes this pre-built formatting will overwrite manual formatting. The tables here in WordPress, even if manually typed using code, will add the “tbody” tag which is used in more complex tables along with the “thead” and “tfoot” tags to denote header, body, and footer row groups. This “tbody” tag is not necessary for this table but cannot be removed.
Attributes used:
- style, width: the horizontal span of the table or cell
- style, background-color: background color for that cell in Hex code
- border-collapse: stops borders from being doubled
- border: size of border in pixels
- scope=”col”: header applies to associated column
- align=”center”: row has center alignment in all cells
<table style="width: 100%; border-collapse: collapse;" border="1"> <caption>Math Faculty by Concentration</caption> <tbody> <tr align="center"> <th style="background-color: #d4d4d4;" scope="col">Applied</th> <th style="background-color: #d4d4d4;" scope="col">Theoretical</th> <th style="background-color: #d4d4d4;" scope="col">Probability & Statistics</th> <th style="background-color: #d4d4d4;" scope="col">Math Education</th> </tr> <tr align="center"> <td>Bowmeester</td> <td>Carter</td> <td>Boneh</td> <td>Evans</td> </tr> <tr align="center"> <td>Fry</td> <td>Davis</td> <td>Dyhr</td> <td>Gilmore</td> </tr> <tr align="center"> <td>Harder</td> <td>Ethier</td> <td>Grevstad</td> <td>Koester</td> </tr> <tr align="center"> <td>Rohde Poole</td> <td>Mocanasu</td> <td>Li</td> <td>McKenna</td> </tr> </tbody> </table>
Some of the staff and faculty in the Gender Institute for Teaching and Advocacy(GITA) by category are displayed in the table, followed by the code used to create the table, This table has one header column for the role categories. For a full list of the people in GITA including affiliate faculty and student employees, please visit the GITA Office Directory webpage.
| Pro Staff | Russo Garrido | Rodriguez Arauz | Archibeque | Sirivanchai | – |
|---|---|---|---|---|---|
| Advisors | Sirivanchai | Magana | – | – | – |
| Full-time Faculty | Dhoot | Mizumoto Posey | Dimatulac Santos | Sgoutas | Strathearn |
An important note about HTML code: When creating content within another structure such as WordPress or Canvas, some of the formatting is automatically set for you. Also, sometimes this pre-built formatting will overwrite manual formatting. The tables here in WordPress, even if manually typed using code, will add the “tbody” tag which is used in more complex tables along with the “thead” and “tfoot” tags to denote header, body, and footer row groups. This “tbody” tag is not necessary for this table but cannot be removed.
Attributes used:
- style, width: the horizontal span of the table or cell
- style, background-color: background color for that cell in Hex code
- border-collapse: stops borders from being doubled
- border: size of border in pixels
- scope=”row”: header applies to associated row
- align=”center”: row has center alignment in all cells
<table style="width: 100%; border-collapse: collapse;" border="1"> <caption>GITA Staff and Faculty by Category</caption> <tbody> <tr align="center"> <th style="background-color: #d4d4d4;" scope="row">Pro Staff</th> <td>Russo Garrido</td> <td>Rodriguez Arauz</td> <td>Archibeque</td> <td>Sirivanchai</td> <td>-</td> </tr> <tr align="center"> <th style="background-color: #d4d4d4;" scope="row">Advisors</th> <td>Sirivanchai</td> <td>Magana</td> <td>-</td> <td>-</td> <td>-</td> </tr> <tr align="center"> <th style="background-color: #d4d4d4;" scope="row">Full-time Faculty</th> <td>Dhoot</td> <td>Mizumoto Posey</td> <td>Dimatulac Santos</td> <td>Sgoutas</td> <td>Strathearn</td> </tr> </tbody> </table>
Census data with MSU Denver’s student counts by class for several years are displayed in the table, followed by the code used to create the table. This table has a header row with the class titles and a header column with the years.
| Freshmen | Sophomore | Junior | Senior | |
|---|---|---|---|---|
| Fall 2022 | 4,584 | 2,712 | 3,474 | 4,569 |
| Fall 2021 | 4,189 | 2,922 | 3,632 | 5,014 |
| Fall 2020 | 4,587 | 3,380 | 4,005 | 5,420 |
An important note about HTML code: When creating content within another structure such as WordPress or Canvas, some of the formatting is automatically set for you. Also, sometimes this pre-built formatting will overwrite manual formatting. The tables here in WordPress, even if manually typed using code, will add the “tbody” tag which is used in more complex tables along with the “thead” and “tfoot” tags to denote header, body, and footer row groups. This “tbody” tag is not necessary for this table but cannot be removed.
Attributes used:
- style, width: the horizontal span of the table or cell
- style, background-color: background color for that cell in Hex code
- border-collapse: stops borders from being doubled
- border: size of border in pixels
- scope=”col”: header applies to associated column
- scope=”row”: header applies to associated row
- align=”center”: row has center alignment in all cells
<table style="width: 100%; border-collapse: collapse;" border="1"> <caption>MSU Denver Student Count by Class</caption> <tbody> <tr> <td style="width: 20%;"></td> <th style="width: 20%; background-color: #d4d4d4;" scope="col">Freshmen</th> <th style="width: 20%; background-color: #d4d4d4;" scope="col">Sophomore</th> <th style="width: 20%; background-color: #d4d4d4;" scope="col">Junior</th> <th style="width: 20%; background-color: #d4d4d4;" scope="col">Senior</th> </tr> <tr align="center"> <th style="width: 20%; background-color: #d4d4d4;" scope="row">Fall 2022</th> <td style="width: 20%;">4,584</td> <td style="width: 20%;">2,712</td> <td style="width: 20%;">3,474</td> <td style="width: 20%;">4,569</td> </tr> <tr align="center"> <th style="width: 20%; background-color: #d4d4d4;" scope="row">Fall 2021</th> <td style="width: 20%;">4,189</td> <td style="width: 20%;">2,922</td> <td style="width: 20%;">3,632</td> <td style="width: 20%;">5,014</td> </tr> <tr align="center"> <th style="width: 20%; background-color: #d4d4d4;" scope="row">Fall 2020</th> <td style="width: 20%;">4,587</td> <td style="width: 20%;">3,380</td> <td style="width: 20%;">4,005</td> <td style="width: 20%;">5,420</td> </tr> </tbody> </table> Data Source: Institutional Research Student Profiles - MSU Denver
For tables with irregular headers (header cells than span multiple columns and/or rows) or multi-level headers (header cells that cannot be associated in a strictly horizontal or vertical way to the data cells), please visit the W3 Tables Tutorials page to learn how to tag these complex tables.
If using complex tables, be sure to include a summary with information about how the table is organized to help users navigate the table.
Additional Resources for HTML Tables (external links)
- Tables Tutorial | Web Accessibility Initiative (WAI) | W3C
- WebAIM: Creating Accessible Tables – Data Tables
- HTML Tables (w3schools.com)
- Tables with JAWS (freedomscientific.com) – How JAWS reads tables while in Table mode