Bulma - Table

Description

Bulma wraps the elements for displaying data in a tabular format. You need to add 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 element for displaying data in a tabular format.
2

<thead>

It is a top part of the table that contains element for table header rows.
3

<tbody>

It contains element 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

<th>

It defines 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 in the page, then add the base class of .table to any table as shown in the following example −

Live Demo 
<!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>

It displays the below output −

Modifiers

Bulma supports 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 usage of is-bordered modifier in the table as shown below.

Live Demo 
<!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>

It displays the below output −

To make use of other modifiers, just replace the above used modifier with the other modifier in the table.

bulma_elements.htm
Advertisements