Tables

See these tips to make sure your table is accessible.

Standard Table

First Name	Last Name	Position	Age	Role
Gordon	Cole	FBI Director	70	Instructor
Dale	Cooper	Special Agent	60	Investigator

    <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 Name	Last Name	Position	Age	Role
Gordon	Cole	FBI Director	70	Instructor
Dale	Cooper	Special Agent	60	Investigator

<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 Name	Last Name	Position	Age	Role
Gordon	Cole	FBI Director	70	Instructor
Dale	Cooper	Special Agent	60	Investigator

<div class="gr-table-container selectable">
    <!-- Table code here -->
    <tr class="selected">
        <!-- td code here -->
    </tr>
</div>