Skip to main content

Table

Default table styling uses the variables and styling from the Text component.

Types

Default

Default table
Name Username Department Email
John Doe johdoe Development john@doe.com
Jane Doe jandoe Development jane@doe.com
John Smith johsmi Marketing john@smith.com
Jane Smith jansmi Marketing jane@smith.com 
<table class="env-table">
   <caption>
      Default table
   </caption>
   <thead>
      <tr>
         <th>Name</th>
         <th>Username</th>
         <th>Department</th>
         <th>Email</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>John Doe</td>
         <td>johdoe</td>
         <td>Development</td>
         <td>john@doe.com</td>
      </tr>
      <tr>
         <td>Jane Doe</td>
         <td>jandoe</td>
         <td>Development</td>
         <td>jane@doe.com</td>
      </tr>
      <tr>
         <td>John Smith</td>
         <td>johsmi</td>
         <td>Marketing</td>
         <td>john@smith.com</td>
      </tr>
      <tr>
         <td>Jane Smith</td>
         <td>jansmi</td>
         <td>Marketing</td>
         <td>jane@smith.com</td>
      </tr>
   </tbody>
</table>

Zebra

Zebra table
Name Username Department Email
John Doe johdoe Development john@doe.com
Jane Doe jandoe Development jane@doe.com
John Smith johsmi Marketing john@smith.com
Jane Smith jansmi Marketing jane@smith.com 
<table class="env-table env-table--zebra">
   <caption>
      Zebra table
   </caption>
   <thead>
      <tr>
         <th>Name</th>
         <th>Username</th>
         <th>Department</th>
         <th>Email</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>John Doe</td>
         <td>johdoe</td>
         <td>Development</td>
         <td>john@doe.com</td>
      </tr>
      <tr>
         <td>Jane Doe</td>
         <td>jandoe</td>
         <td>Development</td>
         <td>jane@doe.com</td>
      </tr>
      <tr>
         <td>John Smith</td>
         <td>johsmi</td>
         <td>Marketing</td>
         <td>john@smith.com</td>
      </tr>
      <tr>
         <td>Jane Smith</td>
         <td>jansmi</td>
         <td>Marketing</td>
         <td>jane@smith.com</td>
      </tr>
   </tbody>
</table>

Borders

env-table--borders-* Valid values around, right, bottom, left

Table with borders
Name Username Department Email
John Doe johdoe Development john@doe.com
Jane Doe jandoe Development jane@doe.com 
<table class="env-table env-table--borders-around">
   <caption>
      Table with borders
   </caption>
   <thead>
      <tr>
         <th>Name</th>
         <th>Username</th>
         <th>Department</th>
         <th>Email</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>John Doe</td>
         <td>johdoe</td>
         <td>Development</td>
         <td>john@doe.com</td>
      </tr>
      <tr>
         <td>Jane Doe</td>
         <td>jandoe</td>
         <td>Development</td>
         <td>jane@doe.com</td>
      </tr>
   </tbody>
</table>

Sizing

Small

Small table
Name Username Department Email
John Doe johdoe Development john@doe.com
Jane Doe jandoe Development jane@doe.com 
<table class="env-table env-table--small">
   <caption>
      Small table
   </caption>
   <thead>
      <tr>
         <th>Name</th>
         <th>Username</th>
         <th>Department</th>
         <th>Email</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>John Doe</td>
         <td>johdoe</td>
         <td>Development</td>
         <td>john@doe.com</td>
      </tr>
      <tr>
         <td>Jane Doe</td>
         <td>jandoe</td>
         <td>Development</td>
         <td>jane@doe.com</td>
      </tr>
   </tbody>
</table>

Large

Large table
Name Username Department Email
John Doe johdoe Development john@doe.com
Jane Doe jandoe Development jane@doe.com 
<table class="env-table env-table--large">
   <caption>
      Large table
   </caption>
   <thead>
      <tr>
         <th>Name</th>
         <th>Username</th>
         <th>Department</th>
         <th>Email</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>John Doe</td>
         <td>johdoe</td>
         <td>Development</td>
         <td>john@doe.com</td>
      </tr>
      <tr>
         <td>Jane Doe</td>
         <td>jandoe</td>
         <td>Development</td>
         <td>jane@doe.com</td>
      </tr>
   </tbody>
</table>

Contextual styling

Hover effect

Table with hover effect
Name Username Department Email
John Doe johdoe Development john@doe.com
Jane Doe jandoe Development jane@doe.com
John Smith johsmi Marketing john@smith.com
Jane Smith jansmi Marketing jane@smith.com 
<table class="env-table env-table--hover">
   <caption>
      Table with hover effect
   </caption>
   <thead>
      <tr>
         <th>Name</th>
         <th>Username</th>
         <th>Department</th>
         <th>Email</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>John Doe</td>
         <td>johdoe</td>
         <td>Development</td>
         <td>john@doe.com</td>
      </tr>
      <tr>
         <td>Jane Doe</td>
         <td>jandoe</td>
         <td>Development</td>
         <td>jane@doe.com</td>
      </tr>
      <tr>
         <td>John Smith</td>
         <td>johsmi</td>
         <td>Marketing</td>
         <td>john@smith.com</td>
      </tr>
      <tr>
         <td>Jane Smith</td>
         <td>jansmi</td>
         <td>Marketing</td>
         <td>jane@smith.com</td>
      </tr>
   </tbody>
</table>

Colors Deprecated

Table with colored rows and cells is deprecated and will be removed.

Envision documentation