Bootstrap provides a range of pre-designed styles and components for creating tables that are responsive and visually appealing. Here are some of the key features of Bootstrap tables:
- Basic table: Bootstrap provides a class called “table” that can be used to create a basic table with horizontal dividers between rows and vertical dividers between columns.
- Striped table: Bootstrap provides a class called “table-striped” that adds alternating background colors to rows, making it easier to read large tables.
- Bordered table: Bootstrap provides a class called “table-bordered” that adds borders to the table and its cells.
- Hoverable table: Bootstrap provides a class called “table-hover” that adds a highlight effect to table rows when they are hovered over with the mouse.
- Responsive table: Bootstrap provides a class called “table-responsive” that enables tables to be horizontally scrollable on smaller screens, making it easier to read large tables on mobile devices.
- Table head and footer: Bootstrap provides classes for styling the table head and footer sections separately from the table body.
- Contextual classes: Bootstrap provides classes for adding contextual styles to table rows and cells, such as “table-success” for a success message or “table-danger” for an error message.
To create a Bootstrap table, you can use the HTML “table” element and add the relevant Bootstrap classes to create the desired style. For example, here is the HTML code for a basic Bootstrap table:
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amit</td>
<td>Patil</td>
</tr>
</tbody>
</table>