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.

Disclaimer About Us