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.
Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss
Asked: 2021-05-15 11:00:00 +0000
Seen: 18 times
Last updated: Apr 16 '22
How can additional centered content be added to Bootstrap 5 images?
In what way is Bootstrap v4 loading the _reboot.scss file?
How can Bootstrap 5 be modified to utilize solely the grid and buttons components?
How does the "row" in Bootstrap 3.3.7 lead to the appearance of a horizontal scroll bar?
How can a new line be added on small devices using Bootstrap?
Is it possible to incorporate multiple versions of Bootstrap within a single code?
How to resolve ambiguous rows when combining multiple tables?
Is it possible that there are some missing values when combining across columns?