Bootstrap Tutorial: Create Styled Tables

In this Bootstrap tutorial, you’ll learn how to use Bootstrap’s table classes to create responsive, styled tables. Bootstrap makes tables look clean and professional with minimal effort.

---

What You’ll Learn

• Creating a basic table
• Adding stripes and borders
• Styling rows and cells
• Making tables responsive

---

Prerequisites

• Basic knowledge of HTML
• A text editor (e.g., VS Code, Notepad)
• A web browser (e.g., Chrome, Firefox)

---

Step 1: Understand Bootstrap Tables

Bootstrap provides classes like table, table-striped, and table-bordered to style HTML tables. These classes enhance appearance and ensure tables adapt to different screen sizes.

Assume Bootstrap CSS is included in your project (we’ll skip the <link> tag as requested).

---

Step 2: Create a Basic Table

Start with a simple table. Use this code:

<div class="container">
    <table class="table">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Role</th>
        </tr>
        <tr>
            <td>Alice</td>
            <td>alice@example.com</td>
            <td>Designer</td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>bob@example.com</td>
            <td>Developer</td>
        </tr>
    </table>
</div>

Explanation:

• container: Centers and constrains the table.
• table: Applies Bootstrap’s base table styles (padding, alignment).
• th: Styles header cells; td: Styles data cells.

This creates a clean, minimal table.

---

Step 3: Add Stripes and Borders

Enhance the table with stripes and borders for better readability. Modify the table:

<div class="container">
    <table class="table table-striped table-bordered">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Role</th>
        </tr>
        <tr>
            <td>Alice</td>
            <td>alice@example.com</td>
            <td>Designer</td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>bob@example.com</td>
            <td>Developer</td>
        </tr>
        <tr>
            <td>Carol</td>
            <td>carol@example.com</td>
            <td>Manager</td>
        </tr>
    </table>
</div>

Explanation:

• table-striped: Adds alternating background colors to rows.
• table-bordered: Draws borders around all cells.

The table now has zebra stripes and clear cell outlines.

---

Step 4: Style Rows with Colors

You can highlight rows using contextual classes like table-success or table-warning. Try this:

<div class="container">
    <table class="table table-striped">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Status</th>
        </tr>
        <tr class="table-success">
            <td>Alice</td>
            <td>alice@example.com</td>
            <td>Active</td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>bob@example.com</td>
            <td>Pending</td>
        </tr>
        <tr class="table-warning">
            <td>Carol</td>
            <td>carol@example.com</td>
            <td>Inactive</td>
        </tr>
    </table>
</div>

Explanation:

• table-success: Applies a green background to a row.
• table-warning: Applies a yellow background to a row.

This highlights specific rows for emphasis.

---

Step 5: Make Tables Responsive

Tables can overflow on small screens. Wrap the table in a div with table-responsive to add scrollbars:

<div class="container">
    <div class="table-responsive">
        <table class="table table-bordered">
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
                <th>Role</th>
                <th>Joined</th>
            </tr>
            <tr>
                <td>1</td>
                <td>Alice</td>
                <td>alice@example.com</td>
                <td>Designer</td>
                <td>2023-01-10</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Bob</td>
                <td>bob@example.com</td>
                <td>Developer</td>
                <td>2023-02-15</td>
            </tr>
        </table>
    </div>
</div>

Explanation:

• table-responsive: Adds horizontal scrolling for wide tables on small screens.

Test this by resizing your browser; the table will scroll instead of breaking.

---

Final Code

Here’s a combined example with various table styles:

<div class="container">
    <table class="table table-striped table-bordered">
        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Status</th>
        </tr>
        <tr class="table-success">
            <td>Book</td>
            <td>$10</td>
            <td>In Stock</td>
        </tr>
        <tr>
            <td>Pen</td>
            <td>$2</td>
            <td>In Stock</td>
        </tr>
        <tr class="table-danger">
            <td>Laptop</td>
            <td>$800</td>
            <td>Out of Stock</td>
        </tr>
    </table>
</div>

---

Output

Your webpage should show:

• A striped, bordered table with three columns (Product, Price, Status).
• A green row for “Book” and a red row for “Laptop”.
• Clean, padded cells that stack neatly on mobile.

---

Next Steps

• Visit the Bootstrap Tables Docs for more classes.
• Try table-hover to add row highlighting on mouseover.
• Combine tables with Bootstrap’s grid for advanced layouts.

---

Conclusion

You’ve learned how to style tables with Bootstrap! With classes like table-striped and table-responsive, you can create attractive, functional tables. Keep experimenting to design better data displays.