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, 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.
Please Login to comment...