Bulma | Table

Bulma CSS provides different predefined Bulma table classes that are used to create a different table style. HTML <table> element has followings structures:

The <table class="table"> is the main container of the table.
- thead - It is an optional top part of the table.
- tfoot the optional bottom part of the table
- tbody the main content of the table
  - tr each table row
    - th a table cell heading
    - td a table cell

Modifiers - Bulma provides different modifiers classes that are used along with .table class. It displays the table in different styles.

is-bordered
is-striped
is-narrow
is-hoverable
is-fullwidth

Steps To Create A Bulma Tables

You can create a table in Bulma CSS by assigning the .table modifier class to the <table> element base class. You can display a table row as a selected by assigning the .is-selected modifier class to the <tr> base class.

Bulma Table Example

Name	Age
John Smith	30
John Doe	35

General Syntax

      
        <table class="table"></table>

Try it now

Source Code

          
            <div class="container">
   <table class="table">
      <thead>
         <tr>
            <th>Name</th>
            <th>Age</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>John Smith</td>
            <td>30</td>
         </tr>
         <tr>
            <td>John Doe</td>
            <td>35</td>
         </tr>
      </tbody>
   </table>
</div>

Try it now

Source Code : Output

Bulma CSS Table: Bordered

To create a bordered table, just assign .is-bordered modifier class to the <table> element base class having .table modifier class. These classes add borders to all the cells.

Example

Name	Age
John Smith	30
John Doe	35

General Syntax

      
        <table class="table is-bordered"></table>

Try it now

Source Code

          
            <div class="container">
   <table class="table is-bordered">
      <thead>
         <tr>
            <th>Name</th>
            <th>Age</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>John Smith</td>
            <td>30</td>
         </tr>
         <tr>
            <td>John Doe</td>
            <td>35</td>
         </tr>
      </tbody>
   </table>
</div>

Try it now

Source Code : Output

Bulma CSS Table: Striped

To create striped table, assign .is-striped modifier class to the <table> element base class having .table modifier class. These classes add stripes to the table.

Example

Fruits	Price(Rs.)
Mango	40
Orange	60

General Syntax

      
        <table class="table is-striped"></table>

Try it now

Source Code

          
            <div class="container">
   <table class="table is-striped">
      <thead>
         <tr>
            <th>Fruits</th>
            <th>Price(Rs.)</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Mango</td>
            <td>40</td>
         </tr>
         <tr>
            <td>Orange</td>
            <td>60</td>
         </tr>
      </tbody>
   </table>
</div>

Try it now

Source Code : Output

   
            Fruits
            Price(Rs.)
         
            Mango
            40
         
            Orange
            60

Bulma CSS Table: Narrow

To make the table cell narrow, assign .table is-narrow modifier class to the <table> element base class.

Example

Name	Age
John Smith	40
Mithlesh Yadav	35

General Syntax

      
        <table class="table is-narrow"></table>

Try it now

Source Code

          
            <div class="container">
   <table class="table is-narrow">
      <thead>
         <tr>
            <th>Name</th>
            <th>Age</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>John Smith</td>
            <td>40</td>
         </tr>
         <tr>
            <td>Mithlesh Yadav</td>
            <td>35</td>
         </tr>
      </tbody>
   </table>
</div>

Try it now

Source Code : Output

   
            Name
            Age
         
            John Smith
            40
         
            Mithlesh Yadav
            35

Bulma CSS Table: Hover

To create a table with hover effect on each rows, simply assign the .table is-hoverable modifier class to the <table> element base class.

Example

Name	Age
John Smith	40
Mithlesh Yadav	35

General Syntax

      
        <table class="table is-hoverable"></table>

Try it now

Source Code

          
            <div class="container">
   <table class="table is-hoverable">
      <thead>
         <tr>
            <th>Name</th>
            <th>Age</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>John Smith</td>
            <td>40</td>
         </tr>
         <tr>
            <td>Mithlesh Yadav</td>
            <td>35</td>
         </tr>
      </tbody>
   </table>
</div>

Try it now

Source Code : Output

   
            Name
            Age
         
            John Smith
            40
         
            Mithlesh Yadav
            35

Table: Full Width

You can create table with full width by assigning .table is-fullwidth modifier class to the <table> element base class having .table modifier class.

Example

Name	Age
John Smith	40
Mithlesh Yadav	35

General Syntax

      
        <table class="table table is-fullwidth "></table>

Try it now

Source Code

          
            <div class="container">
   <table class="table table is-fullwidth">
      <thead>
         <tr>
            <th>Name</th>
            <th>Age</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>John Smith</td>
            <td>40</td>
         </tr>
         <tr>
            <td>Mithlesh Yadav</td>
            <td>35</td>
         </tr>
      </tbody>
   </table>
</div>

Try it now

Source Code : Output

   
            Name
            Age
         
            John Smith
            40
         
            Mithlesh Yadav
            35

Bulma CSS Table: Scroll Bar

To create a scrollable table, simply wrap the table inside the container having a .table-container modifier class.

Example

First Name	Last Name	Gender	Age	Education	Grade	Skilss	Experience	Country	City	Po	Zip	Contact
Mithlesh	Kumar	Male	27	B.tect	A	Web Development	10	India	Kanpur	Kakadev	202566	455xxxxxxx	Dilip	Kumar	Male	25	B.tect	A	Web Development	10	India	Kanpur	Kakadev	202566	455xxxxxxx

General Syntax

      
        <div class="table-container">
  <table class="table">
    <!-- Your table content -->
  </table>
</div>

Try it now

Source Code

          
            <div class="table-container">
   <table class="table table is-fullwidth">
      <thead>
         <tr>
            <th>Name</th>
            <th>Age</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>John Smith</td>
            <td>40</td>
         </tr>
         <tr>
            <td>Mithlesh Yadav</td>
            <td>35</td>
         </tr>
      </tbody>
   </table>
</div>

Try it now

Source Code : Output

   
            Name
            Age
         
            John Smith
            40
         
            Mithlesh Yadav
            35

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4