-
Notifications
You must be signed in to change notification settings - Fork 0
/
table.html
36 lines (35 loc) · 1.4 KB
/
table.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="grid.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header class="table-responsive">
<table class="table table-striped table-bordered table-hover table-condensed table-sm "><!--this striped makes the table zebra
and the rows and columns between this boredred makkes the tale borded. hover means when the mouse is dragged the
content is color is changed -->
<tr class="info">
<th>id</th>
<th>name</th>
<th>desiganation</th>
</tr>
<tr class="sucess">
<td>1</td>
<td>akshay</td>
<td>ceo</td>
</tr>
<tr class="danger">
<td>2</td>
<td>saurabh</td>
<td>manager</td>
</tr>
</table>
<!--table-responsive class is used to creat ea horizantal scroll bar when scrre size is small-->
</header>
</body>