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.
Syntax to use variables:
$property-name: Property-value;
Variable Used:
Name | Description | Type | Value | Computed Value | Computed Type |
---|---|---|---|---|---|
$table-color | This property is used to provide color to the table. | variable | $text-strong | hsl(0, 0%, 21%) | color |
$table-background-color | This property is used to provide background color to the table. | variable | $scheme-main | hsl(0, 0%, 100%) | color |
$table-cell-border | This property is used to provide a border cell to the table. | size | 1px solid $border | ||
$table-cell-border-width | This property is used to define the border width of the table. | size | 0 0 1px | ||
$table-cell-padding | This property is used to define the padding of the cell in the table. | size | 0.5em 0.75em | ||
$table-cell-heading-color | This property is used to provide color to the heading cell of the table. | variable | $text-strong | hsl(0, 0%, 21%) | color |
$table-cell-text-align | This property is used to align text into the center of the cell in the table. | string | left | ||
$table-head-cell-border-width | This property is used to define the width of the head cell border. | size | 0 0 2px | ||
$table-head-cell-color | This property is used to define the color of the head cell of the table. | variable | $text-strong | hsl(0, 0%, 21%) | color |
$table-foot-cell-border-width | This property is used to define the width of the foot cell in the table. | size | 2px 0 0 | ||
$table-foot-cell-color | This property is used to define the color of the foot of the cell. | variable | $text-strong | hsl(0, 0%, 21%) | color |
$table-head-background-color | This property is used to provide the background color of the head of the table. | string | transparent | ||
$table-body-background-color | This property is used to provide the background color of the body. | string | transparent | ||
$table-foot-background-color | This property is used to provide background color to the foot table. | string | transparent | ||
$table-row-hover-background-color | This property is used to provide background color to the row table on hover. | variable | $scheme-main-bis | hsl(0, 0%, 98%) | color |
$table-row-active-background-color | This property is used to provide background color to the active row. | variable | $primary | hsl(171, 100%, 41%) | color |
$table-row-active-color | This property is used to provide color to the active row of the table. | variable | $primary-invert | #fff | color |
$table-striped-row-even-background-color | This property is used to provide background color to the even row. | variable | $scheme-main-bis | hsl(0, 0%, 98%) | color |
$table-striped-row-even-hover-background-color | This property is used to provide background color to the even rows on hover. | variable | $scheme-main-ter | hsl(0, 0%, 96%) | color |
$table-colors | This property is used to provide color to the table. | variable | $colors | Bulma colors | map |
Example 1: In the below code, we will make use of the above variable to demonstrate the use of the table.
<!DOCTYPE html> < html >
< head >
< title >Bulma Variable</ title >
< link rel = 'stylesheet' href =
<!-- font-awesome cdn -->
< script src =
</ script >
< link rel = "stylesheet" href = "style.css" >
< style >
.title{
color:green;
}
nav{
margin-left:200px;
margin-right:200px;
}
</ style >
</ head >
< body >
< h1 class = "title has-text-centered" >
GeekforGeeks
</ h1 >
< h3 class = "subtitle has-text-centered" >
A computer science portal for geeks.
</ h3 >< br >
< 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 >vinod34</ td >
< td >vilod565@gmail.com</ td >
< td >Male</ td >
< td >West Bengal</ td >
< td >9856777809</ td >
</ tr >
< tr >
< td >deepak13</ td >
< td >deepak13@gmail.com</ td >
< td >Male</ td >
< td >Mumbai</ td >
< td >6556455521</ td >
</ tr >
< tr >
< td >sneha345</ td >
< td >sneha345@gmail.com</ td >
< td >Female</ td >
< td >Dadar</ td >
< td >7674544434</ td >
</ tr >
< tr >
< td >saimi875</ td >
< td >saimi875@gmail.com</ td >
< td >Male</ td >
< td >Borivali</ td >
< td >8767543452</ td >
</ tr >
< tr >
< td >santra765</ td >
< td >santra765@gmail.com</ td >
< td >Female</ td >
< td >Dahisar</ td >
< td >9567345237</ td >
</ tr >
</ tbody >
</ table >
</ div >
</ div >
</ div >
</ body >
</ html >
|
SCSS Code:
$table-colors:lightgreen; .table{ color:$table-colors; }
Compiled CSS Code:
.table { color: lightgreen; }
Output:
Example 2: In the below code, we will make use of the above variable to demonstrate the use of the table.
<!DOCTYPE html> < html >
< head >
< title >Bulma Variable</ title >
< link rel = 'stylesheet' href =
<!-- font-awesome cdn -->
< script src =
</ script >
< link rel = "stylesheet" href = "style.css" >
< style >
.title{
color:green;
}
nav{
margin-left:200px;
margin-right:200px;
}
</ style >
</ head >
< body >
< h1 class = "title has-text-centered" >
GeekforGeeks
</ h1 >
< h3 class = "subtitle has-text-centered" >
A computer science portal for geeks.
</ h3 >< br >
< 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 >vinod34</ td >
< td >vilod565@gmail.com</ td >
< td >Male</ td >
< td >West Bengal</ td >
< td >9856777809</ td >
</ tr >
< tr >
< td >deepak13</ td >
< td >deepak13@gmail.com</ td >
< td >Male</ td >
< td >Mumbai</ td >
< td >6556455521</ td >
</ tr >
< tr >
< td >sneha345</ td >
< td >sneha345@gmail.com</ td >
< td >Female</ td >
< td >Dadar</ td >
< td >7674544434</ td >
</ tr >
< tr >
< td >saimi875</ td >
< td >saimi875@gmail.com</ td >
< td >Male</ td >
< td >Borivali</ td >
< td >8767543452</ td >
</ tr >
< tr >
< td >santra765</ td >
< td >santra765@gmail.com</ td >
< td >Female</ td >
< td >Dahisar</ td >
< td >9567345237</ td >
</ tr >
</ tbody >
</ table >
</ div >
</ div >
</ div >
</ body >
</ html >
|
SCSS Code:
$table-background-color:lightgreen; .table{ background-color:$table-background-color; }
Compiled CSS Code:
.table { background-color: lightgreen; }
Output:
Reference: https://bulma.io/documentation/elements/table/#variables