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>