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 / developersection / forums / table with dark background and with striped between them
Ask Question

Table with dark background and with striped between them

Ethan Karla 553 28 Jul 2021

How to make a table with dark background and striped between them?

bootstrap bootstrap
Updated 28 Jul 2021
Ethan Karla
Ethan Karla

Student

An enthusiastic, adaptive, and fast-learning person with a broad and acute interest in the discovery of new innovative drugs, I particularly enjoy collaborating with scientists from different disciplines to develop new skills and solve new challenges.

Message

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!

advertising