Table

Simple and Modern

Standart

Name	Gender	Age
Tomas	Male	26
Jack	Male	22
Anne	Female	23
Jane	Female	19

Example:


<table class="ui-table">
  <thead>
    <tr>
      <th><span>Name</span></th>
      <th> <span>Gender</span></th>
      <th><span>Age</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span class="ui-text-regular">Tomas</span></td>
      <td><span class="ui-text-regular">Male</span></td>
      <td><span class="ui-text-regular">26</span></td>
    </tr>
    <tr>
      <td><span class="ui-text-regular">Jack</span></td>
      <td><span class="ui-text-regular">Male</span></td>
      <td><span class="ui-text-regular">22</span></td>
    </tr>
    <tr>
      <td><span class="ui-text-regular">Anne</span></td>
      <td><span class="ui-text-regular">Female</span></td>
      <td><span class="ui-text-regular">23</span></td>
    </tr>
    <tr>
      <td><span class="ui-text-regular">Jane</span></td>
      <td><span class="ui-text-regular">Female</span></td>
      <td><span class="ui-text-regular">19</span></td>
    </tr>
  </tbody>
</table>

With hover

Name	Gender	Age
Tomas	Male	26
Jack	Male	22
Anne	Female	23
Jane	Female	19

Example:


<table class="ui-table ui-table--hover">
  <thead>
    <tr>
      <th><span>Name</span></th>
      <th> <span>Gender</span></th>
      <th><span>Age</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><span class="ui-text-regular">Tomas</span></td>
      <td><span class="ui-text-regular">Male</span></td>
      <td><span class="ui-text-regular">26</span></td>
    </tr>
    <tr>
      <td><span class="ui-text-regular">Jack</span></td>
      <td><span class="ui-text-regular">Male</span></td>
      <td><span class="ui-text-regular">22</span></td>
    </tr>
    <tr>
      <td><span class="ui-text-regular">Anne</span></td>
      <td><span class="ui-text-regular">Female</span></td>
      <td><span class="ui-text-regular">23</span></td>
    </tr>
    <tr>
      <td><span class="ui-text-regular">Jane</span></td>
      <td><span class="ui-text-regular">Female</span></td>
      <td><span class="ui-text-regular">19</span></td>
    </tr>
  </tbody>
</table>