# Bootstrap 5 Table



* The .table class adds basic styling to a table: A basic Bootstrap 5 table has a light padding and horizontal dividers.
* Basic table: The .table class adds basic styling to a table:
* The .table-bordered class adds borders on all sides of the table and cells:
* The .table-borderless class removes borders from the table:
* The .table-striped class adds zebra-stripe rows to a table:
* Contextual classes can be used to color the table, table rows or table cells.
   - The classes that can be used are: .table-primary, .table-success, .table-info, .table-warning, .table-danger, .table-active, .table-secondary, .table-light and .table-dark:
* The .table-hover class adds a hover effect (grey background color) on table rows:
* The .table-sm class makes the table smaller by cutting cell padding in half:
* The .table-responsive class adds a scrollbar to the table when needed (when it is too big horizontally):
* You can also decide when the table should get a scrollbar, depending on the screen width:
   - Class  Screen width
   - .table-responsive-sm   < 576px
   - .table-responsive-md   < 768px
   - .table-responsive-lg   < 992px
   - .table-responsive-xl   < 1200px
   - .table-responsive-xxl  < 1400px

    <div class="table-responsive-sm">
        <table class="table">
            ...
        </table>
    </div>

    <h2>Striped Rows</h2>
    <p>The .table-striped class adds zebra-stripes to a table:</p>

<div class="container mt-3">
  <table class="table table-striped">
    <thead class="table-info">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>


              <thead>
                <tr class="table__header">
                  <th class="table__cell">

                  </th>
                  <th class="table__cell">Service</th>
                  <th class="table__cell">Contract no.</th>
                  <th class="table__cell">Additional information</th>
                  <th class="table__cell">Active since</th>
                  <th class="table__cell">Renews on</th>
                </tr>
              </thead>


<table class="table table--responsive" id="table__0">

              <colgroup>
                <col width="52px">
                <col width="50%">
                <col width="112px">
                <col width="50%">
                <col width="104px">
                <col width="104px">
              </colgroup>

              <thead>
                <tr class="table__header">
                  <th class="table__cell">

                  </th>
                  <th class="table__cell">Service</th>
                  <th class="table__cell">Contract no.</th>
                  <th class="table__cell">Additional information</th>
                  <th class="table__cell">Active since</th>
                  <th class="table__cell">Renews on</th>
                </tr>
              </thead>

              <tbody>





  <tr class="table__row">

    <td class="table__cell table__cell--vertical-align-center">
      <img height="32" width="auto" src="/account/images/fragments/svg-icons/contract.svg">
    </td>

    <td class="table__cell">
      <ul>

        <li class="paragraph--activating paragraph--bold paragraph--ellipsized">
          <a class="link" href="/account/subscriptions/98581085?linkId=ct.txt.contract-in-table">IONOS Agency Partner Program Membership</a>
        </li>






          <li>Contract</li>

      </ul>
    </td>

    <td class="table__cell">
      <strong>98581085</strong>
    </td>

    <td class="table__cell contract-domains-cell">







      Free contract










</td>

    <td class="table__cell">
      <span>10/26/2023</span>

    </td>

    <td class="table__cell renews-on-cell">

      <span class="large-hidden medium-hidden">-</span>
    </td>
  </tr>








  <tr class="table__row">

    <td class="table__cell table__cell--vertical-align-center">
      <img height="32" width="auto" src="/account/images/fragments/svg-icons/contract.svg">
    </td>

    <td class="table__cell">
      <ul>

        <li class="paragraph--activating paragraph--bold paragraph--ellipsized">
          <a class="link" href="/account/subscriptions/98581086?linkId=ct.txt.contract-in-table">IONOS VPS Linux L - Server26</a>
        </li>






          <li>Contract</li>

      </ul>
    </td>

    <td class="table__cell">
      <strong>98581086</strong>
    </td>

    <td class="table__cell contract-domains-cell">
















</td>

    <td class="table__cell">
      <span>10/26/2023</span>

    </td>

    <td class="table__cell renews-on-cell">
      <span>10/25/2024</span>

    </td>
  </tr>










  <tr class="table__row">

    <td class="table__cell table__cell--vertical-align-center no-icon-cell">
    </td>

    <td class="table__cell">
      <ul>

        <li class="paragraph--activating paragraph--ellipsized">
          <a class="link" href="/account/subscriptions/98581086/982071387-9?linkId=ct.txt.domain-in-table">eng2x.com</a>
        </li>






          <li>Additional domain</li>

      </ul>
    </td>

    <td class="table__cell">
      98581086
    </td>

    <td class="table__cell contract-domains-cell small-hidden">
      <span>External domain</span>
    </td>

    <td class="table__cell">
      <span>10/27/2023</span>

    </td>

    <td class="table__cell renews-on-cell">

      <span class="large-hidden medium-hidden">-</span>
    </td>
  </tr>






  <tr class="table__row">

    <td class="table__cell table__cell--vertical-align-center">
      <img height="32" width="auto" src="/account/images/fragments/svg-icons/contract.svg">
    </td>

    <td class="table__cell">
      <ul>

        <li class="paragraph--activating paragraph--bold paragraph--ellipsized">
          <a class="link" href="/account/subscriptions/100022315?linkId=ct.txt.contract-in-table">IONOS VPS Linux XL - Server28</a>
        </li>






          <li>Contract</li>

      </ul>
    </td>

    <td class="table__cell">
      <strong>100022315</strong>
    </td>

    <td class="table__cell contract-domains-cell">
















</td>

    <td class="table__cell">
      <span>01/29/2024</span>

    </td>

    <td class="table__cell renews-on-cell">
      <span>01/28/2025</span>

    </td>
  </tr>








  <tr class="table__row">

    <td class="table__cell table__cell--vertical-align-center">
      <img height="32" width="auto" src="/account/images/fragments/svg-icons/contract.svg">
    </td>

    <td class="table__cell">
      <ul>

        <li class="paragraph--activating paragraph--bold paragraph--ellipsized">
          <a class="link" href="/account/subscriptions/102121974?linkId=ct.txt.contract-in-table">IONOS VPS Linux L</a>
        </li>






          <li>Contract</li>

      </ul>
    </td>

    <td class="table__cell">
      <strong>102121974</strong>
    </td>

    <td class="table__cell contract-domains-cell">
















</td>

    <td class="table__cell">
      <span>07/01/2024</span>

    </td>

    <td class="table__cell renews-on-cell">
      <span>06/30/2025</span>

    </td>
  </tr>










              </tbody>

            </table>


  <h2>Bordered Table</h2>
  <p>The .table-bordered class adds borders on all sides of the table and the cells:</p>
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>