Create table with alternate rows background colors using bootstrap in HTML,PHP

How to make a Table with zebra striped rows background color effects.

Zebra stripes rows color effect will automatically make one row color effect light dark and other row color as normal white, which makes the color combination same as zebra stripes. This background color combination will generate using Bootstrap’s .table-striped class. So here is the complete step by step tutorial for Create table with alternate rows background colors using bootstrap in HTML,PHP.

How to Create table with alternate rows background colors using bootstrap in HTML,PHP.

https://www.android-examples.com/demo/heading-tag.html
Code for alternate-rows-colors.html file.

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Alternate Colors</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h1>Alternate Rows Colors</h1>


<table class="table table-striped">
 <thead>
 <tr>
 <th>Name</th>
 <th>Website</th>
 <th>Email</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>Raju</td>
 <td>Raju-demo-website.com</td>
 <td>[email protected]</td>
 </tr>
 <tr>
 <td>Raja</td>
 <td>Raja-demo.com</td>
 <td>[email protected]</td>
 </tr>
 <tr>
 <td>Rani</td>
 <td>Rani-demo.com</td>
 <td>[email protected]</td>
 </tr>
 <tr>
 <td>Raju</td>
 <td>Raju-demo-website.com</td>
 <td>[email protected]</td>
 </tr>
 <tr>
 <td>Raja</td>
 <td>Raja-demo.com</td>
 <td>[email protected]</td>
 </tr>
 </tbody>
 </table>

 
</div>
</body>
</html>

Screenshot:

Create table with alternate rows background colors using bootstrap in HTML,PHP

Leave a Reply

Your email address will not be published. Required fields are marked *