Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion AI Tools Integration
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

forum

Home Forums Table with dark background and with striped between them – MindStick
Ask Question

1 Answers

Anonymous User
Anonymous User 29 Jul 2021
Report Abuse

You can use Bootstrap's table classes to create a table with a dark background and a stripe between them.

Bootstrap library comes with table classes to create tables with lots of functionalities. You can use different classes of bootstrap tables to create nice look and feel tables with extended custom styling by writing small lines of code in it.

The examples below show the following table that are described in Bootstrap :

<!doctype html>

<html lang='en'>

<head>

    <!-- Required meta tags -->

    <meta charset='utf-8'>

    <meta name='viewport' content='width=device-width, initial-scale=1'>

    <!-- Bootstrap CSS -->

    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC' crossorigin='anonymous'>

    <title>Hello, world!</title>

</head>

<body>

    <div class='container'>

        <table class='table table-striped table-dark table-hover text-center'>

            <thead>

                <tr>

                    <th scope='col'>#</th>

                    <th scope='col'>First</th>

                    <th scope='col'>Last</th>

                    <th scope='col'>Job Role</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <th scope='row'>1</th>

                    <td>Mark</td>

                    <td>Walter</td>

                    <td>Graphic Designer</td>

                </tr>

                <tr>

                    <th scope='row'>2</th>

                    <td>Ashish</td>

                    <td>Wilson</td>

                    <td>Content Writer</td>

                </tr>

                <tr>

                    <th scope='row'>3</th>

                    <td>Anush</td>

                    <td>Aaron</td>

                    <td>Software Developer</td>

                </tr>

            </tbody>

        </table>

    </div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->

    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js' integrity='sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM' crossorigin='anonymous'></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->

    <!--

    <script src='https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js' integrity='sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p' crossorigin='anonymous'></script>

    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js' integrity='sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF' crossorigin='anonymous'></script>

    -->

</body>

</html>

Output:

Anonymous User

Hope it will help you to solve your query!

Happy Coding!

MindStick Training
Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md