bootstrap/table.html at master · akshaym-3255/bootstrap · GitHub

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>