We can create attractive Tables using bootstrap frame work
List of table classes in bootstrap
.table Adds basic styling (light padding and only horizontal dividers) to any <table>
.table-striped Adds zebra-striping to any table row within <tbody> (not available in IE8)
.table-bordered Adds border on all sides of the table and cells
.table-hover Enables a hover state on table rows within a <tbody>
.table- condensed Makes table more compact by cutting cell padding in half
Basic :
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="bs-example">
<table class="table">
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>vicky</td>
<td>Carter</td>
<td>vicky@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>ram</td>
<td>Parker</td>
<td>ram@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>krish</td>
<td>raj</td>
<td>krish22bg@mail.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
table-striped :
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="bs-example">
<table class="table-striped">
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>vicky</td>
<td>Carter</td>
<td>vicky@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>ram</td>
<td>Parker</td>
<td>ram@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>krish</td>
<td>raj</td>
<td>krish22bg@mail.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
OUTPUT:
| Row | First Name | Last Name | |
|---|---|---|---|
| 1 | vicky | Carter | vicky@mail.com |
| 2 | ram | Parker | ram@mail.com |
| 3 | krish | raj | krish22bg@mail.com |
Posts
No comments:
Post a Comment