WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Bootstrap 4 - Tables


Tables are utilized for showing the information in a tabular format. On the off chance that you need an essential table style with simply some light padding and horizontal dividers, include the .table class to the <table> component. For more data on essential table and its elements, look at this part.

Dark Table

You can use the .table-dark class to add a black background to the table as seen in the following example −

Example

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Dark Table</h2>
         <table class = "table table-dark">
            <thead>
               <tr>
                  <th>Tree name </th>
                  <th>Location</th>
                  <th>Ranking</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td>Hyperion</td>
                  <td> 	Redwood National Park, California, United States</td>
                  <td>1</td>
               </tr>
               <tr>
                  <td>Menara</td>
                  <td>Danum Valley Conservation Area, in Sabah on the island of Borneo</td>
                  <td>2</td>
               </tr>
               <tr>
                  <td>Centurion</td>
                  <td> 	Arve Valley, Tasmania, Australia</td>
                  <td>3</td>
               </tr>
            </tbody>
         </table>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

It will produce the following result −

Output

Table Head Options

You can add a black background or a grey background to table headers by using .thead-dark and .thead-light classes as seen in the following example −

Example

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Dark Head</h2>
         <table class = "table">
            <thead class = "thead-dark">
               <tr>
                  <th>Tree name</th>
                  <th>Country</th>
                  <th>Ranking</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td>Redwood National Park, California, United States</td>
                  <td>Hyperion</td>
                  <td>1</td>
               </tr>
               <tr>
                  <td>Danum Valley Conservation Area, in Sabah on the island of Borneo</td>
                  <td>Menara</td>
                  <td>2</td>
               </tr>
               <tr>
                  <td>	Arve Valley, Tasmania, Australia</td>
                  <td>Centurion</td>
                  <td>3</td>
               </tr>
            </tbody>
         </table>
         
         <h2>Light Head</h2>
         <table class = "table">
            <thead class = "thead-light">
               <tr>
                  <th>Tree name</th>
                  <th>Country</th>
                  <th>Ranking</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td>Redwood National Park, California, United States</td>
                  <td>Hyperion</td>
                  <td>1</td>
               </tr>
               <tr>
                  <td>Danum Valley Conservation Area, in Sabah on the island of Borneo</td>
                  <td>Menara</td>
                  <td>2</td>
               </tr>
               <tr>
                  <td>Arve Valley, Tasmania, Australia</td>
                  <td>Centurion</td>
                  <td>3</td>
               </tr>
            </tbody>
         </table>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>