Skip to content
Related Articles

Related Articles

Improve Article

Bulma | Table

  • Last Updated : 18 Jun, 2020

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, striped 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.




<!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>Maldah, 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>Maldah, 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.




<!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>Maldah, 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>Maldah, 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.




<!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>Maldah, 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>Maldah, 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 striped bordered table.




<!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-striped 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>Maldah, 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>Maldah, 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>
  
<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>Maldah, 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>Maldah, 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 coloured background.




<!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>Maldah, 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>Maldah, 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.




My Personal Notes arrow_drop_up
Recommended Articles
Page :