---
title: "Table with dark background and with striped between them"  
description: "Table with dark background and with striped between them"  
author: "Ethan Karla"  
published: 2021-07-28  
updated: 2021-07-28  
canonical: https://www.mindstick.com/forum/156600/table-with-dark-background-and-with-striped-between-them  
category: "bootstrap"  
tags: ["bootstrap"]  
reading_time: 3 minutes  

---

# Table with dark background and with striped between them

How to make a [table](https://www.mindstick.com/articles/43918/how-to-design-table-using-bootstrap) with dark [background](https://www.mindstick.com/articles/65/how-to-change-background-color-of-tab-control-in-c-sharp) and striped between them?

## Replies

### Reply by Anonymous User

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:

![Table with dark background and with striped between them](https://www.mindstick.com/mindstickforums/b35e17ab-855a-42fc-8acd-53cfe95a59f5/images/548082b2-f8cb-453c-a1cd-4911547d20ee.png)

Hope it will help you to solve your query!

Happy Coding!


---

Original Source: https://www.mindstick.com/forum/156600/table-with-dark-background-and-with-striped-between-them

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
