Data Tables
Data tables helps in organizing and displaying data in rows and columns. They are used to store and present large amounts of information in a structured format that makes it easy to analyze and compare data.
- Can be used for a wide range of applications, including database management, financial analysis, scientific research, and more.
-
Typically consist of columns and rows.
- Columns represent different data categories.
- Rows represent individual data points.
A data table is a component where the data is arranged in cells based on the context. Data tables that generally consists of rows or column headers or both are simple data tables. However, when there are multilevel headers or irregular tables headers present, they are complex data tables.
NOTE:
- New to accessibility or uncertain of requirements, it will be helpful to review all sections below.
- Already familiar with requirements, skip to the “Working Example” section for sample HTML, CSS and JavaScript (when needed), along with a working demo.
A data table CAN be implemented using following approach:
- Data table SHOULD be defined using
<table>element. - The data cells SHOULD be defined using
<td>elements. - The table purpose CAN be defined using
<caption>element. - The table rows SHOULD be defined using
<tr>element. - The
colspanattribute is used to specify the number of columns a cell covers. - The
rowspanattribute is used to specify the number of rows a cell covers.
- The table headers SHOULD be defined using
<th>elements.
For example,
<table>
<caption>Table with only header</caption>
<tr>
<th>Name</th>
<th>Designation</th>
<th>Appointed</th>
</tr>
<tr>
<td>OMID</td>
<td>Chair</td>
<td>1 March 2022</td>
</tr>
<tr>
<td>ANDY</td>
<td>Chief Executive</td>
<td>19 October 2020</td>
</tr>
<tr>
<td>SALLY</td>
<td>Chief Financial Officer</td>
<td>24 April 2020</td>
</tr>
<tr>
<td>TIM SCORE</td>
<td>Deputy Chair and Senior Independent Director</td>
<td>1 January 2015</td>
</tr>
</table>
-
The scope attribute MUST be defined for the row and column headers on
<th>elements. For the column headers, the value ofscopeis set tocolwhereas for the row headers, the value ofscopeis set torow.
For example,
<table>
<caption>Tables with two Headers</caption>
<!-- Column headers with scope attribute -->
<tr>
<th scope="col">Time</th>
<th scope="col">Monday</th>
<th scope="col">Tuesday</th>
<th scope="col">Wednesday</th>
<th scope="col">Thursday</th>
<th scope="col">Friday</th>
</tr>
<tr>
<th scope="row">09:00 – 11:00</th>
<td>Maths</td>
<td>Science</td>
<td>History</td>
<td>English</td>
<td>geography</td>
</tr>
<tr>
<th scope="row">12:00 – 14:00</th>
<td>Maths</td>
<td>Science</td>
<td>History</td>
<td>English</td>
<td>geography</td>
</tr>
<tr>
<th scope="row">15:00 – 17:00</th>
<td>Maths</td>
<td>Science</td>
<td>History</td>
<td>English</td>
<td>geography</td>
</tr>
</table>
-
The
colspanattribute CAN be used to specify the number of columns a cell covers. -
The
rowspanattribute CAN be used to specify the number of rows a cell covers. -
The
scopeattribute MUST be defined for the row and column headers on<th>elements.- For the column headers, the value of
scopeis set tocol. - For the row headers, the value of
scopeis set torow. -
For a header that covers multiple columns, the value of
scopeis set tocolgroup.
- For the column headers, the value of
For example,
<table>
<caption>Tables with Irregular Headers</caption>
<thead>
<!-- Table headers with rowspan and colspan attributes -->
<tr>
<th rowspan="2" scope="col">Name</th>
<th colspan="2" scope="colgroup">Contact Information</th>
<th colspan="2" scope="colgroup">Employment Information</th>
</tr>
<tr>
<th scope="col">Phone</th>
<th scope="col">Email</th>
<th scope="col">Position</th>
<th scope="col">Department</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Omid Kordestani</th>
<td>555-1234</td>
<td>omid@pearson.com</td>
<td>Member of the Nomination</td>
<td>Governance Committee</td>
</tr>
<tr>
<th scope="row">ANDY BIRD</th>
<td>555-348753</td>
<td>andy@pearson.com</td>
<td>Member of the Reputation </td>
<td>Responsibility Committee</td>
</tr>
<tr>
<th scope="row">SHERRY COUTU</th>
<td>555-1234748</td>
<td>sherry@pearson.com</td>
<td>Chair of the Remuneration Committee</td>
<td>Governance Committee</td>
</tr>
<tr>
<th scope="row">ESTHER LEE</th>
<td>555-1234954</td>
<td>esther@pearson.com</td>
<td>Member of the Nomination</td>
<td>Governance and Remuneration Committees</td>
</tr>
<tr>
<th scope="row">LINDA LORIMER</th>
<td>555-1234463</td>
<td>linda@pearson.com</td>
<td>Chair of the Reputation</td>
<td>Member of the Audit Committee</td>
</tr>
</tbody>
</table>
-
All data headers SHOULD contain
idattribute in their<th>elements. -
The
headersattribute SHOULD be defined for the data cells. Its value SHOULD contain all values ofidattributes that correspond to the respective data headers.
For example,
<table>
<caption>Table with Multilevel Headers</caption>
<thead>
<tr>
<td></td>
<th id="description" scope="col"> Description </th>
<th id="isbn" scope="col"> ISBN </th>
</tr>
</thead>
<tbody>
<tr>
<th id="print" class="span" colspan="5" scope="colgroup"> Print and blended solutions </th>
</tr>
<tr>
<th headers="print" id="pathway"> An accelerated pathway through developmental math </th>
<td headers="print pathway description"> Student Worktext + MathXL for School (1-year access) </td>
<td headers="print pathway isbn"> 9780135284520 </td>
</tr>
<tr>
<th headers="print" id="dothemath"> Helping students innovatively “do the math” </th>
<td headers="print dothemath description"> Student Edition + MathXL for School (1-year access) </td>
<td headers="print dothemath isbn"> 9780135841310 </td>
</tr>
<tr>
<th headers="print" id="succeed"> Every student can succeed </th>
<td headers="print succeed description"> Student Edition + MyMathLab for School w/etext (1-year access) </td>
<td headers="print succeed isbn"> 9780134605081 </td>
</tr>
<tr>
<th id="digital" class="span" colspan="5" scope="colgroup"> Digital first solutions </th>
</tr>
<tr>
<th id="mathxl" headers="digital"> MathXL for School </th>
<td headers="digital mathxl description"> MathXL for School Single-User Access Card </td>
<td headers="digital mathxl isbn"> 9780321600554 </td>
</tr>
<tr>
<th id="mymathlab" headers="digital"> MyMathLab for School </th>
<td headers="digital mymathlab description"> MathXL for School 25 pack </td>
<td headers="digital mymathlab isbn"> 9780321435187 </td>
</tr>
</tbody>
</table>
The screen reader announces the empty table cells as “blank” which can be confusing for them.
-
Avoid using empty table data or header cells.
Note: The first or last header cell can be kept empty if required, but it
SHOULD be coded using
<td>element. - For tables with empty/blank cells, it is advisable to add descriptive offscreen text so that users are aligned OR information such as N/A or Not Applicable or hyphen CAN be provided to indicate the cell holds no data.
When tables are used for decorative or layout purposes, they may contain empty cells, rows or columns. This can be confusing for screen reader users.
- Hence, it is advisable NOT to use table mark-up for decorative or layout purposes.
-
If table mark-up is used for decorative or layout purposes, then
role="presentation"SHOULD be used on the<table>element to hide table semantics from screen readers.
A well-defined data table benefits majorly the below users.
- People with cognitive disabilities
- People using speech input
- People with limited dexterity
- People using keyboard only
- People using screen readers
<table>
<caption>Table with only header</caption>
<tr>
<th>Name</th>
<th>Designation</th>
<th>Appointed</th>
</tr>
<tr>
<td>OMID</td>
<td>Chair</td>
<td>1 March 2022</td>
</tr>
<tr>
<td>ANDY</td>
<td>Chief Executive</td>
<td>19 October 2020</td>
</tr>
<tr>
<td>SALLY</td>
<td>Chief Financial Officer</td>
<td>24 April 2020</td>
</tr>
<tr>
<td>TIM SCORE</td>
<td>Deputy Chair and Senior Independent Director</td>
<td>1 January 2015</td>
</tr>
</table>
table {
width: 80%;
border-collapse: collapse;
}
th, td {
padding: 0.5em !important;
text-align: left;
border: 1px solid #ccc;
}
th {
background: #005a70;
color: #fff;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
| Name | Designation | Appointed |
|---|---|---|
| OMID | Chair | 1 March 2022 |
| ANDY | Chief Executive | 19 October 2020 |
| SALLY | Chief Financial Officer | 24 April 2020 |
| TIM SCORE | Deputy Chair and Senior Independent Director | 1 January 2015 |
<table>
<caption>Tables with two Headers</caption>
<tr>
<th scope="col">Time</th>
<th scope="col">Monday</th>
<th scope="col">Tuesday</th>
<th scope="col">Wednesday</th>
<th scope="col">Thursday</th>
<th scope="col">Friday</th>
</tr>
<tr>
<th scope="row">09:00 – 11:00</th>
<td>Maths</td>
<td>Science</td>
<td>History</td>
<td>English</td>
<td>Geography</td>
</tr>
<tr>
<th scope="row">12:00 – 14:00</th>
<td>Maths</td>
<td>Science</td>
<td>History</td>
<td>English</td>
<td>Geography</td>
</tr>
<tr>
<th scope="row">15:00 – 17:00</th>
<td>Maths</td>
<td>Science</td>
<td>History</td>
<td>English</td>
<td>Geography</td>
</tr>
</table>
table {
width: 80%;
border-collapse: collapse;
}
th, td {
padding: 0.5em !important;
text-align: left;
border: 1px solid #ccc;
}
th {
background: #005a70;
color: #fff;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
| Time | Monday | Tuesday | Wednesday | Thursday | Friday |
|---|---|---|---|---|---|
| 09:00 – 11:00 | Maths | Science | History | English | Geography |
| 12:00 – 14:00 | Maths | Science | History | English | Geography |
| 15:00 – 17:00 | Maths | Science | History | English | Geography |
<table>
<caption>Tables with Irregular Headers</caption>
<thead>
<tr>
<th rowspan="2" scope="col">Name</th>
<th colspan="2" scope="colgroup">Contact Information</th>
<th colspan="2" scope="colgroup">Employment Information</th>
</tr>
<tr>
<th scope="col">Phone</th>
<th scope="col">Email</th>
<th scope="col">Position</th>
<th scope="col">Department</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Omid Kordestani</th>
<td>555-1234567</td>
<td>omid@pearson.com</td>
<td>Member of the Nomination</td>
<td>Governance Committee</td>
</tr>
<tr>
<th scope="row">Andy Bird</th>
<td>555-3487535</td>
<td>andy@pearson.com</td>
<td>Member of the Reputation </td>
<td>Responsibility Committee</td>
</tr>
<tr>
<th scope="row">Sherry Coutu</th>
<td>555-1234748</td>
<td>sherry@pearson.com</td>
<td>Chair of the Remuneration Committee</td>
<td>Governance Committee</td>
</tr>
<tr>
<th scope="row">Esther Lee</th>
<td>555-1234954</td>
<td>esther@pearson.com</td>
<td>Member of the Nomination</td>
<td>Governance and Remuneration Committees</td>
</tr>
<tr>
<th scope="row">Linda Lorimer</th>
<td>555-1234463</td>
<td>linda@pearson.com</td>
<td>Chair of the Reputation</td>
<td>Member of the Audit Committee</td>
</tr>
</tbody>
</table>
table {
width: 80%;
border-collapse: collapse;
}
th, td {
padding: 0.5em !important;
text-align: left;
border: 1px solid #ccc;
}
th {
background: #005a70;
color: #fff;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
| Name | Contact Information | Employment Information | ||
|---|---|---|---|---|
| Phone | Position | Department | ||
| Omid Kordestani | 555-1234567 | omid@pearson.com | Member of the Nomination | Governance Committee |
| Andy Bird | 555-3487535 | andy@pearson.com | Member of the Reputation | Responsibility Committee |
| Sherry Coutu | 555-1234748 | sherry@pearson.com | Chair of the Remuneration Committee | Governance Committee |
| Esther Lee | 555-1234954 | esther@pearson.com | Member of the Nomination | Governance and Remuneration Committees |
| Linda Lorimer | 555-1234463 | linda@pearson.com | Chair of the Reputation | Member of the Audit Committee |
<table>
<caption>Table with Multilevel Headers</caption>
<thead>
<tr>
<td></td>
<th id="description" scope="col"> Description </th>
<th id="isbn" scope="col"> ISBN </th>
</tr>
</thead>
<tbody>
<tr>
<th id="print" class="span" colspan="5" scope="colgroup"> Print and blended solutions </th>
</tr>
<tr>
<th headers="print" id="pathway"> An accelerated pathway through developmental math </th>
<td headers="print pathway description"> Student Worktext + MathXL for School (1-year access) </td>
<td headers="print pathway isbn"> 9780135284520 </td>
</tr>
<tr>
<th headers="print" id="dothemath"> Helping students innovatively “do the math” </th>
<td headers="print dothemath description"> Student Edition + MathXL for School (1-year access) </td>
<td headers="print dothemath isbn"> 9780135841310 </td>
</tr>
<tr>
<th headers="print" id="succeed"> Every student can succeed </th>
<td headers="print succeed description"> Student Edition + MyMathLab for School w/etext (1-year access) </td>
<td headers="print succeed isbn"> 9780134605081 </td>
</tr>
<tr>
<th id="digital" class="span" colspan="5" scope="colgroup"> Digital first solutions </th>
</tr>
<tr>
<th id="mathxl" headers="digital"> MathXL for School </th>
<td headers="digital mathxl description"> MathXL for School Single-User Access Card </td>
<td headers="digital mathxl isbn"> 9780321600554 </td>
</tr>
<tr>
<th id="mymathlab" headers="digital"> MyMathLab for School </th>
<td headers="digital mymathlab description"> MathXL for School 25 pack </td>
<td headers="digital mymathlab isbn"> 9780321435187 </td>
</tr>
</tbody>
</table>
table {
width: 80%;
border-collapse: collapse;
}
th, td {
padding: 0.5em !important;
text-align: left;
border: 1px solid #ccc;
}
th {
background: #005a70;
color: #fff;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
| Description | ISBN | |
|---|---|---|
| Print and blended solutions | ||
| An accelerated pathway through developmental math | Student Worktext + MathXL for School (1-year access) | 9780135284520 |
| Helping students innovatively “do the math” | Student Edition + MathXL for School (1-year access) | 9780135841310 |
| Every student can succeed | Student Edition + MyMathLab for School w/etext (1-year access) | 9780134605081 |
| Digital first solutions | ||
| MathXL for School | MathXL for School Single-User Access Card | 9780321600554 |
| MyMathLab for School | MathXL for School 25 pack | 9780321435187 |
<h2>Blank Cells</h2>
<table class="styled-table">
<thead>
<tr>
<td></td>
<th scope="col">Name</th>
<th scope="col">Phone</th>
<th scope="col">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Omid Kordestani</td>
<td>555-1234567</td>
<td>omid@pearson.com</td>
</tr>
<tr class="active-row">
<td>2</td>
<td>Andy Bird</td>
<td>555-3487535</td>
<td>-</td>
</tr>
<tr>
<td>3</td>
<td>Sherry Coutu</td>
<td>-</td>
<td>sherry@pearson.com</td>
</tr>
<tr class="active-row">
<td>4</td>
<td>Esther Lee </td>
<td>-</td>
<td>Esther@pearson.com</td>
</tr>
</tbody>
</table>
.styled-table {
border-collapse: collapse;
margin: 25px 0;
font-size: 0.9em;
font-family: sans-serif;
min-width: 400px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
border: 1px solid black;
}
.styled-table thead tr {
background-color: #005a70;
color: #ffffff;
text-align: left;
}
.styled-table th,
.styled-table td {
padding: 12px 15px;
}
.styled-table tbody tr {
border-bottom: 1px solid #dddddd;
}
.styled-table tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
}
.styled-table tbody tr:last-of-type {
border-bottom: 2px solid #005a70;
}
.styled-table tbody tr.active-row {
font-weight: bold;
color: #005a70;
}
Blank Cells
| Name | Phone | ||
|---|---|---|---|
| 1 | Omid Kordestani | 555-1234567 | omid@pearson.com |
| 2 | Andy Bird | 555-3487535 | - |
| 3 | Sherry Coutu | - | sherry@pearson.com |
| 4 | Esther Lee | - | Esther@pearson.com |
<h2>Decorative / Layout</h2>
<table class="layout" role="presentation">
<tr id="layoutHeader">
<td colspan="2"><h2>Pearson</h2></td>
</tr>
<tr>
<td id="layoutNav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Guidlines</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Training</a></li>
<li><a href="#">Research</a></li>
<li><a href="#">About</a></li>
</ul>
</td>
<td id="layoutContent">
<h3>Accessibility Resources</h3>
<p>
The Accessibility Team for Assessments supports learners,
educators, parents, content authors, product owners, and client
partners by assembling and maintaining a comprehensive set of
accessibility resources designed to promote disability awareness
and advocacy and build a rich understanding of what
accessibility means and how to achieve it.
</p>
<h3>Learner, Educator, and Parent Resources</h3>
<p>
A multi-year project to support Nemeth literacy resulted in the
development of a robust, publicly-available Nemeth Braille
Curriculum for students who are blind. Strong Nemeth skills can
open doors to success in Science, Engineering, Technology, and
Mathematics (STEM) so Pearson Assessments provides access to
these materials for free. They are designed so that parents or
teachers who are not familiar with Nemeth can learn alongside
their students.
</p>
<h3>Internal and External Customer Resources</h3>
<p>
Our resources include information about the access needs of
learners with disabilities, descriptions of technologies that
support access, and a list of free, open-source tools for
testing conformance to accessibility guidelines. There are also
some overview materials that explain the different types of
disabilities people may have and how to effectively design
inclusive products and services that align to accessibility
guidelines and standards. Since the Web Accessibility Initiative
(WAI) of the World Wide Web Consortium (W3C) is internationally
recognized as a primary source for accessibility guidelines, we
align our resources with the ongoing education efforts of
WAI’s Accessibility Education and Outreach Working Group
(EOWG). One important tool for promoting the use of our
accessibility resources is Pearson Able, Pearson’s
employee resource group for employees with disabilities. Pearson
Able has chapters all over the world and is designed to create
and distribute resources to improve disability awareness and
promote an inclusive culture within Pearson.
</p>
</td>
</tr>
<tr id="layoutFooter">
<td colspan="2"> Copyright © 1996–2022 Pearson All rights reserved.</td>
</tr>
</table>
.layout {
width: 100%;
border-collapse: collapse;
}
.layout th, td {
padding: 10px;
border: 1px solid #ccc;
}
#layoutHeader, #layoutNav, #layoutContent, #layoutFooter {
background-color: #f2f2f2;
}
#layoutNav {
width: 20%;
vertical-align: top;
}
#layoutNav ul li { list-style: disc; }
#layoutContent {
padding: 20px;
}
#layoutHeader, #layoutFooter {
text-align: center;
padding: 10px;
background-color: #005a70;
color: white;
}
#layoutHeader h2 { color: white; }
Decorative / Layout
Pearson |
|
Accessibility ResourcesThe Accessibility Team for Assessments supports learners, educators, parents, content authors, product owners, and client partners by assembling and maintaining a comprehensive set of accessibility resources designed to promote disability awareness and advocacy and build a rich understanding of what accessibility means and how to achieve it. Learner, Educator, and Parent ResourcesA multi-year project to support Nemeth literacy resulted in the development of a robust, publicly-available Nemeth Braille Curriculum for students who are blind. Strong Nemeth skills can open doors to success in Science, Engineering, Technology, and Mathematics (STEM) so Pearson Assessments provides access to these materials for free. They are designed so that parents or teachers who are not familiar with Nemeth can learn alongside their students. Internal and External Customer ResourcesOur resources include information about the access needs of learners with disabilities, descriptions of technologies that support access, and a list of free, open-source tools for testing conformance to accessibility guidelines. There are also some overview materials that explain the different types of disabilities people may have and how to effectively design inclusive products and services that align to accessibility guidelines and standards. Since the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C) is internationally recognized as a primary source for accessibility guidelines, we align our resources with the ongoing education efforts of WAI’s Accessibility Education and Outreach Working Group (EOWG). One important tool for promoting the use of our accessibility resources is Pearson Able, Pearson’s employee resource group for employees with disabilities. Pearson Able has chapters all over the world and is designed to create and distribute resources to improve disability awareness and promote an inclusive culture within Pearson. |
|
| Copyright © 1996–2022 Pearson All rights reserved. | |