Which of the Bootstrap class can be used to get a basic table with stripes on rows?
May 24, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
In this tutorial, we walk through the complete process of creating a used to get a basic table with stripes on rows.
Table of contents
- Includes bootstrap view
- Includes bootstrap library
- Include the code in body
This article will guide you to adding table with stripes on rows in Bootstrap with example.
Creating Tables with Striped Rows
You can also add zebra-striping to the table rows within the <tbody> by simply adding an additional class .table-striped to the .table base class, as shown below.
Step 1: Includes bootstrap view
To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.
<meta name="viewport" content="width=device-width, initial-scale=1">Step 2: Includes bootstrap library
First of all, load the Bootstrap framework CSS into the head tag of your webpage.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>Step 3: Include the code in body
Here we will use .table table-striped class to make a table with stripes on rows.
<div class="container">
<h1 style="text-align:center;color:#1c0080;">
aGuideHub
</h1>
<div>
<table class="table table-striped">
<thead>
<tr>
<th>S. No.</th>
<th>Name</th>
<th>City</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Vijay</td>
<td>Solapur</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Viraj</td>
<td>Miraroad</td>
<td>23</td>
</tr>
<tr>
<td>3</td>
<td>Astha</td>
<td>Virar</td>
<td>34</td>
</tr>
</tbody>
</table>
</div>
</div>Example.
Let’s look at the following example to understand how it basically works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Zebra-Striped Tables</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h1 style="text-align:center;color:#1c0080;">
aGuideHub
</h1>
<div>
<table class="table table-striped">
<thead>
<tr>
<th>S. No.</th>
<th>Name</th>
<th>City</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Vijay</td>
<td>Solapur</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Viraj</td>
<td>Miraroad</td>
<td>23</td>
</tr>
<tr>
<td>3</td>
<td>Astha</td>
<td>Virar</td>
<td>34</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>Check the output of the above code example.
All the best 👍
