Bulma Table Variables
Last Updated :
28 Jul, 2022
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.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Variable</title>
<link rel='stylesheet' href=
<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.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Variable</title>
<link rel='stylesheet' href=
<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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...