In this guide, we will discuss Table in Bulma.
Description
Bulma wraps the elements for displaying data in a tabular format. You need to add a base class of .table class to a <table> with the below table elements −
| Sr.No | Tag & Description |
|---|---|
| 1 | <table> It is a main container, which wraps elements for displaying data in a tabular format. |
| 2 | <head> It is a top part of the table that contains elements for table header rows. |
| 3 | <body> It contains elements for table rows (<tr>) in the body of the table. |
| 4 | <tr> It specifies set of table cells (<td> or <th>) that appears on a single row. |
| 5 | <the> It defines the heading of the table cell. |
| 6 | <td> It is a default table cell. |
| 7 | <tfoot> It is a bottom part of the table. |
Basic Table
If you want to display basic table style on the page, then add the base class of .table to any table as shown in the following example −
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "is-size-5">
Basic Table
</span>
<br>
<table class = "table">
<thead>
<tr>
<th>Position</th>
<th>Name</th>
<th>Country</th>
</tr>
</thead>
<tfoot>
<tr>
<th><abbr title = "Position">Pos</abbr></th>
<th>Player</th>
<th>
<abbr title = "Played for the country">Country</abbr>
</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>Sachin</td>
<td>India</td>
</tr>
<tr>
<td>2</td>
<td>Smith</td>
<td>Australia</td>
</tr>
<tr>
<td>3</td>
<td>Joe Root</td>
<td>England</td>
</tr>
</tbody>
</table>
</div>
</section>
</body>
</html>
Modifiers
Bulma supports the following modifiers to display the table in different styles.
- is-bordered
- is-striped
- is-narrow
- is-hoverable
- is-fullwidth
We will take the above example and use the required modifiers along with the .table class. Here, we will see the usage of is-bordered modifiers in the table as shown below.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements Example</title>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<section class = "section">
<div class = "container">
<span class = "is-size-5">
Bordered Table
</span>
<br>
<table class = "table is-bordered">
<thead>
<tr>
<th>Position</th>
<th>Name</th>
<th>Country</th>
</tr>
</thead>
<tfoot>
<tr>
<th>
<abbr title = "Position">Pos</abbr>
</th>
<th>Player</th>
<th>
<abbr title = "Played for the country">Country</abbr>
</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>Sachin</td>
<td>India</td>
</tr>
<tr>
<td>2</td>
<td>Smith</td>
<td>Australia</td>
</tr>
<tr>
<td>3</td>
<td>Joe Root</td>
<td>England</td>
</tr>
</tbody>
</table>
</div>
</section>
</body>
</html>
To make use of other modifiers, just replace the above used modifier with the other modifier in the table.
Next Topic : Click Here
Pingback: Bulma - Elements | Adglob Infosystem Pvt Ltd
Pingback: Bulma - Notification and Progress bars | Adglob Infosystem Pvt Ltd