Bootstrap 5 Table

Bootstrap 5 table has a light padding and horizontal dividers. Table is used to display data in tabular format like calendars, date pickers etc.

To style the table using bootstrap class use "table" class in the table tag, then extend with optional modifier classes.

<h2>Developers List</h2>
<table class="table"> 
    <tr> <th>S.No</th> <th>Developer Name</th> <th>Language</th> <th>Year</th> </tr>
    <tr> <td>1</td> <td>Dennis Ritchie</td> <td>C-Language</td> <td>1972</td> </tr>
    <tr> <td>2</td> <td>James Gosling</td> <td>JAVA</td> <td>1995</td></tr>
    <tr> <td>3</td> <td>Tim Berners Lee</td> <td>HTML</td> <td>1991</td> </tr>
    <tr> <td>4</td> <td>Rasmus Lerdorf</td> <td>PHP</td> <td>1994</td> </tr>
</table>

Bootstrap provide wide variety of colors to apply on table background or text. Use .table-primary or text-bg-primary on table, row, cell.

<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>

<!-- On rows -->
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells ('td' or 'th') -->
<tr>
  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

Striped Rows - The .table-striped class adds zebra-stripes to a table.

<div class="container">
    <h2>Developers List</h2>
    <table class="table table-striped"> 
        ...
    </table>
</div> 

Striped Column - The .table-striped-columns class adds zebra-stripes to a table columns.

<div class="container">
    <h2>Developers List</h2>
    <table class="table table-striped-columns"> 
        ...
    </table>
</div> 

Hover Rows - The .table-hover class adds a hover effect (grey background color) on table row.

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

Add .table-bordered for borders on all sides of the table and cells.

<table class="table table-bordered"></table>
<table class="table table-bordered border-primary"></table>
<table class="table table-borderless"></table>

The .table-sm class makes a table more compact by cutting cell padding in half.

<table class="table table-sm"> </table>

Responsive tables allow tables to be scrolled horizontally. Use .table-responsive{-sm|-md|-lg|-xl|-xxl} as needed to create responsive tables up to a particular breakpoint.

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