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.
<!DOCTYPE html>
<html>
<head>
<title>Bulma Table</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- 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.
<!DOCTYPE html>
<html>
<head>
<title>Bulma Table</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- 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.
<!DOCTYPE html>
<html>
<head>
<title>Bulma Table</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- 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.
<!DOCTYPE html>
<html>
<head>
<title>Bulma Table</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- 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>
<head>
<title>Bulma Table</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- 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.
<!DOCTYPE html>
<html>
<head>
<title>Bulma Table</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- 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.