About Lesson
1.Striped Rows:
The .table-striped class adds zebra-stripes to a table, creating alternating row colors for improved readability.
Example:
HTML
<div class="container">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>John</td>
<td>Doe</td>
<td>@johndoe</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Mary</td>
<td>Smith</td>
<td>@marysmith</td>
</tr>
<tr>
<th scope="row">3</th>
<td>James</td>
<td>Johnson</td>
<td>@jamesjohnson</td>
</tr>
</tbody>
</table>
</div>Output:
2.Bordered Table:
The .table-bordered class adds borders to all cells of a table for a clearly defined structure.
Example:
HTML
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>John</td>
<td>Doe</td>
<td>@johndoe</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Mary</td>
<td>Smith</td>
<td>@marysmith</td>
</tr>
<tr>
<th scope="row">3</th>
<td>James</td>
<td>Johnson</td>
<td>@jamesjohnson</td>
</tr>
</tbody>
</table>
</div>Output:
3.Hover Rows:
The .table-hover class adds a hover effect to table rows, highlighting them when the cursor moves over them.
Example:
HTML
<div class="container">
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>John</td>
<td>Doe</td>
<td>@johndoe</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Mary</td>
<td>Smith</td>
<td>@marysmith</td>
</tr>
<tr>
<th scope="row">3</th>
<td>James</td>
<td>Johnson</td>
<td>@jamesjohnson</td>
</tr>
</tbody>
</table>
</div>Output:
