# Basic Tables header small text goes here...

#### Default Table

# | Username | Email Address
--- | --- | ---
1 | Nicky Almera | nicky@hotmail.com
2 | Edmund Wong | edmund@yahoo.com
3 | Harvinder Singh | harvinder@gmail.com

    <table class="table">
      ...
    </table>

#### Hover Table

# | Username | Email Address
--- | --- | ---
1 | Nicky Almera | nicky@hotmail.com
2 | Edmund Wong | edmund@yahoo.com
3 | Harvinder Singh | harvinder@gmail.com

    <table class="table table-hover">
      ...
    </table>

#### Table Small

# | Username | Email Address
--- | --- | ---
1 | Nicky Almera | nicky@hotmail.com
2 | Edmund Wong | edmund@yahoo.com
3 | Harvinder Singh | harvinder@gmail.com

    <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 | nicky@hotmail.com
2 | Edmund Wong | edmund@yahoo.com
3 | Harvinder Singh | harvinder@gmail.com

    <table class="table table-striped">
      ...
    </table>

#### Bordered Table

# | Username | Email Address
--- | --- | ---
1 | Nicky Almera | nicky@hotmail.com
2 | Edmund Wong | edmund@yahoo.com
3 | Harvinder Singh | harvinder@gmail.com

    <table class="table table-bordered">
      ...
    </table>

#### UI Elements in Table NEW

# | Username | Email Address |
--- | --- | --- | ---
| Nicky Almera | nicky@hotmail.com | Edit Delete
| Edmund Wong | edmund@yahoo.com | Settings
| Harvinder Singh | harvinder@gmail.com | Edit Delete

    <table class="table">
      <tbody>
        <tr>
          <!-- with image -->
          <td class="with-img">...</td>

          <!-- with button -->
          <td class="with-btn">...</td>

          <!-- with button group -->
          <td class="with-btn-group">...</td>
         </tr>
      </tbody>
    </table>

#### Form Elements in Table NEW

| Username | Email Address
--- | --- | ---
| Nicky Almera | nicky@hotmail.com
| Edmund Wong | edmund@yahoo.com
|  | harvinder@gmail.com
| @ | terry@gmail.com

    <table class="table table-td-valign-middle">
      <tbody>
        <tr>
          <!-- with checkbox -->
          <td class="with-checkbox">...</td>

          <!-- with radio -->
          <td class="with-radio">...</td>

          <!-- with form input -->
          <td class="with-form-control">...</td>

          <!-- with input group -->
          <td class="with-input-control">...</td>
        </tr>
      </tbody>
    </table>

#### Table Row Classes

# | Username | Email Address
--- | --- | ---
1 | Nicky Almera | nicky@hotmail.com
2 | Terry Khoo | terry@gmail.com
3 | Edmund Wong | edmund@yahoo.com
4 | Harvinder Singh | harvinder@gmail.com
5 | Terry Khoo | terry@gmail.com

    <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>