Categories
Bootstrap HTML

Bootstrap 5 — More Table Styles

Spread the love

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to style tables with Bootstrap 5.

Tables without Borders

We can create a table without borders with the .table-borderless class:

<table class="table table-borderless">  
  <thead>  
    <tr>  
      <th scope="col">#</th>  
      <th scope="col">First</th>  
      <th scope="col">Last</th>  
      <th scope="col">Age</th>  
    </tr>  
  </thead>  
  <tbody>  
    <tr>  
      <th scope="row">1</th>  
      <td>james</td>  
      <td>smith</td>  
      <td>20</td>  
    </tr>  
    <tr>  
      <th scope="row">2</th>  
      <td>mary</td>  
      <td>jones</td>  
      <td>20</td>  
    </tr>  
    <tr>  
      <th scope="row">3</th>  
      <td colspan="2">Larry</td>  
      <td>50</td>  
    </tr>  
  </tbody>  
</table>

It also works with other variants:

<table class="table table-dark table-borderless">  
  <thead>  
    <tr>  
      <th scope="col">#</th>  
      <th scope="col">First</th>  
      <th scope="col">Last</th>  
      <th scope="col">Age</th>  
    </tr>  
  </thead>  
  <tbody>  
    <tr>  
      <th scope="row">1</th>  
      <td>james</td>  
      <td>smith</td>  
      <td>20</td>  
    </tr>  
    <tr>  
      <th scope="row">2</th>  
      <td>mary</td>  
      <td>jones</td>  
      <td>20</td>  
    </tr>  
    <tr>  
      <th scope="row">3</th>  
      <td colspan="2">Larry</td>  
      <td>50</td>  
    </tr>  
  </tbody>  
</table>

Small Tables

We can use the .table-sm class to make a table more compact by reducing the padding in half:

<table class="table table-sm">  
  <thead>  
    <tr>  
      <th scope="col">#</th>  
      <th scope="col">First</th>  
      <th scope="col">Last</th>  
      <th scope="col">Age</th>  
    </tr>  
  </thead>  
  <tbody>  
    <tr>  
      <th scope="row">1</th>  
      <td>james</td>  
      <td>smith</td>  
      <td>20</td>  
    </tr>  
    <tr>  
      <th scope="row">2</th>  
      <td>mary</td>  
      <td>jones</td>  
      <td>20</td>  
    </tr>  
    <tr>  
      <th scope="row">3</th>  
      <td colspan="2">Larry</td>  
      <td>50</td>  
    </tr>  
  </tbody>  
</table>

This also works with other table variants:

<table class="table table-dark table-sm">  
  <thead>  
    <tr>  
      <th scope="col">#</th>  
      <th scope="col">First</th>  
      <th scope="col">Last</th>  
      <th scope="col">Age</th>  
    </tr>  
  </thead>  
  <tbody>  
    <tr>  
      <th scope="row">1</th>  
      <td>james</td>  
      <td>smith</td>  
      <td>20</td>  
    </tr>  
    <tr>  
      <th scope="row">2</th>  
      <td>mary</td>  
      <td>jones</td>  
      <td>20</td>  
    </tr>  
    <tr>  
      <th scope="row">3</th>  
      <td colspan="2">Larry</td>  
      <td>50</td>  
    </tr>  
  </tbody>  
</table>

Vertical Alignment

The vertical alignment of tables can be changed with Bootstrap 5 classes.

They can be changed in cells, tables, or table rows:

<table class="table table-sm table-dark">  
  <div class="table-responsive">  
    <table class="table align-middle">  
      <thead>  
        <tr>  
          ...  
        </tr>  
      </thead>  
      <tbody>  
        <tr class="align-bottom">  
          ...  
        </tr>  
        <tr>  
          <td>...</td>  
          <td class="align-top">aligned to the top.</td>  
          <td>...</td>  
        </tr>  
      </tbody>  
    </table>  
  </div>  
</table>

We have the align-top , align-middle , and align-bottom classes to make the alignments.

Nesting

Border styles, active styles, and table variants aren’t inherited by nested tables.

For example, we can write:

<table class="table table-striped">  
  <thead>  
    <tr class="align-bottom">  
      <th scope="col">#</th>  
      <th scope="col">First</th>  
      <th scope="col">Last</th>  
      <th scope="col">Age</th>  
    </tr>  
  </thead>  
  <tbody> <tr>  
      <th scope="row">1</th>  
      <td>james</td>  
      <td>smith</td>  
      <td>20</td>  
    </tr> <tr>  
      <td colspan="4">  
        <table class="table align-bottom">  
          <thead>  
            <tr class="align-bottom">  
              <th scope="col">#</th>  
              <th scope="col">First</th>  
              <th scope="col">Last</th>  
              <th scope="col">Age</th>  
            </tr>  
          </thead>  
          <tbody>  
            <tr>  
              <th scope="row">1</th>  
              <td>james</td>  
              <td>smith</td>  
              <td>20</td>  
            </tr>  
            <tr>  
              <th scope="row">2</th>  
              <td>mary</td>  
              <td>jones</td>  
              <td>20</td>  
            </tr>  
            <tr>  
              <th scope="row">3</th>  
              <td colspan="2">Larry</td>  
              <td>50</td>  
            </tr>  
          </tbody>  
        </table>  
      </td>  
    </tr>  
  </tbody>  
</table>

to apply styles to nested tables.

The styles have to be applied to each table individually.

Table Head

We can use the .table-light or .table-dark classes to make the thead appear light or dark gray.

For example, we can write:

<table class="table">  
  <thead class="table-light">  
    <tr>  
      <th scope="col">#</th>  
      <th scope="col">First</th>  
      <th scope="col">Last</th>  
      <th scope="col">Age</th>  
    </tr>  
  </thead>  
  <tbody>  
    <tr>  
      <th scope="row">1</th>  
      <td>james</td>  
      <td>smith</td>  
      <td>20</td>  
    </tr>  
    <tr>  
      <th scope="row">2</th>  
      <td>mary</td>  
      <td>jones</td>  
      <td>20</td>  
    </tr>  
    <tr>  
      <th scope="row">3</th>  
      <td colspan="2">Larry</td>  
      <td>50</td>  
    </tr>  
  </tbody>  
</table>

to make the table heading light gray.

We can make it dark gray with the table-dark class:

<table class="table">  
  <thead class="table-dark">  
    <tr>  
      <th scope="col">#</th>  
      <th scope="col">First</th>  
      <th scope="col">Last</th>  
      <th scope="col">Age</th>  
    </tr>  
  </thead>  
  <tbody>  
    <tr>  
      <th scope="row">1</th>  
      <td>james</td>  
      <td>smith</td>  
      <td>20</td>  
    </tr>  
    <tr>  
      <th scope="row">2</th>  
      <td>mary</td>  
      <td>jones</td>  
      <td>20</td>  
    </tr>  
    <tr>  
      <th scope="row">3</th>  
      <td colspan="2">Larry</td>  
      <td>50</td>  
    </tr>  
  </tbody>  
</table>

Table Foot

We can add a footer to a table with the tfoot element.

For example, we can write:

<table class="table">  
  <thead class="table-dark">  
    <tr>  
      <th scope="col">#</th>  
      <th scope="col">First</th>  
      <th scope="col">Last</th>  
      <th scope="col">Age</th>  
    </tr>  
  </thead>  
  <tbody>  
    <tr>  
      <th scope="row">1</th>  
      <td>james</td>  
      <td>smith</td>  
      <td>20</td>  
    </tr>  
    <tr>  
      <th scope="row">2</th>  
      <td>mary</td>  
      <td>jones</td>  
      <td>20</td>  
    </tr>  
    <tr>  
      <th scope="row">3</th>  
      <td colspan="2">Larry</td>  
      <td>50</td>  
    </tr>  
  </tbody>  
  <tfoot>  
    <tr>  
      <th>footer</th>  
      <td>footer</td>  
      <td>footer</td>  
      <td>footer</td>  
    </tr>  
  </tfoot>  
</table>

to add a footer.

Captions

We can add the caption tag to add a caption to label the table.

For example, we can write:

<table class="table">  
  <caption>List of people</caption>  
  <thead class="table-dark">  
    <tr>  
      <th scope="col">#</th>  
      <th scope="col">First</th>  
      <th scope="col">Last</th>  
      <th scope="col">Age</th>  
    </tr>  
  </thead>  
  <tbody>  
    <tr>  
      <th scope="row">1</th>  
      <td>james</td>  
      <td>smith</td>  
      <td>20</td>  
    </tr>  
    <tr>  
      <th scope="row">2</th>  
      <td>mary</td>  
      <td>jones</td>  
      <td>20</td>  
    </tr>  
    <tr>  
      <th scope="row">3</th>  
      <td colspan="2">Larry</td>  
      <td>50</td>  
    </tr>  
  </tbody>  
  <tfoot>  
    <tr>  
      <th>footer</th>  
      <td>footer</td>  
      <td>footer</td>  
      <td>footer</td>  
    </tr>  
  </tfoot>  
</table>

to add a label to the bottom of the table.

Conclusion

We can add tables with various styles.

Nested tables have to have styles applied to them individually.

Leave a Reply

Your email address will not be published. Required fields are marked *