1<table class="table table-striped table-dark">
2 <thead>
3 <tr>
4 <th scope="col">#</th>
5 <th scope="col">First</th>
6 <th scope="col">Last</th>
7 <th scope="col">Handle</th>
8 </tr>
9 </thead>
10 <tbody>
11 <tr>
12 <th scope="row">1</th>
13 <td>Mark</td>
14 <td>Otto</td>
15 <td>@mdo</td>
16 </tr>
17 <tr>
18 <th scope="row">2</th>
19 <td>Jacob</td>
20 <td>Thornton</td>
21 <td>@fat</td>
22 </tr>
23 <tr>
24 <th scope="row">3</th>
25 <td>Larry</td>
26 <td>the Bird</td>
27 <td>@twitter</td>
28 </tr>
29 </tbody>
30</table>
1<!-- BOOTSTRAP V3 -->
2<table class="table table-condensed">
3 ...
4</table>
5<!-- BOOTSTRAP v4 -->
6<table class="table table-sm">
7 ...
8</table>
1<table class="table table-dark">
2 <thead>
3 <tr>
4 <th scope="col">#</th>
5 <th scope="col">First</th>
6 <th scope="col">Last</th>
7 <th scope="col">Handle</th>
8 </tr>
9 </thead>
10 <tbody>
11 <tr>
12 <th scope="row">1</th>
13 <td>Mark</td>
14 <td>Otto</td>
15 <td>@mdo</td>
16 </tr>
17 <tr>
18 <th scope="row">2</th>
19 <td>Jacob</td>
20 <td>Thornton</td>
21 <td>@fat</td>
22 </tr>
23 <tr>
24 <th scope="row">3</th>
25 <td>Larry</td>
26 <td>the Bird</td>
27 <td>@twitter</td>
28 </tr>
29 </tbody>
30</table>
1Bootstrap Basic Table
2A basic Bootstrap table has a light padding and only horizontal dividers.
3
4The .table class adds basic styling to a table
5------------------------------------------------------------
6Striped Rows
7The .table-striped class adds zebra-stripes to a table
8
9Bordered Table
10The .table-bordered class adds borders on all sides of the table and cells
11------------------------------------------------------------
12Hover Rows
13The .table-hover class adds a hover effect (grey background color) on table rows
14------------------------------------------------------------
15Condensed Table
16The .table-condensed class makes a table more compact by cutting cell padding in half
17------------------------------------------------------------
18Contextual Classes
19Contextual classes can be used to color table rows (<tr>) or table cells (<td>)
20
21The contextual classes that can be used are:
22
23Class Description
24.active Applies the hover color to the table row or table cell
25.success Indicates a successful or positive action
26.info Indicates a neutral informative change or action
27.warning Indicates a warning that might need attention
28.danger Indicates a dangerous or potentially negative action
29------------------------------------------------------------
30Responsive Tables
31The .table-responsive class creates a responsive table. The table will then scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference
32
33Sample code
34
35<!DOCTYPE html>
36<html lang="en">
37<head>
38 <title>Bootstrap Example</title>
39 <meta charset="utf-8">
40 <meta name="viewport" content="width=device-width, initial-scale=1">
41 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
42 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
43 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
44</head>
45<body>
46
47<div class="container">
48 <h2>Bootstrap Table Example</h2>
49 <table class="table -----------"> // try by adding different table class at this place => ("-----------")
50 <thead>
51 <tr>
52 <th>Id</th>
53 <th>Name</th>
54 <th>Age</th>
55 </tr>
56 </thead>
57 <tbody>
58 <tr>
59 <td>1</td>
60 <td>Ram</td>
61 <td>10</td>
62 </tr>
63 <tr>
64 <td>2</td>
65 <td>Shyam</td>
66 <td>12</td>
67 </tr>
68 <tr>
69 <td>3</td>
70 <td>Ramesh</td>
71 <td>13</td>
72 </tr>
73 <tr>
74 <td>4</td>
75 <td>Suresh</td>
76 <td>11</td>
77 </tr>
78 </tbody>
79 </table>
80</div>
81
82</body>
83</html>
1<table class="table">
2 <thead>
3 <tr> <th>Head 1</th> <th>Head 2</th> <th>Head 3</th> </tr>
4 </thead>
5
6 <tbody>
7 <tr> <td>cell</td> <td>cell</td> <td>cell</td> </tr>
8 <tr> <td>cell</td> <td>cell</td> <td>cell</td> </tr>
9 </tbody>
10
11 <tfoot>
12 <tr> <th>Footer 1</th> <th>Footer 2</th> <th>Footer 3</th> </tr>
13 </tfoot>
14</table>
1<!-- BOOTSTRAP V5 -->
2<table class="table">
3 <thead>
4 <tr>
5 <th scope="col">#</th>
6 <th scope="col">First</th>
7 <th scope="col">Last</th>
8 <th scope="col">Handle</th>
9 </tr>
10 </thead>
11 <tbody>
12 <tr>
13 <th scope="row">1</th>
14 <td>Mark</td>
15 <td>Otto</td>
16 <td>@mdo</td>
17 </tr>
18 <tr>
19 <th scope="row">2</th>
20 <td>Jacob</td>
21 <td>Thornton</td>
22 <td>@fat</td>
23 </tr>
24 <tr>
25 <th scope="row">3</th>
26 <td colspan="2">Larry the Bird</td>
27 <td>@twitter</td>
28 </tr>
29 </tbody>
30</table>