Hit enter after type your search item

How to Create Bulma Tables

Creating HTML tables with style by using Bulma CSS framework is pretty simple. Not only you may use the built-in table classes for a table with basic style, stripped table, hovering effect etc. but you may also use the Sass variables for allowing easy customization like table coloring, table background color, header background color and many more.

In the following section, I will show you how easy the process of creating and styling the table with customization as using the Bulma CSS.

An example of a simple table in Bulma

You just need to assign the .table class in the main table tag for applying the basic styling by Bulma for HTML tables.

bulma table

See online demo and code

The example of a stripped table

The stripped table is the one where one row is different from the other like the stripes of a zebra. The stripped table is easy to create by simply adding the is-stripped class along with the main .table class as shown in the example below:

bulma table stripped

See online demo and code

<table class=”table is-striped”>

The rest of the code is the same as in the above demo.

How to create a table with hovered rows?

In the above two examples, the rows remain the same as you hover the mouse of the rows. To add the hovering effect in each row, you may add the .is-hoverable class as follows:

See online demo and code

<table class=”table is-striped is-hoverable”>

Creating full width table example

For creating the full available width table, simply use the .is-fullwidth class:

bulma table full width

See online demo and code

<table class=”table is-striped is-fullwidth”>

The full width table is fully responsive and adjusts the available screen width accordingly.

An example of narrow table

Similarly, you may create a narrow table by using the is-narrow class as shown below:

See online demo and code

<table class=”table is-striped is-narrow”>

How to distinguish a row example

Sometimes, you need to make one or more rows prominent or distinct from others. For that, you may simply add a modifier is-selected on those rows. The example below shows making one row distinctive than others:

bulma table distinct

See online demo and code

You can see the last row is green.

A bordered table example

Add the .is-bordered modifier for a table with borders. The example below is a bordered table with the first row selected. Also, it will uses the full available width:

bulma table border

See online demo and code

The code for table and first rows tags:

See the full code and output in the demo page.

Creating the scrollable table example

In certain cases, your table may contain lots of cells in a row that can’t be accommodated in the available width. In that case, you may create a scrollable table by using the .table-container class in the container with the table:

bulma table scrolling

See online demo and code

How to customize tables as using Bulma?

For customizing the table element e.g. changing the border default color, table background, hovering color etc. you may use the variables as given in the Bulma documentation.

For that, you need to have an idea how Sass works. A few variables include:

  • $table-background-color
  • $table-color
  • $table-cell-heading-color
  • $table-head-background-color
  • $table-row-hover-background-color

And many more.

This div height required for enabling the sticky sidebar