1 | initial version |
Bootstrap tables can have several rows and columns by adding multiple HTML tags and elements within the <table>
and <tr>
tags. We can use the <th>
tag for table header and <td>
tag for table cell. The code below demonstrates how to create a basic Bootstrap table with multiple rows and columns:
<table class="table">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
We can customize the table further using Bootstrap classes such as table-bordered
for a bordered table, table-hover
for adding hover effects, and table-striped
for adding striped rows.