Main Menu

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>