Blog

Bulma – Table

Bulma table

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.NoTag & 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

This Post Has 2 Comments

Leave a Reply