Main Menu
Boost your work

Upgrade to premium here

Upgrade Now
Kleon Admin Dashboard
Made with by WPThemeBooster
Theme Customizer
Theme Color Mode
Navigation Layout
Vertical Navigation Styles
Header Position
Topbar Style

Bootstrap Basic Tables

Lorem ipsum dolor sit amet

Default Table

# Name Designation Company Phone
1 Tonny CEO ABC +098 234 567
2 Farguson Manager XYZ +098 234 568
3 Ashley Marketer Abco +098 234 569
4 Jackie Marketer Abco +098 234 570 
<!-- Default Table -->
<table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Name</th>
        <th scope="col">Designation</th>
        <th scope="col">Company</th>
        <th scope="col">Phone</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Tonny</td>
        <td>CEO</td>
        <td>ABC</td>
        <td>+098 234 567</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Farguson</td>
        <td>Manager</td>
        <td>XYZ</td>
        <td>+098 234 568</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Ashley</td>
        <td>Marketer</td>
        <td>Abco</td>
        <td>+098 234 569</td>
      </tr>
      <tr>
        <th scope="row">4</th>
        <td>Jackie</td>
        <td>Marketer</td>
        <td>Abco</td>
        <td>+098 234 570</td>
      </tr>
    </tbody>
</table>

Dark Table

# Name Designation Company Phone
1 Tonny CEO ABC +098 234 567
2 Farguson Manager XYZ +098 234 568
3 Ashley Marketer Abco +098 234 569
4 Jackie Marketer Abco +098 234 570 
<!-- Dark Table -->
<table class="table table-dark">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Name</th>
        <th scope="col">Designation</th>
        <th scope="col">Company</th>
        <th scope="col">Phone</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Tonny</td>
        <td>CEO</td>
        <td>ABC</td>
        <td>+098 234 567</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Farguson</td>
        <td>Manager</td>
        <td>XYZ</td>
        <td>+098 234 568</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Ashley</td>
        <td>Marketer</td>
        <td>Abco</td>
        <td>+098 234 569</td>
      </tr>
      <tr>
        <th scope="row">4</th>
        <td>Jackie</td>
        <td>Marketer</td>
        <td>Abco</td>
        <td>+098 234 570</td>
      </tr>
    </tbody>
</table>

Striped Table

# Name Designation Company Phone
1 Tonny CEO ABC +098 234 567
2 Farguson Manager XYZ +098 234 568
3 Ashley Marketer Abco +098 234 569
# Name Designation Company Phone
1 Tonny CEO ABC +098 234 567
2 Farguson Manager XYZ +098 234 568
3 Ashley Marketer Abco +098 234 569 
<!-- Striped Table -->
<table class="table table-dark table-striped">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Name</th>
        <th scope="col">Designation</th>
        <th scope="col">Company</th>
        <th scope="col">Phone</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Tonny</td>
        <td>CEO</td>
        <td>ABC</td>
        <td>+098 234 567</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Farguson</td>
        <td>Manager</td>
        <td>XYZ</td>
        <td>+098 234 568</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Ashley</td>
        <td>Marketer</td>
        <td>Abco</td>
        <td>+098 234 569</td>
      </tr>
      <tr>
        <th scope="row">4</th>
        <td>Jackie</td>
        <td>Marketer</td>
        <td>Abco</td>
        <td>+098 234 570</td>
      </tr>
    </tbody>
</table>

Bordered Table

# Name Designation Company Phone
1 Tonny CEO ABC +098 234 567
2 Farguson Manager XYZ +098 234 568
3 Ashley Marketer Abco +098 234 569
# Name Designation Company Phone
1 Tonny CEO ABC +098 234 567
2 Farguson Manager XYZ +098 234 568
3 Ashley Marketer Abco +098 234 569
# Name Designation Company Phone
1 Tonny CEO ABC +098 234 567
2 Farguson Manager XYZ +098 234 568
3 Ashley Marketer Abco +098 234 569 
<!-- Bordered Table -->
<table class="table table-dark table-striped table-bordered">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Name</th>
        <th scope="col">Designation</th>
        <th scope="col">Company</th>
        <th scope="col">Phone</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Tonny</td>
        <td>CEO</td>
        <td>ABC</td>
        <td>+098 234 567</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Farguson</td>
        <td>Manager</td>
        <td>XYZ</td>
        <td>+098 234 568</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Ashley</td>
        <td>Marketer</td>
        <td>Abco</td>
        <td>+098 234 569</td>
      </tr>
      <tr>
        <th scope="row">4</th>
        <td>Jackie</td>
        <td>Marketer</td>
        <td>Abco</td>
        <td>+098 234 570</td>
      </tr>
    </tbody>
</table>

Color Bordered Table

# Name Designation Company Phone
1 Tonny CEO ABC +098 234 567
2 Farguson Manager XYZ +098 234 568
3 Ashley Marketer Abco +098 234 569
# Name Designation Company Phone
1 Tonny CEO ABC +098 234 567
2 Farguson Manager XYZ +098 234 568
3 Ashley Marketer Abco +098 234 569
# Name Designation Company Phone
1 Tonny CEO ABC +098 234 567
2 Farguson Manager XYZ +098 234 568
3 Ashley Marketer Abco +098 234 569 
<!-- Color Bordered Table -->
<table class="table table-dark table-striped table-bordered border-warning">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Name</th>
        <th scope="col">Designation</th>
        <th scope="col">Company</th>
        <th scope="col">Phone</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Tonny</td>
        <td>CEO</td>
        <td>ABC</td>
        <td>+098 234 567</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Farguson</td>
        <td>Manager</td>
        <td>XYZ</td>
        <td>+098 234 568</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Ashley</td>
        <td>Marketer</td>
        <td>Abco</td>
        <td>+098 234 569</td>
      </tr>
      <tr>
        <th scope="row">4</th>
        <td>Jackie</td>
        <td>Marketer</td>
        <td>Abco</td>
        <td>+098 234 570</td>
      </tr>
    </tbody>
</table>

Variants Table

On Tables

# Name Designation Company Phone
1 Tonny CEO ABC +098 234 567
2 Farguson Manager XYZ +098 234 568
3 Ashley Marketer Abco +098 234 569
# Name Designation Company Phone
1 Tonny CEO ABC +098 234 567
2 Farguson Manager XYZ +098 234 568
3 Ashley Marketer Abco +098 234 569
# Name Designation Company Phone
1 Tonny CEO ABC +098 234 567
2 Farguson Manager XYZ +098 234 568
3 Ashley Marketer Abco +098 234 569

On Rows

# Name Designation Company Phone
1 Tonny CEO ABC +098 234 567
2 Farguson Manager XYZ +098 234 568
3 Ashley Marketer Abco +098 234 569
4 Henry Marketer Abco +098 234 569
5 Pitter Marketer Abco +098 234 569
6 Allex Marketer Abco +098 234 569
7 Jackie Marketer Abco +098 234 569 
<!-- Variants Table -->
<h2 class="h6 text-warning mb-3">On Tables</h2>
<table class="table table-primary table-bordered">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Name</th>
            <th scope="col">Designation</th>
            <th scope="col">Company</th>
            <th scope="col">Phone</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Tonny</td>
            <td>CEO</td>
            <td>ABC</td>
            <td>+098 234 567</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Farguson</td>
            <td>Manager</td>
            <td>XYZ</td>
            <td>+098 234 568</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Ashley</td>
            <td>Marketer</td>
            <td>Abco</td>
            <td>+098 234 569</td>
        </tr>
    </tbody>
</table>

<hr>

<h2 class="h6 text-warning mb-3">On Rows</h2>
<table class="table">
    <thead>
        <tr class="table-primary">
            <th scope="col">#</th>
            <th scope="col">Name</th>
            <th scope="col">Designation</th>
            <th scope="col">Company</th>
            <th scope="col">Phone</th>
        </tr>
    </thead>
    <tbody>
        <tr class="table-secondary">
            <th scope="row">1</th>
            <td>Tonny</td>
            <td>CEO</td>
            <td>ABC</td>
            <td>+098 234 567</td>
        </tr>
        <tr class="table-success">
            <th scope="row">2</th>
            <td>Farguson</td>
            <td>Manager</td>
            <td>XYZ</td>
            <td>+098 234 568</td>
        </tr>
        <tr class="table-info">
            <th scope="row">3</th>
            <td>Ashley</td>
            <td>Marketer</td>
            <td>Abco</td>
            <td>+098 234 569</td>
        </tr>
        <tr class="table-warning">
            <th scope="row">4</th>
            <td>Henry</td>
            <td>Marketer</td>
            <td>Abco</td>
            <td>+098 234 569</td>
        </tr>
        <tr class="table-danger">
            <th scope="row">5</th>
            <td>Pitter</td>
            <td>Marketer</td>
            <td>Abco</td>
            <td>+098 234 569</td>
        </tr>
        <tr class="table-light">
            <th scope="row">6</th>
            <td>Allex</td>
            <td>Marketer</td>
            <td>Abco</td>
            <td>+098 234 569</td>
        </tr>
        <tr class="table-dark">
            <th scope="row">7</th>
            <td>Jackie</td>
            <td>Marketer</td>
            <td>Abco</td>
            <td>+098 234 569</td>
        </tr>
    </tbody>
</table>

Hoverable Table

# Name Designation Company Phone
1 Tonny CEO ABC +098 234 567
2 Farguson Manager XYZ +098 234 568
3 Ashley Marketer Abco +098 234 569
4 Jackie Marketer Abco +098 234 570
# Name Designation Company Phone
1 Tonny CEO ABC +098 234 567
2 Farguson Manager XYZ +098 234 568
3 Ashley Marketer Abco +098 234 569
4 Jackie Marketer Abco +098 234 570 
<!-- Hoverable Table -->
<table class="table table-dark table-hover">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Name</th>
        <th scope="col">Designation</th>
        <th scope="col">Company</th>
        <th scope="col">Phone</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Tonny</td>
        <td>CEO</td>
        <td>ABC</td>
        <td>+098 234 567</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Farguson</td>
        <td>Manager</td>
        <td>XYZ</td>
        <td>+098 234 568</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Ashley</td>
        <td>Marketer</td>
        <td>Abco</td>
        <td>+098 234 569</td>
      </tr>
      <tr>
        <th scope="row">4</th>
        <td>Jackie</td>
        <td>Marketer</td>
        <td>Abco</td>
        <td>+098 234 570</td>
      </tr>
    </tbody>
</table>