Boostrap Tables
Boostrap 4 Tables
To creating tables is straightforward, and you can enhance them with various styles and classes.
Table Structure:
The fundamental structure of an HTML table includes the <table> element, which defines the table itself.
Within the table, we have the <thead> section for the table header, the <tbody> section for the table body, and individual <tr> elements for each row.
When working with rows, we use <th> tags for table headers (representing column headings) and <td> tags for table data (the actual cell contents).
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
Table Styles and Classes:
Bootstrap offers a range of classes to style tables. For basic styling, you can use the .table class.
Additionally, there are contextual classes like .table-primary, .table-striped, .table-bordered, and .table-hover.
These classes allow you to apply different styles such as adding color, creating striped rows, adding borders to cells, and providing hover effects.
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>#</th>
<th>Product</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Product A</td>
<td>$10</td>
</tr>
<tr>
<td>2</td>
<td>Product B</td>
<td>$15</td>
</tr>
</tbody>
</table>
Responsive Tables:
Tables that might overflow horizontally on smaller devices, you can make them responsive by using the .table-responsive class.
This class ensures that the table becomes horizontally scrollable when viewed on screens smaller than the specified breakpoint.
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Event</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Conference</td>
<td>2024-05-10</td>
</tr>
<tr>
<td>2</td>
<td>Workshop</td>
<td>2024-05-15</td>
</tr>
</tbody>
</table>
</div>