#     
## Overview
[Bootstrap](https://www.educative.io/answers/bootstrap-4-vs-bootstrap-5) has a wide variety of styling tables. We can style tables with color, borders, and other customization options. Likewise, we can also make the basic HTML tables responsive according to the desired screen size.

## Syntax
```html
<table class="table subclassName"> Content of the Table <table>
```

We replace the `subclassName` with the subclass or attribute we aim to include.

## Styled tables
Here is a list of subclasses that are available in Bootstrap for adding borders, colored headers or rows, striped patterns, and more:


Subclasses of the table class

align-center


## Example: bordered tables

This class adds borders to all the sides and cells of the table which improves its look and feel.

<!doctype html>
<html lang="en">
   <head>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container">
         <h2>Bordered Table</h2>
         <table class="table table-bordered">
            <thead>
               <tr>
                  <th>Reg.no</th>
                  <th>Student Name</th>
                  <th>Student_Email</th>
                  <th>Grade</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td>4427</td>
                  <td>Julia</td>
                  <td>example@xyz.com</td>
                  <td>B+</td>
               </tr>
               <tr>
                  <td>3069</td>
                  <td>Jennifer</td>
                  <td>student1@xyz.com</td>
                  <td>A</td>
               </tr>
            </tbody>
         </table>
      </div>
   </body>
</html>

codemirror

### Explanation
* Line 9: In the `<table>` tag, we add the `table-bordered` class to add borders to all the sides and cells of the respective table.

## Example: striped tables
Let’s see how to use striped tables in the example below:

<!doctype html>
<html lang="en">
   <head>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container">
         <h2>Striped Table</h2>
         <table class="table table-striped">
            <thead>
               <tr>
                  <th>Reg.no</th>
                  <th>Student Name</th>
                  <th>Student_Email</th>
                  <th>Grade</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td>4427</td>
                  <td>Julia</td>
                  <td>example@xyz.com</td>
                  <td>B+</td>
               </tr>
               <tr>
                  <td>3069</td>
                  <td>Jennifer</td>
                  <td>student1@xyz.com</td>
                  <td>A</td>
               </tr>
               <tr>
                  <td>3056</td>
                  <td>Norma</td>
                  <td>example@xyz.com</td>
                  <td>C+</td>
               </tr>
            </tbody>
         </table>
      </div>
   </body>
</html>

## Explanation
In the example above, we have a table with 3 observations of students. We'll use bootstrap to make it a striped table.

* Line 9: We use the `.table-striped` subclass to generate a striped table.


#     
## Overview
[Bootstrap](https://www.educative.io/answers/bootstrap-4-vs-bootstrap-5) has a wide variety of styling tables. We can style tables with color, borders, and other customization options. Likewise, we can also make the basic HTML tables responsive according to the desired screen size.

## Syntax
```html
<table> Content of the Table <table>
```

We replace the `subclassName` with the subclass or attribute we aim to include.

What are different table styles in Bootstrap 4?

Bootstrap 4 offers a variety of table styles, including bordered and striped tables, enhancing visual appeal and responsiveness.

Subclass	Syntax	Description
`.table-borderless`	`<table class="table table-borderless">`	Removes all existing borders from the table
`.table-striped`	`<table class="table table-striped">`	Creates alternative dark and light rows in the table
`.thead-dark`	`<table class="table thead-dark">`	Adds a dark color to the header of the table
`.thead-light`	`<table class="table thead-light">`	Adds a light gray color to the header of the table
`.table-dark`	`<table class="table table-dark">`	Adds a dark background to the table
`.table-light`	`<table class="table table-light">`	Adds a light gray background to the table
`.table-hover`	`<table class="table table-hover">`	Adds a hovering effect to the rows due to which the row changes color whenever the cursor hovers over it
`.table-sm`	`<table class="table table-sm">`	Reduces the size of the table by cutting the padding in the cells by half