Bootstrap - Tables

Basic Table

To create a basic table in Bootstrap, use the .table class on the <table> element. This class applies styling to the table, such as padding, background color, and borders.

<table class="table">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
      <td>Row 1, Cell 3</td>
    </tr>
    <tr>
      <td>Row 2, Cell 1</td>
      <td>Row 2, Cell 2</td>
      <td>Row 2, Cell 3</td>
    </tr>
  </tbody>
</table>

A <table> element with the .table class applied to it. Inside the table, there is a <thead> element for the header, with a row (<tr>) and three header cells (<th>) for the column names.

The <tbody> element represents the table body and contains the data rows. Each row is defined by a <tr> element, and each cell within a row is represented by a <td> element.

Bootstrap provides classes to style the table:

You can apply these classes with the .table class to customize the look of your table.

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

This will create a table with borders and zebra-striping. Include the Bootstrap CSS file in your project to use these classes and styles.

By using Bootstrap's table classes, you can create clean and formatted tables that are consistent with your Bootstrap-based website or application.

Striped Rows

To add striped rows to a Bootstrap table, use the .table-striped class along with the .table class on the <table> element. This will apply alternating background colors to the rows, making it easier to read and follow the data.

<table class="table table-striped">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
      <td>Row 1, Cell 3</td>
    </tr>
    <tr>
      <td>Row 2, Cell 1</td>
      <td>Row 2, Cell 2</td>
      <td>Row 2, Cell 3</td>
    </tr>
    <tr>
      <td>Row 3, Cell 1</td>
      <td>Row 3, Cell 2</td>
      <td>Row 3, Cell 3</td>
    </tr>
  </tbody>
</table>

The .table-striped class is added to the <table> element along with the .table class. This applies the striped row styling to the table.

The .table-striped class uses the :nth-child CSS selector to apply different background colors to odd and even rows. By default, the odd rows have a light gray background color, while the even rows have a white background color.

Striped rows help to visually separate the data and make it simpler to read, especially when dealing with large tables with many rows. The alternating background colors guide the user's eyes and make it easier to follow the data horizontally across the row.

Keep in mind that the .table-striped class only works with <tr> elements within the <tbody> element. If you have a <thead> or <tfoot> element in your table, the striped styling will not be applied to the rows within those sections.

Bordered Table

To create a bordered table in Bootstrap, use the .table-bordered class with the .table class on the <table> element. This will add borders to all sides of the table and cells, making it clear and easy to see different rows and columns.

<table class="table table-bordered">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
      <td>Row 1, Cell 3</td>
    </tr>
    <tr>
      <td>Row 2, Cell 1</td>
      <td>Row 2, Cell 2</td>
      <td>Row 2, Cell 3</td>
    </tr>
    <tr>
      <td>Row 3, Cell 1</td>
      <td>Row 3, Cell 2</td>
      <td>Row 3, Cell 3</td>
    </tr>
  </tbody>
</table>

The .table-bordered class is added to the <table> element with the .table class. This puts borders on all sides of the table and cells.

The borders are made using the border CSS property, which is set to a thin, solid line with a default color. The border is put on the table itself and each cell within the table.

Using bordered tables can help to visually separate the data and make it easier to see the structure of the table. It is very useful when you have complex tables with many rows and columns, as the borders help to define the boundaries between cells.

You can combine the .table-bordered class with other Bootstrap table classes to change the look of your table.

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

This will create a table with borders and striped rows, combining the visual changes of both classes.

Hover Rows

To add a hover effect to table rows in Bootstrap, use the .table-hover class with the .table class on the <table> element. This will add a background color to the table rows when hovered over, making it easier to highlight specific rows of data.

<table class="table table-hover">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
      <td>Row 1, Cell 3</td>
    </tr>
    <tr>
      <td>Row 2, Cell 1</td>
      <td>Row 2, Cell 2</td>
      <td>Row 2, Cell 3</td>
    </tr>
    <tr>
      <td>Row 3, Cell 1</td>
      <td>Row 3, Cell 2</td>
      <td>Row 3, Cell 3</td>
    </tr>
  </tbody>
</table>

The .table-hover class is added to the <table> element along with the .table class. This enables the hover effect on the table rows.

When a user hovers over a row within the <tbody> element, the .table-hover class adds a background color to that specific row. By default, the hover background color is a light gray.

The hover effect helps to highlight the row being used, making it easier for users to focus on specific data points. It provides visual feedback and improves the table's interactivity.

You can combine the .table-hover class with other Bootstrap table classes to further change the look of your table.

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

This will create a table with a hover effect, striped rows, and borders, providing a visually appealing and interactive experience for users.

The .table-hover class is useful when you have tables with many rows of data, as it helps users quickly find the row they are interested in. It improves the readability and usability of the table, especially in scenarios where users need to scan through large amounts of tabular data.

Condensed Table

To make a table more compact and reduce the cell padding, you can use the .table-sm class with the .table class on the <table> element. This class makes the table more condensed by cutting the cell padding in half, allowing more data to fit within a smaller space.

<table class="table table-sm">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
      <td>Row 1, Cell 3</td>
    </tr>
    <tr>
      <td>Row 2, Cell 1</td>
      <td>Row 2, Cell 2</td>
      <td>Row 2, Cell 3</td>
    </tr>
    <tr>
      <td>Row 3, Cell 1</td>
      <td>Row 3, Cell 2</td>
      <td>Row 3, Cell 3</td>
    </tr>
  </tbody>
</table>

By adding the .table-sm class to the <table> element with the .table class, the table becomes more compact. The .table-sm class reduces the cell padding by 50%, making the table rows and cells closer together.

This is useful when you have limited space and need to fit more data within a smaller area. It lets you show more rows of data without the table taking up too much vertical space.

However, it's important to note that reducing the cell padding may impact the readability of the table, especially if the cell content is long or complex. Make sure to consider the balance between compactness and readability when using the .table-sm class.

You can combine the .table-sm class with other Bootstrap table classes to further customize the look of your table.

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

This creates a compact table with striped rows and a hover effect, providing a visually appealing and space-efficient way to present tabular data.

The .table-sm class is particularly handy when working with dashboards, data-heavy applications, or responsive designs where space is limited. It lets you pack more information into a smaller area without sacrificing the table's functionality.

Contextual Classes

Bootstrap provides contextual classes that allow you to add colors to table rows or cells, providing visual meaning or highlighting important information. These classes are useful for drawing attention to specific data points or indicating the status or category of a row or cell.

To apply contextual colors to table rows or cells, you can use the following classes:

To apply these classes to a table row, add the desired class to the <tr> element.

<table class="table">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-primary">
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
      <td>Row 1, Cell 3</td>
    </tr>
    <tr class="table-success">
      <td>Row 2, Cell 1</td>
      <td>Row 2, Cell 2</td>
      <td>Row 2, Cell 3</td>
    </tr>
    <tr class="table-danger">
      <td>Row 3, Cell 1</td>
      <td>Row 3, Cell 2</td>
      <td>Row 3, Cell 3</td>
    </tr>
  </tbody>
</table>

To apply contextual classes to individual cells, add the desired class to the <td> or <th> element.

<table class="table">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="table-primary">Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
    </tr>
    <tr>
      <td>Cell 4</td>
      <td class="table-success">Cell 5</td>
      <td>Cell 6</td>
    </tr>
    <tr>
      <td>Cell 7</td>
      <td>Cell 8</td>
      <td class="table-danger">Cell 9</td>
    </tr>
  </tbody>
</table>

Using contextual classes in tables helps to convey meaning, categorize data, or draw attention to important information. They provide visual cues to users, making it easier to understand and interpret the data presented in the table.

Responsive Tables

Bootstrap lets you make tables responsive, allowing them to adapt to different screen sizes and devices. By using the .table-responsive class, you can create tables that are horizontally scrollable when the content is too wide.

To make a table responsive, wrap the <table> element inside a <div> element with the .table-responsive class.

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
        <td>Row 1, Cell 3</td>
        <td>Row 1, Cell 4</td>
        <td>Row 1, Cell 5</td>
      </tr>
      <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
        <td>Row 2, Cell 3</td>
        <td>Row 2, Cell 4</td>
        <td>Row 2, Cell 5</td>
      </tr>
    </tbody>
  </table>
</div>

By wrapping the <table> element inside a <div> with the .table-responsive class, the table becomes responsive. When the content of the table is too wide to fit within the available space, a horizontal scrollbar will appear, allowing users to scroll horizontally to view the remaining columns.

Bootstrap provides extra classes to control the responsiveness of tables at specific breakpoints:

By using these classes, you can specify at which screen sizes the table should become responsive and display a horizontal scrollbar.

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

In this example, the table will become responsive on screens smaller than 768px (medium size).

Responsive tables are useful when dealing with large amounts of tabular data that may not fit within the available screen width, especially on smaller devices like mobile phones. By making the table responsive, users can easily scroll horizontally to access all the columns without breaking the layout or requiring zooming.

It's important to note that responsive tables should be used carefully, as too much horizontal scrolling can hinder the user experience. Consider the content and design of your table carefully and use responsive tables when necessary to provide a better viewing experience across different devices.

Table Head

In Bootstrap tables, you can style the table header using the <thead> element and the corresponding .thead-dark or .thead-light classes. These classes let you apply different styles to the table header, making it stand out from the table body.

To style the table header, wrap the header row (<tr>) inside a <thead> element.

<table class="table">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
      <td>Row 1, Cell 3</td>
    </tr>
    <tr>
      <td>Row 2, Cell 1</td>
      <td>Row 2, Cell 2</td>
      <td>Row 2, Cell 3</td>
    </tr>
  </tbody>
</table>

By default, the <thead> element has no special styling. However, Bootstrap provides two classes to style the table header:

1. .thead-dark: Applies a dark background color and white text color to the table header.

<table class="table">
  <thead class="thead-dark">
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    ...
  </tbody>
</table>

2. .thead-light: Applies a light gray background color and dark text color to the table header.

<table class="table">
  <thead class="thead-light">
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Using the .thead-dark or .thead-light classes, you can visually separate the table header from the table body, making it easier for users to read and understand the table structure. The contrasting colors help to differentiate the header from the rest of the table content.

You can combine the table header classes with other Bootstrap table classes to further customize the look of your table.

<table class="table table-striped">
  <thead class="thead-dark">
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    ...
  </tbody>
</table>

This creates a table with a dark header and striped rows in the table body, providing a visually appealing and structured presentation of the data.

Styling the table header using the <thead> element and the .thead-dark or .thead-light classes helps to improve the readability and organization of your table. It provides a clear separation between the header and the table body, making it easier for users to understand the structure and purpose of each column.

Table Footer

In addition to the table header, Bootstrap allows you to add a footer to a table using the <tfoot> element. The table footer is used to display summary information, totals, or additional data related to the table content.

To add a footer to a table, wrap the footer row (<tr>) inside a <tfoot> element.

<table class="table">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
      <td>Row 1, Cell 3</td>
    </tr>
    <tr>
      <td>Row 2, Cell 1</td>
      <td>Row 2, Cell 2</td>
      <td>Row 2, Cell 3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer Cell 1</td>
      <td>Footer Cell 2</td>
      <td>Footer Cell 3</td>
    </tr>
  </tfoot>
</table>

The <tfoot> element should be placed after the <tbody> element in the table structure. The footer row (<tr>) inside the <tfoot> element contains the cells (<td>) that represent the footer content.

By default, the <tfoot> element has no special styling. However, you can apply custom styles to the footer using CSS or by combining it with other Bootstrap classes.

<table class="table">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot class="table-secondary">
    <tr>
      <td>Total</td>
      <td>100</td>
      <td>200</td>
    </tr>
  </tfoot>
</table>

The .table-secondary class is applied to the <tfoot> element, giving it a light gray background color. This helps to visually separate the footer from the table body and highlight its content.

You can use the table footer to display various types of information, such as:

It's important to note that the table footer should be used sparingly and only when it adds value to the table. Overusing the footer or including unnecessary information can clutter the table and reduce its readability.

Remember to keep the footer content concise, relevant, and aligned with the purpose of the table. Use appropriate styling and formatting to make the footer stand out and convey its significance within the table structure.

Captions

Bootstrap tables allow you to add a caption to give a brief description or title for the table using the <caption> element. The caption is usually placed at the top of the table and helps to explain the purpose or content of the table.

To add a caption to a table, include the <caption> element as the first child of the <table> element.

<table class="table">
  <caption>Table Caption</caption>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
      <td>Row 1, Cell 3</td>
    </tr>
    <tr>
      <td>Row 2, Cell 1</td>
      <td>Row 2, Cell 2</td>
      <td>Row 2, Cell 3</td>
    </tr>
  </tbody>
</table>

The <caption> element should be placed immediately after the opening <table> tag. The text inside the <caption> element will be displayed as the table caption.

By default, the caption is centered above the table. You can style the caption using CSS to change its appearance, such as the font size, color, or alignment.

<table class="table">
  <caption class="text-left font-weight-bold">Table Caption</caption>
  ...
</table>

The .text-left class aligns the caption to the left, and the .font-weight-bold class makes the caption text bold. You can use other Bootstrap utility classes or custom CSS to further customize the caption style.

Table captions serve several purposes:

When adding captions to tables, consider the following:

It's important to note that while the <caption> element is supported in HTML and Bootstrap tables, it may not always be visually displayed by default in some web browsers. However, the caption is still valuable for accessibility purposes, as it provides context for screen readers and other assistive technologies.

Captions can be very helpful when working with complex or data-heavy tables. They give a quick overview of the table's purpose and help users understand the data presented in the table. Use captions carefully and make sure they add value to the table's comprehension.

Customizing Tables

Bootstrap provides default styles for tables, but you can customize the table appearance by overriding these styles or using custom CSS classes. This lets you match the table design to your needs or the style of your website.

To override the default styles of a Bootstrap table, you can use CSS to target the table elements and apply your own styles.

<style>
  .table-custom {
    background-color: #f8f9fa;
    color: #333;
    font-size: 14px;
    border: 1px solid #dee2e6;
  }

  .table-custom th {
    background-color: #e9ecef;
    color: #495057;
    font-weight: bold;
    text-transform: uppercase;
  }

  .table-custom td {
    border-top: 1px solid #dee2e6;
    padding: 12px;
  }
</style>

<table class="table table-custom">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
      <td>Row 1, Cell 3</td>
    </tr>
    <tr>
      <td>Row 2, Cell 1</td>
      <td>Row 2, Cell 2</td>
      <td>Row 2, Cell 3</td>
    </tr>
  </tbody>
</table>

A custom CSS class .table-custom is defined with styles for the table background color, text color, font size, and border. The table header (<th>) and table cells (<td>) are also styled to apply different background colors, font weights, and padding.

By applying the .table-custom class to the <table> element along with the .table class, the custom styles override the default Bootstrap table styles.

Another way to customize tables is by using custom CSS classes with Bootstrap's utility classes. Bootstrap provides utility classes that you can use to change the table appearance.

<table class="table bg-light text-dark">
  <thead>
    <tr class="bg-primary text-white">
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="font-weight-bold">Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
      <td class="text-success">Row 1, Cell 3</td>
    </tr>
    <tr>
      <td>Row 2, Cell 1</td>
      <td class="font-italic">Row 2, Cell 2</td>
      <td class="text-danger">Row 2, Cell 3</td>
    </tr>
  </tbody>
</table>

Bootstrap's utility classes are used to change the table's appearance:

• The .bg-light and .text-dark classes are applied to the <table> element to set a light background color and dark text color for the table.
• The .bg-primary and .text-white classes are applied to the table header row (<tr>) to set a primary background color and white text color for the header.
• The .font-weight-bold, .text-success, .font-italic, and .text-danger classes are applied to table cells (<td>) to change the font weight, text color, and font style for specific cells.

Using Bootstrap's utility classes, you can quickly customize the table appearance without writing separate CSS rules.

When customizing tables, consider these best practices:

Customizing tables allows you to create unique and appealing designs that match your website's style. By overriding default styles and using custom CSS classes, you can make your tables stand out and improve the user experience.

Test your custom tables on different devices and browsers to make sure they look and work as intended. Pay attention to the readability and accessibility of your tables, especially when applying custom styles.