Skip to content Skip to main navigation Report an accessibility issue

Tables Hover

Documentation

Usage: Table rows can be made to change colors as you hover.

Example

Optional table caption.
# First Name Last Name Username
1 Johnny Beegood @guitarbell
2 Pat Summitt @dontmess
3 Blount College @oldskool

Code

HTML
<table class="table-hover">
  <caption>Optional table caption.</caption>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Johnny</td>
      <td>Beegood</td>
      <td>@guitarbell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Pat</td>
      <td>Summitt</td>
      <td>@dontmess</td>
    </tr>
    <tr>
    <th scope="row">3</th>
      <td>Blount</td>
      <td>College</td>
      <td>@oldskool</td>
    </tr>
  </tbody>
</table>
Available as a shortcode in the WordPress theme
[table-wrap hover="true"] ... table code ... [/table-wrap]