The below is the code for Bootstrap table samples.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Table</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h2>Bootstrap5 Table</h2>
</div>
<div class="container mt-3">
<p> This is a small table</p>
<div style="overflow-x:auto">
<table class="table table-bordered table-sm">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Random</th>
<th>Random1</th>
<th>Random2</th>
<th>Random3</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>12</td>
<td>51</td>
<td>89</td>
<td>75</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
<td>35</td>
<td>49</td>
<td>56</td>
<td>63</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
<td>12</td>
<td>51</td>
<td>89</td>
<td>75</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="container mt-3">
<p> This is a dark table</p>
<div style="overflow-x:auto">
<table class="table table-dark">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Random</th>
<th>Random1</th>
<th>Random2</th>
<th>Random3</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>12</td>
<td>51</td>
<td>89</td>
<td>75</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
<td>35</td>
<td>49</td>
<td>56</td>
<td>63</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
<td>12</td>
<td>51</td>
<td>89</td>
<td>75</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="container-fluid mt-3">
<p> This is a hover table</p>
<div style="overflow-x:auto">
<table class="table table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Random</th>
<th>Random1</th>
<th>Random2</th>
<th>Random3</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>12</td>
<td>51</td>
<td>89</td>
<td>75</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
<td>35</td>
<td>49</td>
<td>56</td>
<td>63</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
<td>12</td>
<td>51</td>
<td>89</td>
<td>75</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="container-fluid mt-3">
<p> This is a hoverable dark table</p>
<div style="overflow-x:auto">
<table class="table table-dark table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Random</th>
<th>Random1</th>
<th>Random2</th>
<th>Random3</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>12</td>
<td>51</td>
<td>89</td>
<td>75</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
<td>35</td>
<td>49</td>
<td>56</td>
<td>63</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
<td>12</td>
<td>51</td>
<td>89</td>
<td>75</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="container-fluid mt-3">
<p> This is a small table</p>
<div style="overflow-x:auto">
<table class="table table-bordered table-sm">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Random</th>
<th>Random1</th>
<th>Random2</th>
<th>Random3</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>12</td>
<td>51</td>
<td>89</td>
<td>75</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
<td>35</td>
<td>49</td>
<td>56</td>
<td>63</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
<td>12</td>
<td>51</td>
<td>89</td>
<td>75</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
The below is the code for Bootstrap table samples.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Table</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h2>Bootstrap5 Table</h2>
</div>
<div class="container mt-3">
<p> This is a small table</p>
<div style="overflow-x:auto">
<table class="table table-bordered table-sm">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Random</th>
<th>Random1</th>
<th>Random2</th>
<th>Random3</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>12</td>
<td>51</td>
<td>89</td>
<td>75</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
<td>35</td>
<td>49</td>
<td>56</td>
<td>63</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
<td>12</td>
<td>51</td>
<td>89</td>
<td>75</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="container mt-3">
<p> This is a dark table</p>
<div style="overflow-x:auto">
<table class="table table-dark">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Random</th>
<th>Random1</th>
<th>Random2</th>
<th>Random3</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>12</td>
<td>51</td>
<td>89</td>
<td>75</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
<td>35</td>
<td>49</td>
<td>56</td>
<td>63</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
<td>12</td>
<td>51</td>
<td>89</td>
<td>75</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="container-fluid mt-3">
<p> This is a hover table</p>
<div style="overflow-x:auto">
<table class="table table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Random</th>
<th>Random1</th>
<th>Random2</th>
<th>Random3</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>12</td>
<td>51</td>
<td>89</td>
<td>75</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
<td>35</td>
<td>49</td>
<td>56</td>
<td>63</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
<td>12</td>
<td>51</td>
<td>89</td>
<td>75</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="container-fluid mt-3">
<p> This is a hoverable dark table</p>
<div style="overflow-x:auto">
<table class="table table-dark table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Random</th>
<th>Random1</th>
<th>Random2</th>
<th>Random3</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>12</td>
<td>51</td>
<td>89</td>
<td>75</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
<td>35</td>
<td>49</td>
<td>56</td>
<td>63</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
<td>12</td>
<td>51</td>
<td>89</td>
<td>75</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="container-fluid mt-3">
<p> This is a small table</p>
<div style="overflow-x:auto">
<table class="table table-bordered table-sm">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Random</th>
<th>Random1</th>
<th>Random2</th>
<th>Random3</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>12</td>
<td>51</td>
<td>89</td>
<td>75</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
<td>35</td>
<td>49</td>
<td>56</td>
<td>63</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
<td>12</td>
<td>51</td>
<td>89</td>
<td>75</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
The below is the code for CSS formatting
table, th, td {
/*
background-color: rgb(236, 233, 239);
*/
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
color: rgb(255, 254, 252);
text-align: center;
border: 1px solid rgb(255, 255, 255);
}
table {
margin-left: 15px;
}
th {
height: 70px;
text-align: left;
}
/* To create hoverable table
Will only work if table has no bg color
*/
tr:hover {background-color: rgb(212, 225, 25);}
body{
background-color: rgb(175, 197, 186);
}
For more detailed instruction, refer my YouTube video :
Comentarios