Skip to main content

Tables

See these tips to make sure your table is accessible.

Standard Table#

First NameLast NamePositionAgeRole
GordonColeFBI Director70Instructor
DaleCooperSpecial Agent60Investigator
<div class="gr-table-container">
<table class="gr-table" aria-label="Welcome to twin peaks, her are the key players:">
<thead>
<tr>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Position</th>
<th scope="col">Age</th>
<th scope="col">Role</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Gordon</th>
<th scope="row">Cole</th>
<th scope="row">FBI Director</th>
<th scope="row">70</th>
<th scope="row">Instructor</th>
</tr>
<tr>
<th scope="row">Dale</th>
<th scope="row">Cooper</th>
<th scope="row">Special Agent</th>
<th scope="row">60</th>
<th scope="row">Investigator</th>
</tr>
</tbody>
</table>
</div>

Hoverable Table#

First NameLast NamePositionAgeRole
GordonColeFBI Director70Instructor
DaleCooperSpecial Agent60Investigator
<div class="gr-table-container hoverable">
<!-- Table code here -->
</div>

Selectable Table#

To give the table a selected state, add a class of 'selectable' to the 'gr-table-container'. Next, for every <tr> element you want a selected state, add the class 'selected'.

First NameLast NamePositionAgeRole
GordonColeFBI Director70Instructor
DaleCooperSpecial Agent60Investigator
<div class="gr-table-container selectable">
<!-- Table code here -->
<tr class="selected">
<!-- td code here -->
</tr>
</div>