Table :
Hello guys ! today we will learn about Tables in Bootstrap 4 !
table class is used to style HTML tables and make them more visually appealing and responsive. The table class in Bootstrap provides a set of predefined styles and features that can be applied to tables.
Table Styles :
Table Color :
One can color table by using its classes like....
- table-primary
- table-secondary
- table-success
- table-danger
- table-warning
- table-info
- table-light
- table-dark
Example :
PHP Example
Edit it yourself
<!DOCTYPE html>
<html lang="en">
<head>
<title>Grid Example</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.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/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.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>No.</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>Smith</td>
</tr>
</tbody>
</table>
</body>
</html>