<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Table with Accented Rows</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="m-4"> <table class="table"> <thead> <tr> <th>#</th> <th>Bill</th> <th>Payment Date</th> <th>Payment Status</th> </tr> </thead> <tbody> <tr class="table-primary"> <td>1</td> <td>Credit Card</td> <td>04/04/2023</td> <td>Waiting for statement</td> </tr> <tr class="table-secondary"> <td>2</td> <td>Insurance</td> <td>02/04/2023</td> <td>Cancelled</td> </tr> <tr class="table-success"> <td>3</td> <td>Water</td> <td>01/04/2023</td> <td>Paid</td> </tr> <tr class="table-info"> <td>4</td> <td>Internet</td> <td>05/04/2023</td> <td>Change plan</td> </tr> <tr class="table-warning"> <td>5</td> <td>Electricity</td> <td>03/04/2023</td> <td>Paid</td> </tr> <tr class="table-danger"> <td>6</td> <td>Telephone</td> <td>06/04/2023</td> <td>Due</td> </tr> <tr class="table-light"> <td>7</td> <td>House Tax </td> <td>08/04/2023</td> <td>Paid</td> </tr> <tr class="table-dark"> <td>8</td> <td>Gas</td> <td>06/04/2023</td> <td>Payment failed</td> </tr> </tbody> </table> </div> </body> </html>