Bootstrap - Bootstrap Tables and Table Styling

Bootstrap Tables provide a simple way to create clean, responsive, and visually consistent HTML tables without writing extensive custom CSS. Tables are commonly used to display structured information such as student records, employee details, product lists, order information, marks, reports, and financial data.

Bootstrap provides several predefined classes that can be applied to the standard HTML <table> element. These classes control the table's borders, row appearance, hover effects, colors, alignment, and responsiveness.

1. Basic Bootstrap Table

A basic Bootstrap table can be created by adding the table class to an HTML <table> element.

<table class="table">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Course</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>101</td>
            <td>Rahul</td>
            <td>Python</td>
        </tr>
        <tr>
            <td>102</td>
            <td>Anita</td>
            <td>Java</td>
        </tr>
    </tbody>
</table>

The table class provides basic Bootstrap styling, including appropriate padding, alignment, and horizontal separators.

2. Table Header

The <thead> element is used to define the header section of a table.

<thead>
    <tr>
        <th>ID</th>
        <th>Student Name</th>
        <th>Marks</th>
    </tr>
</thead>

Each heading is normally placed inside a <th> element. The table body is placed inside <tbody>, while individual records are represented using <tr> and <td>.

This structure also improves the semantic meaning and accessibility of the table.

3. Striped Rows

Bootstrap allows alternate rows to be visually distinguished using the table-striped class.

<table class="table table-striped">

The table-striped class gives alternating rows a different background appearance. This is particularly useful when a table contains many records because it makes it easier for users to follow information across a row.

For example:

<table class="table table-striped">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Department</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Arun</td>
            <td>Sales</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Priya</td>
            <td>Marketing</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Vijay</td>
            <td>Finance</td>
        </tr>
    </tbody>
</table>

4. Bordered Tables

The table-bordered class adds borders around the table, rows, and cells.

<table class="table table-bordered">

This style is useful when clear separation between individual cells is important.

For example, a marks table or financial report may benefit from visible borders because users can easily identify the relationship between headings and values.

5. Borderless Tables

Bootstrap also provides the table-borderless class.

<table class="table table-borderless">

This removes the normal borders between table cells while retaining Bootstrap's basic table styling.

Borderless tables can be useful when a minimal visual appearance is preferred.

6. Hoverable Rows

The table-hover class creates a hover effect when the user moves the mouse pointer over a table row.

<table class="table table-hover">

For example:

<table class="table table-hover">
    <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Stock</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Laptop</td>
            <td>50000</td>
            <td>Available</td>
        </tr>
        <tr>
            <td>Keyboard</td>
            <td>1500</td>
            <td>Available</td>
        </tr>
    </tbody>
</table>

The hover effect helps users identify the row they are currently examining.

7. Compact Tables

The table-sm class reduces the padding inside table cells.

<table class="table table-sm">

This is useful when displaying a large amount of information in a limited space.

For example, an administrative dashboard containing hundreds of records can use a compact table to display more rows without making the page excessively long.

8. Combining Table Classes

Bootstrap table classes can be combined to achieve different visual styles.

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

Here:

• table provides the basic Bootstrap table styling.

• table-striped creates alternating row backgrounds.

• table-bordered adds borders.

• table-hover adds a hover effect.

Multiple Bootstrap classes can therefore be used together depending on the requirements of the application.

9. Contextual Table Colors

Bootstrap provides contextual classes that can communicate different meanings through table rows or cells.

For example:

<table class="table">
    <thead>
        <tr>
            <th>Student</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        <tr class="table-success">
            <td>Rahul</td>
            <td>Passed</td>
        </tr>
        <tr class="table-danger">
            <td>Arun</td>
            <td>Failed</td>
        </tr>
        <tr class="table-warning">
            <td>Priya</td>
            <td>Pending</td>
        </tr>
    </tbody>
</table>

Some commonly used contextual classes include:

table-primary
table-secondary
table-success
table-danger
table-warning
table-info
table-light
table-dark

These classes can be applied to <tr>, <td>, or <th> depending on the desired result.

10. Responsive Tables

One of the most important features of Bootstrap tables is responsive handling.

Large tables can become difficult to display on mobile devices because the available screen width is limited. Bootstrap provides the table-responsive class to handle this situation.

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

If the table is wider than its container, the user can scroll horizontally instead of the table breaking the page layout.

For example:

<div class="table-responsive">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
                <th>Department</th>
                <th>Location</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>101</td>
                <td>Rahul</td>
                <td>[email protected]</td>
                <td>9876543210</td>
                <td>IT</td>
                <td>Bengaluru</td>
            </tr>
        </tbody>
    </table>
</div>

11. Responsive Breakpoints

Bootstrap also supports breakpoint-specific responsive table containers.

For example:

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

The table becomes horizontally scrollable at the specified breakpoint when necessary.

Available responsive variations include:

table-responsive-sm
table-responsive-md
table-responsive-lg
table-responsive-xl
table-responsive-xxl

This gives developers more control over how tables behave on different screen sizes.

12. Table Captions

A <caption> can be used to provide a title or description for a table.

<table class="table">
    <caption>List of Registered Students</caption>
    ...
</table>

Captions are particularly useful for accessibility because they provide context about what information the table contains.

13. Complete Example

The following example combines several Bootstrap table features:

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Table</title>

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          rel="stylesheet">
</head>

<body>

<div class="container mt-4">

    <h2>Student Information</h2>

    <div class="table-responsive">
        <table class="table table-striped table-bordered table-hover">

            <caption>Registered Student Details</caption>

            <thead class="table-dark">
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Course</th>
                    <th>Marks</th>
                    <th>Status</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>101</td>
                    <td>Rahul</td>
                    <td>Python</td>
                    <td>85</td>
                    <td class="table-success">Passed</td>
                </tr>

                <tr>
                    <td>102</td>
                    <td>Anita</td>
                    <td>Java</td>
                    <td>91</td>
                    <td class="table-success">Passed</td>
                </tr>

                <tr>
                    <td>103</td>
                    <td>Vijay</td>
                    <td>HTML</td>
                    <td>42</td>
                    <td class="table-warning">Needs Improvement</td>
                </tr>
            </tbody>

        </table>
    </div>

</div>

</body>
</html>

14. Important Bootstrap Table Classes

Class	Purpose
table	Creates the basic Bootstrap table
table-striped	Adds alternating row styling
table-bordered	Adds borders to the table
table-borderless	Removes table borders
table-hover	Adds a hover effect to rows
table-sm	Creates a more compact table
table-primary	Applies primary contextual styling
table-success	Indicates a successful or positive state
table-danger	Indicates an error or negative state
table-warning	Indicates a warning or attention state
table-info	Provides informational styling
table-dark	Creates dark table styling
table-responsive	Makes wide tables horizontally scrollable
table-responsive-md	Enables responsive scrolling from the medium breakpoint
caption-top	Places the table caption above the table

15. Advantages of Bootstrap Tables

Bootstrap tables reduce the amount of custom CSS required to create professional-looking tables. Developers can quickly change the appearance of a table by adding or removing predefined classes.

They also make it easier to maintain consistent designs across an application. For example, the same combination of table, table-striped, and table-hover can be reused throughout different pages.

Responsive table containers are particularly important for modern websites because tables that work well on desktop screens may otherwise overflow on mobile devices.

16. Best Practices

When creating Bootstrap tables, use <thead>, <tbody>, and <th> appropriately rather than using only <div> elements. Keep column headings short and meaningful, and avoid putting excessive information into a single cell.

For tables containing many columns, use table-responsive so that the content remains usable on smaller screens. Use contextual colors to communicate meaning rather than relying on color alone; important statuses should also be represented with readable text.

For large datasets, Bootstrap's table styling should generally be combined with application-level features such as pagination, sorting, filtering, or server-side data loading rather than attempting to display hundreds or thousands of records on a single page.

Conclusion

Bootstrap Tables provide a structured and flexible approach to presenting tabular information. Starting with the basic table class, developers can add features such as striped rows, borders, hover effects, compact spacing, contextual colors, captions, and responsive behavior.

The main advantage is that these features can be combined without writing large amounts of custom CSS. This makes Bootstrap tables useful for dashboards, administration panels, student management systems, e-commerce applications, reports, and other web applications where structured data needs to be presented clearly.