Bulma Table

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 - It is an optional bottom part of the table.
  • tbody - It is the main content of the table.
    • tr -It refers to each table row.
      • th - It is used to represent table cell headings.
      • td - It is used to specify table cells.

Steps To Create Bulma CSS Table

You can create a Bulma CSS table 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.

Example

Name Age
John Smith 30
John Doe 35

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Name Age
John Smith 30
John Doe 35

Bulma CSS Table: Bordered

To create bordered table, just assign .is-bordered modifier class to the <table> element base class having .table modifier class.

Example

Name Age
John Smith 30
John Doe 35

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Name Age
John Smith 30
John Doe 35

Bulma CSS Table: Striped

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

Example

Fruits Price(Rs.)
Mango 40
Orange 60

General Syntax

Try it now

Source Code

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

Try it now

Source Code

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, 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

Try it now

Source Code

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

Try it now

Source Code

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

Name Age
John Smith 40
Mithlesh Yadav 35

General Syntax

Try it now

Source Code

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

Name Age
John Smith 40
Mithlesh Yadav 35

General Syntax

Try it now

Source Code

Try it now

Source Code : Output

Name Age
John Smith 40
Mithlesh Yadav 35