1. Home
  2. Tables
  3. Basic Tables

Basic Tables header small text goes here...

Default Table

# Username Email Address
1 Nicky Almera [email protected]
2 Edmund Wong [email protected]
3 Harvinder Singh [email protected] 
<table class="table">
  ...
</table>

Hover Table

# Username Email Address
1 Nicky Almera [email protected]
2 Edmund Wong [email protected]
3 Harvinder Singh [email protected] 
<table class="table table-hover">
  ...
</table>

Table Small

# Username Email Address
1 Nicky Almera [email protected]
2 Edmund Wong [email protected]
3 Harvinder Singh [email protected] 
<table class="table table-sm">
  ...
</table>

Responsive Table

# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Table Striped

# Username Email Address
1 Nicky Almera [email protected]
2 Edmund Wong [email protected]
3 Harvinder Singh [email protected] 
<table class="table table-striped">
  ...
</table>

Bordered Table

# Username Email Address
1 Nicky Almera [email protected]
2 Edmund Wong [email protected]
3 Harvinder Singh [email protected] 
<table class="table table-bordered">
  ...
</table>

UI Elements in Table NEW

# Username Email Address
Nicky Almera [email protected] Edit Delete
Edmund Wong [email protected]
Settings
Action 1 Action 2 Action 3
Action 4
Harvinder Singh [email protected] Edit Delete 
<table class="table align-middle">
  ...
</table>

Form Elements in Table NEW

 Username Email Address
Nicky Almera [email protected]
Edmund Wong [email protected]
[email protected]
@
 [email protected] 
<table class="table align-middle">
  <tbody>
    <tr>
      <!-- with input -->
      <td>
        <input type="text" class="form-control my-n1" />
      </td>
    </tr>
    
    <tr>
      <!-- with input-group -->
      <td>
        <div class="input-group my-n1"></div>
      </td>
    </tr>
    
    <tr>
      <!-- with btn-group -->
      <td>
        <div class="btn-group my-n1"></div>
      </td>
    </tr>
  </tbody>
</table>

Table Row Classes

# Username Email Address
1 Nicky Almera [email protected]
2 Terry Khoo [email protected]
3 Edmund Wong [email protected]
4 Harvinder Singh [email protected]
5 Terry Khoo [email protected] 
<table class="table">
  <tbody>
    <tr class="table-active">...</tr>
    <tr class="table-info">...</tr>
    <tr class="table-success">...</tr>
    <tr class="table-warning">...</tr>
    <tr class="table-danger">...</tr>
  </tbody>
</table>
App Settings
 
 
 
 
 
 
 
 
 
 
 
 
Dark Mode NEW
Adjust the appearance to reduce glare and give your eyes a break.
Header Fixed
Sidebar Fixed
Sidebar Grid
Gradient Enabled
Admin Design (5)
Language Version (7)
Frontend Design (5)
Documentation Reset Local Storage