Open In App

Bulma | Table

Improve
Improve
Like Article
Like
Save
Share
Report

Bulma is a free and open-source CSS framework based on Flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design. 
Bulma supports a lot of types of tables like a bordered table, stripped table, hoverable table, scrollable table, etc. Just by adding some Bulma classes to the HTML, we can achieve very interactive tables.

Example 1: This example creating a simple table using Bulma.

HTML




<!DOCTYPE html>
<html>
 
<head>
  <title>Bulma Table</title>
  <link rel='stylesheet' href=
 
  <!-- custom css -->
  <style>
    div.columns {
      margin-top: 50px;
    }
 
    h1 {
      color: green !important;
      margin-bottom: 20px;
 
    }
 
    .table td {
      font-size: 17px
    }
 
    .table th {
      font-size: 17px
    }
  </style>
</head>
 
<body>
  <div class='container has-text-centered'>
    <div class='columns is-mobile is-centered'>
      <div class='column is-8'>
        <div>
          <h1 class='title'>User Information</h1>
          <hr>
        </div>
        <table class='table'>
          <thead>
            <tr>
              <th>Username</th>
              <th>Email</th>
              <th>Gender</th>
              <th>Address</th>
              <th>Phone No.</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>vilod565</td>
              <td>vilod565@gmail.com</td>
              <td>Male</td>
              <td>Kolkata, West Bengal</td>
              <td>9856435632</td>
            </tr>
 
            <tr>
              <td>deepak123</td>
              <td>deepak123@gmail.com</td>
              <td>Male</td>
              <td>Hooghly, West Bengal</td>
              <td>6556456421</td>
            </tr>
 
            <tr>
              <td>sneha345</td>
              <td>sneha345@gmail.com</td>
              <td>Female</td>
              <td>Howrah, West Bengal</td>
              <td>7674578634</td>
            </tr>
 
            <tr>
              <td>saimi875</td>
              <td>saimi875@gmail.com</td>
              <td>Male</td>
              <td>Birbhum, West Bengal</td>
              <td>8767543452</td>
            </tr>
 
            <tr>
              <td>santra765</td>
              <td>santra765@gmail.com</td>
              <td>Female</td>
              <td>Malda, West Bengal</td>
              <td>9567345237</td>
            </tr>
 
            <tr>
              <td>riya665</td>
              <td>riya665@gmail.com</td>
              <td>Female</td>
              <td>Jalpaiguri, West Bengal</td>
              <td>7656435634</td>
            </tr>
 
            <tr>
              <td>raja222</td>
              <td>raja222@gmail.com</td>
              <td>Male</td>
              <td>Malda, West Bengal</td>
              <td>8767543423</td>
            </tr>
 
            <tr>
              <td>kunal456</td>
              <td>kunal456@gmail.com</td>
              <td>Male</td>
              <td>Hooghly, West Bengal</td>
              <td>8654328974</td>
            </tr>
 
            <tr>
              <td>diwakar686</td>
              <td>diwakar686@gmail.com</td>
              <td>Male</td>
              <td>Howrah, West Bengal</td>
              <td>6754345672</td>
            </tr>
 
            <tr>
              <td>nupur898</td>
              <td>nupur898@gmail.com</td>
              <td>Female</td>
              <td>Kolkata, West Bengal</td>
              <td>6897654320</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</body>
 
</html>


Output: 

Example 2: This example uses Bulma to create bordered table.

HTML




<!DOCTYPE html>
<html>
 
<head>
  <title>Bulma Table</title>
  <link rel='stylesheet' href=
 
  <!-- custom css -->
  <style>
    div.columns {
      margin-top: 50px;
    }
 
    h1 {
      color: green !important;
      margin-bottom: 20px;
 
    }
 
    .table td {
      font-size: 17px
    }
 
    .table th {
      font-size: 17px
    }
  </style>
</head>
 
<body>
  <div class='container has-text-centered'>
    <div class='columns is-mobile is-centered'>
      <div class='column is-8'>
        <div>
          <h1 class='title'>Users Information</h1>
          <hr>
        </div>
        <table class='table is-bordered'>
          <thead>
            <tr>
              <th>Username</th>
              <th>Email</th>
              <th>Gender</th>
              <th>Address</th>
              <th>Phone No.</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>vilod565</td>
              <td>vilod565@gmail.com</td>
              <td>Male</td>
              <td>Kolkata, West Bengal</td>
              <td>9856435632</td>
            </tr>
 
            <tr>
              <td>deepak123</td>
              <td>deepak123@gmail.com</td>
              <td>Male</td>
              <td>Hooghly, West Bengal</td>
              <td>6556456421</td>
            </tr>
 
            <tr>
              <td>sneha345</td>
              <td>sneha345@gmail.com</td>
              <td>Female</td>
              <td>Howrah, West Bengal</td>
              <td>7674578634</td>
            </tr>
 
            <tr>
              <td>saimi875</td>
              <td>saimi875@gmail.com</td>
              <td>Male</td>
              <td>Birbhum, West Bengal</td>
              <td>8767543452</td>
            </tr>
 
            <tr>
              <td>santra765</td>
              <td>santra765@gmail.com</td>
              <td>Female</td>
              <td>Malda, West Bengal</td>
              <td>9567345237</td>
            </tr>
 
            <tr>
              <td>riya665</td>
              <td>riya665@gmail.com</td>
              <td>Female</td>
              <td>Jalpaiguri, West Bengal</td>
              <td>7656435634</td>
            </tr>
 
            <tr>
              <td>raja222</td>
              <td>raja222@gmail.com</td>
              <td>Male</td>
              <td>Malda, West Bengal</td>
              <td>8767543423</td>
            </tr>
 
            <tr>
              <td>kunal456</td>
              <td>kunal456@gmail.com</td>
              <td>Male</td>
              <td>Hooghly, West Bengal</td>
              <td>8654328974</td>
            </tr>
 
            <tr>
              <td>diwakar686</td>
              <td>diwakar686@gmail.com</td>
              <td>Male</td>
              <td>Howrah, West Bengal</td>
              <td>6754345672</td>
            </tr>
 
            <tr>
              <td>nupur898</td>
              <td>nupur898@gmail.com</td>
              <td>Female</td>
              <td>Kolkata, West Bengal</td>
              <td>6897654320</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</body>
 
</html>


Output: 

Example 3: This example using Bulma to create a table with no border.

HTML




<!DOCTYPE html>
<html>
 
<head>
  <title>Bulma Table</title>
  <link rel='stylesheet' href=
 
  <!-- custom css -->
  <style>
    div.columns {
      margin-top: 50px;
    }
 
    h1 {
      color: green !important;
      margin-bottom: 20px;
 
    }
 
    .table td {
      font-size: 17px;
      border: none
    }
 
    .table th {
      font-size: 17px;
      border: none
    }
  </style>
</head>
 
<body>
  <div class='container has-text-centered'>
    <div class='columns is-mobile is-centered'>
      <div class='column is-8'>
        <div>
          <h1 class='title'>Users Information</h1>
          <hr>
        </div>
        <table class='table'>
          <thead>
            <tr>
              <th>Username</th>
              <th>Email</th>
              <th>Gender</th>
              <th>Address</th>
              <th>Phone No.</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>vilod565</td>
              <td>vilod565@gmail.com</td>
              <td>Male</td>
              <td>Kolkata, West Bengal</td>
              <td>9856435632</td>
            </tr>
 
            <tr>
              <td>deepak123</td>
              <td>deepak123@gmail.com</td>
              <td>Male</td>
              <td>Hooghly, West Bengal</td>
              <td>6556456421</td>
            </tr>
 
            <tr>
              <td>sneha345</td>
              <td>sneha345@gmail.com</td>
              <td>Female</td>
              <td>Howrah, West Bengal</td>
              <td>7674578634</td>
            </tr>
 
            <tr>
              <td>saimi875</td>
              <td>saimi875@gmail.com</td>
              <td>Male</td>
              <td>Birbhum, West Bengal</td>
              <td>8767543452</td>
            </tr>
 
            <tr>
              <td>santra765</td>
              <td>santra765@gmail.com</td>
              <td>Female</td>
              <td>Malda, West Bengal</td>
              <td>9567345237</td>
            </tr>
 
            <tr>
              <td>riya665</td>
              <td>riya665@gmail.com</td>
              <td>Female</td>
              <td>Jalpaiguri, West Bengal</td>
              <td>7656435634</td>
            </tr>
 
            <tr>
              <td>raja222</td>
              <td>raja222@gmail.com</td>
              <td>Male</td>
              <td>Malda, West Bengal</td>
              <td>8767543423</td>
            </tr>
 
            <tr>
              <td>kunal456</td>
              <td>kunal456@gmail.com</td>
              <td>Male</td>
              <td>Hooghly, West Bengal</td>
              <td>8654328974</td>
            </tr>
 
            <tr>
              <td>diwakar686</td>
              <td>diwakar686@gmail.com</td>
              <td>Male</td>
              <td>Howrah, West Bengal</td>
              <td>6754345672</td>
            </tr>
 
            <tr>
              <td>nupur898</td>
              <td>nupur898@gmail.com</td>
              <td>Female</td>
              <td>Kolkata, West Bengal</td>
              <td>6897654320</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</body>
 
</html>


Output: 

Example 4: This example using Bulma to create a stripped bordered table.

HTML




<!DOCTYPE html>
<html>
 
<head>
  <title>Bulma Table</title>
  <link rel='stylesheet' href=
 
  <!-- custom css -->
  <style>
    div.columns {
      margin-top: 50px;
    }
 
    h1 {
      color: green !important;
      margin-bottom: 20px;
 
    }
 
    .table td {
      font-size: 17px
    }
 
    .table th {
      font-size: 17px
    }
  </style>
</head>
 
<body>
  <div class='container has-text-centered'>
    <div class='columns is-mobile is-centered'>
      <div class='column is-8'>
        <div>
          <h1 class='title'>Users Information</h1>
          <hr>
        </div>
        <table class='table is-stripped is-bordered'>
          <thead>
            <tr>
              <th>Username</th>
              <th>Email</th>
              <th>Gender</th>
              <th>Address</th>
              <th>Phone No.</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>vilod565</td>
              <td>vilod565@gmail.com</td>
              <td>Male</td>
              <td>Kolkata, West Bengal</td>
              <td>9856435632</td>
            </tr>
 
            <tr>
              <td>deepak123</td>
              <td>deepak123@gmail.com</td>
              <td>Male</td>
              <td>Hooghly, West Bengal</td>
              <td>6556456421</td>
            </tr>
 
            <tr>
              <td>sneha345</td>
              <td>sneha345@gmail.com</td>
              <td>Female</td>
              <td>Howrah, West Bengal</td>
              <td>7674578634</td>
            </tr>
 
            <tr>
              <td>saimi875</td>
              <td>saimi875@gmail.com</td>
              <td>Male</td>
              <td>Birbhum, West Bengal</td>
              <td>8767543452</td>
            </tr>
 
            <tr>
              <td>santra765</td>
              <td>santra765@gmail.com</td>
              <td>Female</td>
              <td>Malda, West Bengal</td>
              <td>9567345237</td>
            </tr>
 
            <tr>
              <td>riya665</td>
              <td>riya665@gmail.com</td>
              <td>Female</td>
              <td>Jalpaiguri, West Bengal</td>
              <td>7656435634</td>
            </tr>
 
            <tr>
              <td>raja222</td>
              <td>raja222@gmail.com</td>
              <td>Male</td>
              <td>Malda, West Bengal</td>
              <td>8767543423</td>
            </tr>
 
            <tr>
              <td>kunal456</td>
              <td>kunal456@gmail.com</td>
              <td>Male</td>
              <td>Hooghly, West Bengal</td>
              <td>8654328974</td>
            </tr>
 
            <tr>
              <td>diwakar686</td>
              <td>diwakar686@gmail.com</td>
              <td>Male</td>
              <td>Howrah, West Bengal</td>
              <td>6754345672</td>
            </tr>
 
            <tr>
              <td>nupur898</td>
              <td>nupur898@gmail.com</td>
              <td>Female</td>
              <td>Kolkata, West Bengal</td>
              <td>6897654320</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</body>
 
</html>


Output: 

Example 5: This example using Bulma to create a hoverable table.

HTML




<html>
 
<head>
  <title>Bulma Table</title>
  <link rel='stylesheet' href=
 
  <!-- custom css -->
  <style>
    div.columns {
      margin-top: 50px;
    }
 
    h1 {
      color: green !important;
      margin-bottom: 20px;
 
    }
 
    .table td {
      font-size: 17px
    }
 
    .table th {
      font-size: 17px
    }
  </style>
</head>
 
<body>
  <div class='container has-text-centered'>
    <div class='columns is-mobile is-centered'>
      <div class='column is-8'>
        <div>
          <h1 class='title'>Users Information</h1>
          <hr>
        </div>
        <table class='table is-bordered is-hoverable'>
          <thead>
            <tr>
              <th>Username</th>
              <th>Email</th>
              <th>Gender</th>
              <th>Address</th>
              <th>Phone No.</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>vilod565</td>
              <td>vilod565@gmail.com</td>
              <td>Male</td>
              <td>Kolkata, West Bengal</td>
              <td>9856435632</td>
            </tr>
 
            <tr>
              <td>deepak123</td>
              <td>deepak123@gmail.com</td>
              <td>Male</td>
              <td>Hooghly, West Bengal</td>
              <td>6556456421</td>
            </tr>
 
            <tr>
              <td>sneha345</td>
              <td>sneha345@gmail.com</td>
              <td>Female</td>
              <td>Howrah, West Bengal</td>
              <td>7674578634</td>
            </tr>
 
            <tr>
              <td>saimi875</td>
              <td>saimi875@gmail.com</td>
              <td>Male</td>
              <td>Birbhum, West Bengal</td>
              <td>8767543452</td>
            </tr>
 
            <tr>
              <td>santra765</td>
              <td>santra765@gmail.com</td>
              <td>Female</td>
              <td>Malda, West Bengal</td>
              <td>9567345237</td>
            </tr>
 
            <tr>
              <td>riya665</td>
              <td>riya665@gmail.com</td>
              <td>Female</td>
              <td>Jalpaiguri, West Bengal</td>
              <td>7656435634</td>
            </tr>
 
            <tr>
              <td>raja222</td>
              <td>raja222@gmail.com</td>
              <td>Male</td>
              <td>Malda, West Bengal</td>
              <td>8767543423</td>
            </tr>
 
            <tr>
              <td>kunal456</td>
              <td>kunal456@gmail.com</td>
              <td>Male</td>
              <td>Hooghly, West Bengal</td>
              <td>8654328974</td>
            </tr>
 
            <tr>
              <td>diwakar686</td>
              <td>diwakar686@gmail.com</td>
              <td>Male</td>
              <td>Howrah, West Bengal</td>
              <td>6754345672</td>
            </tr>
 
            <tr>
              <td>nupur898</td>
              <td>nupur898@gmail.com</td>
              <td>Female</td>
              <td>Kolkata, West Bengal</td>
              <td>6897654320</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</body>
 
</html>


Output: 

Example 6: This example creating a table with a colored background.

HTML




<!DOCTYPE html>
<html>
 
<head>
  <title>Bulma Table</title>
  <link rel='stylesheet' href=
  <!-- custom css -->
  <style>
    div.columns {
      margin-top: 50px;
    }
 
    h1 {
      color: green !important;
      margin-bottom: 20px;
 
    }
 
    .table td {
      font-size: 17px
    }
 
    .table th {
      font-size: 17px
    }
  </style>
</head>
 
<body>
  <div class='container has-text-centered'>
    <div class='columns is-mobile is-centered'>
      <div class='column is-8'>
        <div>
          <h1 class='title'>Users Information</h1>
          <hr>
        </div>
        <table class='table is-bordered has-background-primary'>
          <thead>
            <tr>
              <th>Username</th>
              <th>Email</th>
              <th>Gender</th>
              <th>Address</th>
              <th>Phone No.</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>vilod565</td>
              <td>vilod565@gmail.com</td>
              <td>Male</td>
              <td>Kolkata, West Bengal</td>
              <td>9856435632</td>
            </tr>
 
            <tr>
              <td>deepak123</td>
              <td>deepak123@gmail.com</td>
              <td>Male</td>
              <td>Hooghly, West Bengal</td>
              <td>6556456421</td>
            </tr>
 
            <tr>
              <td>sneha345</td>
              <td>sneha345@gmail.com</td>
              <td>Female</td>
              <td>Howrah, West Bengal</td>
              <td>7674578634</td>
            </tr>
 
            <tr>
              <td>saimi875</td>
              <td>saimi875@gmail.com</td>
              <td>Male</td>
              <td>Birbhum, West Bengal</td>
              <td>8767543452</td>
            </tr>
 
            <tr>
              <td>santra765</td>
              <td>santra765@gmail.com</td>
              <td>Female</td>
              <td>Malda, West Bengal</td>
              <td>9567345237</td>
            </tr>
 
            <tr>
              <td>riya665</td>
              <td>riya665@gmail.com</td>
              <td>Female</td>
              <td>Jalpaiguri, West Bengal</td>
              <td>7656435634</td>
            </tr>
 
            <tr>
              <td>raja222</td>
              <td>raja222@gmail.com</td>
              <td>Male</td>
              <td>Malda, West Bengal</td>
              <td>8767543423</td>
            </tr>
 
            <tr>
              <td>kunal456</td>
              <td>kunal456@gmail.com</td>
              <td>Male</td>
              <td>Hooghly, West Bengal</td>
              <td>8654328974</td>
            </tr>
 
            <tr>
              <td>diwakar686</td>
              <td>diwakar686@gmail.com</td>
              <td>Male</td>
              <td>Howrah, West Bengal</td>
              <td>6754345672</td>
            </tr>
 
            <tr>
              <td>nupur898</td>
              <td>nupur898@gmail.com</td>
              <td>Female</td>
              <td>Kolkata, West Bengal</td>
              <td>6897654320</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</body>
 
</html>


Output: 

Note: Here in all the above examples, we use some extra Bulma classes like container, column, title has-text-centered, etc to design the content well.
 



Last Updated : 05 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads