Bootstrap Table
Bootstrap, a table is an HTML element that is enhanced and styled using Bootstrap's CSS classes to provide a consistent and responsive structure. Bootstrap provides a set of predefined classes for tables that make it easy to create well-formatted and visually appealing tables. Here are some key features and classes related to Bootstrap tables:
Basic Table Structure:
To create a basic Bootstrap table, you can use the <table> element along with other elements such as <thead>, <tbody>, and <tr>. The <thead> is used for the table header, <tbody> for the table body, and <tr> for table rows.
Table Classes:
Bootstrap provides several classes to style tables. Common classes include:
table: Base class for styling tables.
table-striped: Alternates the background color of rows for better readability.
table-bordered: Adds borders to all sides of the table and its cells.
table-hover: Adds a hover effect to rows when they are hovered over.
table-responsive: Ensures that tables are responsive on smaller screens by enabling horizontal scrolling.
Table Headings and Cells:
<th>: Used for table headers. Bootstrap provides classes like thead-dark to style the header with a dark background.
<td>: Used for table cells.
Responsive Tables:
To make tables responsive on smaller screens, you can wrap the table in a <div> with the class table-responsive. This will enable horizontal scrolling for the table on smaller screens.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<title>Bootstrap Table </title>
</head>
<body>
<div class="container mt-5">
<h2>First Tablet - Bootstrap Table Example</h2>
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>jane@example.com</td>
</tr>
</tbody>
</table>
</div>
<!-- Bootstrap JS and Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
<th>: Used for table headers. Bootstrap provides classes like thead-dark to style the header with a dark background.
<td>: Used for table cells.
Responsive Tables:
To make tables responsive on smaller screens, you can wrap the table in a <div> with the class table-responsive. This will enable horizontal scrolling for the table on smaller screens.
Here's a basic example of a Bootstrap table:
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<title>Bootstrap Table </title>
</head>
<body>
<div class="container mt-5">
<h2>First Tablet - Bootstrap Table Example</h2>
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>jane@example.com</td>
</tr>
</tbody>
</table>
</div>
<!-- Bootstrap JS and Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
output
Comments
Post a Comment