7.7.1. Bootstrap5 basic form ¶
Bootstrap5 passed By adding Joint use Joint use You can set the color for the rows or cells of the table by specifying the color class of the meaning: .table class to set the style of the underlying table, as an example:Example ¶
<table class="table">
<thead>
<tr>
<th>Firstnameth>
<th>Lastnameth>
<th>Emailth>
tr>
thead>
<tbody>
<tr>
<td>Johntd>
<td>Doetd>
<td>john@example.comtd>
tr>
<tr>
<td>Marytd>
<td>Moetd>
<td>mary@example.comtd>
tr>
<tr>
<td>Julytd>
<td>Dooleytd>
<td>july@example.comtd>
tr>
tbody>
table>
7.7.2. Stripe table ¶
.table-striped class, you will be in the you seestripes on the lines inside, as shown in the following example: Example ¶
<table class="table table-striped">
<thead>
<tr>
<th>Firstnameth>
<th>Lastnameth>
<th>Emailth>
tr>
thead>
<tbody>
<tr>
<td>Johntd>
<td>Doetd>
<td>john@example.comtd>
tr>
<tr>
<td>Marytd>
<td>Moetd>
<td>mary@example.comtd>
tr>
<tr>
<td>Julytd>
<td>Dooleytd>
<td>july@example.comtd>
tr>
tbody>
table>
7.7.3. Table with borders ¶
.table-bordered class can add borders to a table Example ¶
<table class="table table-bordered">
<thead>
<tr>
<th>Firstnameth>
<th>Lastnameth>
<th>Emailth>
tr>
thead>
<tbody>
<tr>
<td>Johntd>
<td>Doetd>
<td>john@example.comtd>
tr>
<tr>
<td>Marytd>
<td>Moetd>
<td>mary@example.comtd>
tr>
<tr>
<td>Julytd>
<td>Dooleytd>
<td>july@example.comtd>
tr>
tbody>
table>
7.7.4. Mouse hover status table ¶
.table-hover class can add a rollover effect (gray background) to each row of the table: Example ¶
<table class="table table-hover">
<thead>
<tr>
<th>Firstnameth>
<th>Lastnameth>
<th>Emailth>
tr>
thead>
<tbody>
<tr>
<td>Johntd>
<td>Doetd>
<td>john@example.comtd>
tr>
<tr>
<td>Marytd>
<td>Moetd>
<td>mary@example.comtd>
tr>
<tr>
<td>Julytd>
<td>Dooleytd>
<td>july@example.comtd>
tr>
tbody>
table>
7.7.5. Black background form ¶
.table-dark class to add a black background to the table: Example ¶
<table class="table table-dark">
<thead>
<tr>
<th>Firstnameth>
<th>Lastnameth>
<th>Emailth>
tr>
thead>
<tbody>
<tr>
<td>Johntd>
<td>Doetd>
<td>john@example.comtd>
tr>
<tr>
<td>Marytd>
<td>Moetd>
<td>mary@example.comtd>
tr>
<tr>
<td>Julytd>
<td>Dooleytd>
<td>july@example.comtd>
tr>
tbody>
table>
7.7.6. Black stripe table ¶
.table-dark and .table-striped class to create black striped tables: Example ¶
<table class="table table-dark table-striped">
<thead>
<tr>
<th>Firstnameth>
<th>Lastnameth>
<th>Emailth>
tr>
thead>
<tbody>
<tr>
<td>Johntd>
<td>Doetd>
<td>john@example.comtd>
tr>
<tr>
<td>Marytd>
<td>Moetd>
<td>mary@example.comtd>
tr>
<tr>
<td>Julytd>
<td>Dooleytd>
<td>july@example.comtd>
tr>
tbody>
table>
7.7.7. Mouse hover effect-black background table ¶
.table-dark and .table-hover class can set the mouse over effect of the black background table: Example ¶
<table class="table table-dark table-hover">
<thead>
<tr>
<th>Firstnameth>
<th>Lastnameth>
<th>Emailth>
tr>
thead>
<tbody>
<tr>
<td>Johntd>
<td>Doetd>
<td>john@example.comtd>
tr>
<tr>
<td>Marytd>
<td>Moetd>
<td>mary@example.comtd>
tr>
<tr>
<td>Julytd>
<td>Dooleytd>
<td>july@example.comtd>
tr>
tbody>
table>
7.7.8. Unframed table ¶
.table-borderless class can set up a table without borders: Example ¶
<table class="table table-borderless">
<thead>
<tr>
<th>Firstnameth>
<th>Lastnameth>
<th>Emailth>
tr>
thead>
<tbody>
<tr>
<td>Johntd>
<td>Doetd>
<td>john@example.comtd>
tr>
<tr>
<td>Marytd>
<td>Moetd>
<td>mary@example.comtd>
tr>
<tr>
<td>Julytd>
<td>Dooleytd>
<td>july@example.comtd>
tr>
tbody>
table>
7.7.9. Specify the color class of the meaning ¶
Example ¶
<table class="table">
<thead>
<tr>
<th>Firstnameth>
<th>Lastnameth>
<th>Emailth>
tr>
thead>
<tbody>
<tr>
<td>Defaulttd>
<td>Defaultsontd>
<td>def@somemail.comtd>
tr>
<tr class="table-primary">
<td>Primarytd>
<td>Joetd>
<td>joe@example.comtd>
tr>
<tr class="table-success">
<td>Successtd>
<td>Doetd>
<td>john@example.comtd>
tr>
<tr class="table-danger">
<td>Dangertd>
<td>Moetd>
<td>mary@example.comtd>
tr>
<tr class="table-info">
<td>Infotd>
<td>Dooleytd>
<td>july@example.comtd>
tr>
<tr class="table-warning">
<td>Warningtd>
<td>Refstd>
<td>bo@example.comtd>
tr>
<tr class="table-active">
<td>Activetd>
<td>Activesontd>
<td>act@example.comtd>
tr>
<tr class="table-secondary">
<td>Secondarytd>
<td>Secondsontd>
<td>sec@example.comtd>
tr>
<tr class="table-light">
<td>Lighttd>
<td>Angietd>
<td>angie@example.comtd>
tr>
<tr class="table-dark text-dark">
<td>Darktd>
<td>Botd>
<td>bo@example.com