Bootstrap 5 Table Striped Rows
Bootstrap5 Table Striped rows are used to change the background color of alternate rows in the table row within the <tbody>. The rows look zebra-striped and it helps to differentiate between two rows of a table.
Table Striped rows used Class:
- table-striped: This class is used to change the background color of alternate rows within the <tbody>.
Syntax:
<table class="table table-striped"> ... </table>
Example 1: In this example, we will learn about table-striped rows.
HTML
<!DOCTYPE html> < html > < head > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > </ head > < body > < div class = "container" > < h1 class = "text-success" > w3wiki </ h1 > < h2 > Table Striped rows </ h2 > < table class = "table table-striped " > < thead > < tr > < th >Id</ th > < th >Product</ th > < th >Cost</ th > </ tr > </ thead > < tbody > < tr > < td >11</ td > < td >Stapler</ td > < td >45</ td > </ tr > < tr > < td >21</ td > < td >Punching Machine</ td > < td >60</ td > </ tr > < tr > < td >31</ td > < td >Fevicol</ td > < td >40</ td > </ tr > </ tbody > </ table > </ div > </ body > </ html > |
Output:
Example 2: In this example, we will learn about table-striped rows with dark-theme.
HTML
<!DOCTYPE html> < html > < head > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > </ head > < body > < div class = "container" > < h1 class = "text-success" > w3wiki </ h1 > < h2 > Table Striped rows </ h2 > < table class = "table table-striped table-dark" > < thead > < tr > < th >Id</ th > < th >Product</ th > < th >Cost</ th > </ tr > </ thead > < tbody > < tr > < td >11</ td > < td >Stapler</ td > < td >45</ td > </ tr > < tr > < td >21</ td > < td >Punching Machine</ td > < td >60</ td > </ tr > < tr > < td >31</ td > < td >Fevicol</ td > < td >40</ td > </ tr > </ tbody > </ table > </ div > </ body > </ html > |
Output:
Reference: https://getbootstrap.com/docs/5.0/content/tables/#striped-rows
Contact Us