A table is a good way to display a large amount of information which has a variety of columns and data to show for each entry.
A table is best used for:
The Design team needs to ensure that visual table headers for columns and rows are used, and that the tables are as simple as possible.
Ensure the correct semantic markup is used to construct tables: <th>, <td>, <thead>, <tbody>, and <tfoot> markup, with scope attributes, and that they’re not breaking what looks like one table into multiple tables. It is also important to provide a label for the table that can used by Assistive Technologies to distinguish one table from another in a list of tables on the page. This can be done by using the caption markup, using the summary attribute, or using aria-label/aria-labelledby/aria-describedby to convey the relevant information to adequately describe what is presented in the table.
<!-- Simple -->
<h2 id="tblSummary" class="show-for-sr">Simple table</h2>
<table aria-describedby="tblSummary">
<caption class="show-for-sr"> Table with only column headers </caption>
<thead>
<tr>
<th scope="col">
Heading 1
</th>
<th scope="col">
Heading 2
</th>
<th scope="col">
Heading 3
</th>
<th scope="col">
Heading 4
</th>
<th scope="col">
Heading 5
</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Heading 1">
Cell data
</td>
<td data-label="Heading 2">
Cell data
</td>
<td data-label="Heading 3">
Cell data
</td>
<td data-label="Heading 4">
Cell data
</td>
<td data-label="Heading 5">
Cell data
</td>
</tr>
<tr>
<td data-label="Heading 1">
Cell data
</td>
<td data-label="Heading 2">
Cell data
</td>
<td data-label="Heading 3">
Cell data
</td>
<td data-label="Heading 4">
Cell data
</td>
<td data-label="Heading 5">
Cell data
</td>
</tr>
<tr>
<td data-label="Heading 1">
Cell data
</td>
<td data-label="Heading 2">
Cell data
</td>
<td data-label="Heading 3">
Cell data
</td>
<td data-label="Heading 4">
Cell data
</td>
<td data-label="Heading 5">
Cell data
</td>
</tr>
</tbody>
</table>
<!-- Dual header -->
<h2 id="tblSummary" class="show-for-sr">Dual header table</h2>
<table aria-describedby="tblSummary">
<caption class="show-for-sr"> Table with both row and column headers </caption>
<thead>
<tr>
<th scope="col">
Column heading 1
</th>
<th scope="col">
Column heading 2
</th>
<th scope="col">
Column heading 3
</th>
<th scope="col">
Column heading 4
</th>
<th scope="col">
Column heading 5
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" data-label="Heading 1" class="text-left">
Row heading 1
</th>
<td data-label="Heading 2">
Cell data
</td>
<td data-label="Heading 3">
Cell data
</td>
<td data-label="Heading 4">
Cell data
</td>
<td data-label="Heading 5">
Cell data
</td>
</tr>
<tr>
<th scope="row" data-label="Heading 2" class="text-left">
Row heading 2
</th>
<td data-label="Heading 2">
Cell data
</td>
<td data-label="Heading 3">
Cell data
</td>
<td data-label="Heading 4">
Cell data
</td>
<td data-label="Heading 5">
Cell data
</td>
</tr>
<tr>
<th scope="row" data-label="Heading 3" class="text-left">
Row heading 3
</th>
<td data-label="Heading 2">
Cell data
</td>
<td data-label="Heading 3">
Cell data
</td>
<td data-label="Heading 4">
Cell data
</td>
<td data-label="Heading 5">
Cell data
</td>
</tr>
</tbody>
</table>
<!-- Your Trips Example -->
<h2 id="tblSummary" class="show-for-sr">Your Trips</h2>
<table aria-describedby="tblSummary">
<caption class="show-for-sr"> Upcoming trips </caption>
<thead>
<tr>
<th scope="col">
Departure date
</th>
<th scope="col">
Depart from
</th>
<th scope="col">
Status
</th>
<th scope="col">
Reservation name
</th>
<th scope="col">
Record locator
</th>
<td>
</td>
<td>
</td>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Departure date">
09/14/16
</td>
<td data-label="Depart from">
DFW
</td>
<td data-label="Status">
Canceled
</td>
<td data-label="Reservation name">
DFW/LAX
</td>
<td data-label="Record locator">
OYGQNZ
</td>
<td>
<a href="deleteReservationSubmit.do?recordLocator=OYGQNZ" id="remove-OYGQNZ" class="call-to-action">Remove <span class="show-for-sr">DFW/LAX, 09/14/16</span></a>
</td>
<td>
<a href="/reservation/selectReservationSubmit.do?recordLocator=OYGQNZ" id="select-OYGQNZ" class="call-to-action">Select <span class="show-for-sr">DFW/LAX, 09/14/16</span></a>
</td>
</tr>
<tr>
<td data-label="Departure date">
11/01/16
</td>
<td data-label="Depart from">
DFW
</td>
<td data-label="Status">
Canceled
</td>
<td data-label="Reservation name">
DFW/LAS
</td>
<td data-label="Record locator">
OYHLCD
</td>
<td>
<a href="deleteReservationSubmit.do?recordLocator=OYHLCD" id="remove-OYHLCD" class="call-to-action">Remove <span class="show-for-sr">DFW/LAS, 11/01/16</span></a>
</td>
<td>
<a href="/reservation/selectReservationSubmit.do?recordLocator=OYHLCD" id="select-OYHLCD" class="call-to-action">Select <span class="show-for-sr">DFW/LAS, 11/01/16</span></a>
</td>
</tr>
<tr>
<td data-label="Departure date">
11/29/16
</td>
<td data-label="Depart from">
DFW
</td>
<td data-label="Status">
Canceled
</td>
<td data-label="Reservation name">
DFW/SFO
</td>
<td data-label="Record locator">
JTCQHQ
</td>
<td>
<a href="deleteReservationSubmit.do?recordLocator=JTCQHQ" id="remove-JTCQHQ" class="call-to-action">Remove <span class="show-for-sr">DFW/SFO, 11/29/16</span></a>
</td>
<td>
<a href="/reservation/selectReservationSubmit.do?recordLocator=JTCQHQ" id="select-JTCQHQ" class="call-to-action">Select <span class="show-for-sr">DFW/SFO, 11/29/16</span></a>
</td>
</tr>
</tbody>
</table>