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