Bulma | Table

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:



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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.