Tables: Basic tables, striped rows, hover rows, responsive tables

Sure, here's a detailed explanation of different types of tables in Bootstrap 4 with examples, properly indented with 4 spaces.

Basic Table

A basic table in Bootstrap 4 uses the .table class.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
    <title>Basic Table</title>
</head>
<body>
    <div class="container mt-5">
        <h2>Basic Table</h2>
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>1</th>
                    <td>John</td>
                    <td>Doe</td>
                    <td>@johndoe</td>
                </tr>
                <tr>
                    <th>2</th>
                    <td>Jane</td>
                    <td>Smith</td>
                    <td>@janesmith</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Striped Rows

To create a table with striped rows, use the .table-striped class.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
    <title>Striped Rows Table</title>
</head>
<body>
    <div class="container mt-5">
        <h2>Striped Rows Table</h2>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>1</th>
                    <td>John</td>
                    <td>Doe</td>
                    <td>@johndoe</td>
                </tr>
                <tr>
                    <th>2</th>
                    <td>Jane</td>
                    <td>Smith</td>
                    <td>@janesmith</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Hover Rows

To highlight rows on hover, use the .table-hover class.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
    <title>Hover Rows Table</title>
</head>
<body>
    <div class="container mt-5">
        <h2>Hover Rows Table</h2>
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>1</th>
                    <td>John</td>
                    <td>Doe</td>
                    <td>@johndoe</td>
                </tr>
                <tr>
                    <th>2</th>
                    <td>Jane</td>
                    <td>Smith</td>
                    <td>@janesmith</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Responsive Table

To make a table responsive, wrap it in a .table-responsive class.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
    <title>Responsive Table</title>
</head>
<body>
    <div class="container mt-5">
        <h2>Responsive Table</h2>
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th>1</th>
                        <td>John</td>
                        <td>Doe</td>
                        <td>@johndoe</td>
                    </tr>
                    <tr>
                        <th>2</th>
                        <td>Jane</td>
                        <td>Smith</td>
                        <td>@janesmith</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>

These examples cover basic tables, striped rows, hover rows, and responsive tables in Bootstrap 4, with proper indentation for clarity.

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Terms Disclaimer About Us Contact Us