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=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- font-awesome cdn -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</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=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- font-awesome cdn -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</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