Tables Component

Traditional HTML tables stylized from minimalist to extravagant colors.


Example:

NO° First Last Email
1 Efrain Peralta [email protected]
2 Willy Morrison [email protected]
3 Mery Martinez [email protected]
<table class="e-table">
  <thead>
    <tr>
      <th>NO°</th>
      <th>First</th>
      <th>Last</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Efrain</td>
      <td>Peralta</td>
      <td>[email protected]</td>
    </tr>
    <!-- tr x3 -->
  </tbody>
</table>
Striped rows

Use striped to add sautéed lines alternating color.

NO° First Last Email
1 Efrain Peralta [email protected]
2 Willy Morrison [email protected]
3 Mery Martinez [email protected]
<table class="e-table striped">
  <thead>
    <tr>
      <th>NO°</th>
      <th>First</th>
      <th>Last</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Efrain</td>
      <td>Peralta</td>
      <td>[email protected]</td>
    </tr>
    <!-- tr x3 -->
  </tbody>
</table>
Bordered table

Use bordered to add borders to all the borders of the table and cells.

NO° First Last Email
1 Efrain Peralta [email protected]
2 Willy Morrison [email protected]
3 Mery Martinez [email protected]
<table class="e-table bordered">
  <thead>
    <tr>
      <th>NO°</th>
      <th>First</th>
      <th>Last</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Efrain</td>
      <td>Peralta</td>
      <td>[email protected]</td>
    </tr>
    <!-- tr x3 -->
  </tbody>
</table>
Hovered table

Use hovered to add a scrolling effect in each row.

NO° First Last Email
1 Efrain Peralta [email protected]
2 Willy Morrison [email protected]
3 Mery Martinez [email protected]
<table class="e-table hovered">
  <thead>
    <tr>
      <th>NO°</th>
      <th>First</th>
      <th>Last</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Efrain</td>
      <td>Peralta</td>
      <td>[email protected]</td>
    </tr>
    <!-- tr x3 -->
  </tbody>
</table>
Combinations of tables

NO° First Last Email
1 Efrain Peralta [email protected]
2 Willy Morrison [email protected]
3 Mery Martinez [email protected]
<table class="e-table bordered hovered">
  <thead>
    <tr>
      <th>NO°</th>
      <th>First</th>
      <th>Last</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Efrain</td>
      <td>Peralta</td>
      <td>[email protected]</td>
    </tr>
    <!-- tr x3 -->
  </tbody>
</table>
Colors

NO° First Last Email
1 Efrain Peralta [email protected]
2 Willy Morrison [email protected]
3 Mery Martinez [email protected]
NO° First Last Email
1 Efrain Peralta [email protected]
2 Willy Morrison [email protected]
3 Mery Martinez [email protected]
NO° First Last Email
1 Efrain Peralta [email protected]
2 Willy Morrison [email protected]
3 Mery Martinez [email protected]
NO° First Last Email
1 Efrain Peralta [email protected]
2 Willy Morrison [email protected]
3 Mery Martinez [email protected]
NO° First Last Email
1 Efrain Peralta [email protected]
2 Willy Morrison [email protected]
3 Mery Martinez [email protected]
NO° First Last Email
1 Efrain Peralta [email protected]
2 Willy Morrison [email protected]
3 Mery Martinez [email protected]
                <!-- Your color -->
<table class="e-table primary">
  <thead>
    <tr>
      <th>NO°</th>
      <th>First</th>
      <th>Last</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Efrain</td>
      <td>Peralta</td>
      <td>[email protected]</td>
    </tr>
    <!-- tr x3 -->
  </tbody>
</table>
thead

NO° First Last Email
1 Efrain Peralta [email protected]
2 Willy Morrison [email protected]
3 Mery Martinez [email protected]
NO° First Last Email
1 Efrain Peralta [email protected]
2 Willy Morrison [email protected]
3 Mery Martinez [email protected]
NO° First Last Email
1 Efrain Peralta [email protected]
2 Willy Morrison [email protected]
3 Mery Martinez [email protected]
NO° First Last Email
1 Efrain Peralta [email protected]
2 Willy Morrison [email protected]
3 Mery Martinez [email protected]
<table class="e-table">
  <thead class="e-thead primary">
    <tr>
      <th>NO°</th>
      <th>First</th>
      <th>Last</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Efrain</td>
      <td>Peralta</td>
      <td>[email protected]</td>
    </tr>
    <!-- tr x3 -->
  </tbody>
</table>
Contribute on GitHub
Become a sponsor.

If you are using our framework in a product that generates income, you can also help its maintenance if you wish, if you frequently help in your company or personal developments consider making a recurring donation.

If you want to see your company's logo on this site it's time to be a serious Sponsor.

eFrolic | framework css 2018
eFrolic | framework css 2018

One-time donation


Donate
eFrolic | framework css 2018
eFrolic | framework css 2018

Serious sponsor


Become a Patron