Tables

Available table styles.

Get Started

1

Bulma Tables

Basic Table

You can quicly setup a styled table by adding the .table class to a table Html element. Several modifiers are also available. You can use any combination of them.

ID Username Position Role Current projects Specialized in Actions
1 Michael Hoffman Engineer Admin 21 projects Php, Javascript, Html & CSS
2 Marjory Cambell Sales Rep Contributor 03 projects Sales and Marketing
3 Kevin Smith Engineer Collaborator 12 projects Javascript, Angular, Vue js
4 Adrian Fallow Sales Manager Reader 07 projects Sales and email marketing
5 Helen Miller Marketing Manager Collaborator 03 projects Sales and email marketing
6 Sarah Mitchells Accountant Collaborator 01 projects Finance and Accounting
7 Kareem Jabbar Accountant Manager 14 projects Finance and Accounting

Bordered Table

To draw borders around the table and its cells, add the .is-bordered modifier class to a .table element.

ID Username Position Role Current projects Specialized in Actions
1 Michael Hoffman Engineer Admin 21 projects Php, Javascript, Html & CSS
2 Marjory Cambell Sales Rep Contributor 03 projects Sales and Marketing
3 Kevin Smith Engineer Collaborator 12 projects Javascript, Angular, Vue js
4 Adrian Fallow Sales Manager Reader 07 projects Sales and email marketing
5 Helen Miller Marketing Manager Collaborator 03 projects Sales and email marketing
6 Sarah Mitchells Accountant Collaborator 01 projects Finance and Accounting
7 Kareem Jabbar Accountant Manager 14 projects Finance and Accounting

Striped Table

To make a table's rows striped, add the .is-striped modifier class to a .table element.

ID Username Position Role Current projects Specialized in Actions
1 Michael Hoffman Engineer Admin 21 projects Php, Javascript, Html & CSS
2 Marjory Cambell Sales Rep Contributor 03 projects Sales and Marketing
3 Kevin Smith Engineer Collaborator 12 projects Javascript, Angular, Vue js
4 Adrian Fallow Sales Manager Reader 07 projects Sales and email marketing
5 Helen Miller Marketing Manager Collaborator 03 projects Sales and email marketing
6 Sarah Mitchells Accountant Collaborator 01 projects Finance and Accounting
7 Kareem Jabbar Accountant Manager 14 projects Finance and Accounting

Narrowed Table

You can make rows narrower by adding the .is-narrow modifier class to a .table element.

ID Username Position Role Current projects Specialized in Actions
1 Michael Hoffman Engineer Admin 21 projects Php, Javascript, Html & CSS
2 Marjory Cambell Sales Rep Contributor 03 projects Sales and Marketing
3 Kevin Smith Engineer Collaborator 12 projects Javascript, Angular, Vue js
4 Adrian Fallow Sales Manager Reader 07 projects Sales and email marketing
5 Helen Miller Marketing Manager Collaborator 03 projects Sales and email marketing
6 Sarah Mitchells Accountant Collaborator 01 projects Finance and Accounting
7 Kareem Jabbar Accountant Manager 14 projects Finance and Accounting
2

Custom Tables

Responsive Table

If you want your table to behave responsively, use the responsive table. To do so, add the .responsive-table class to a Html table element. Color modifiers are also available for the table header. Available classes are .is-primary, .is-secondary, and .is-accent.

ID Name Role Projects Skills Actions
1 Michael Hoffman Engineer 21 projects Javascript
2 Marjory Cambell Sales Rep 03 projects Sales
3 Kevin Smith Engineer 12 projects Php
4 Adrian Fallow Sales Manager 07 projects Sales
5 Helen Miller Marketing Manager 03 projects Marketing
6 Sarah Mitchells Accountant 01 project Finance
7 Kareem Jabbar Accountant 14 projects Finance
ID Name Role Projects Skills Actions
1 Michael Hoffman Engineer 21 projects Javascript
2 Marjory Cambell Sales Rep 03 projects Sales
3 Kevin Smith Engineer 12 projects Php
4 Adrian Fallow Sales Manager 07 projects Sales
5 Helen Miller Marketing Manager 03 projects Marketing
6 Sarah Mitchells Accountant 01 project Finance
7 Kareem Jabbar Accountant 14 projects Finance
ID Name Role Projects Skills Actions
1 Michael Hoffman Engineer 21 projects Javascript
2 Marjory Cambell Sales Rep 03 projects Sales
3 Kevin Smith Engineer 12 projects Php
4 Adrian Fallow Sales Manager 07 projects Sales
5 Helen Miller Marketing Manager 03 projects Marketing
6 Sarah Mitchells Accountant 01 project Finance
7 Kareem Jabbar Accountant 14 projects Finance

Device compare Table

Use the device comparison table to compare app features between devices. Add the .device-table class to a .table element.

Invoice editing
Payments schedule
Collaboration
Permissions

Feature compare Table

Use the feature comparison table to compare features between pricing plans or app editions. Add the .compare-table class to a .table element.

STARTER PRO BUSINESS ENTERPRISE
Invoice editing
Payments schedule
Collaboration
Permissions
Online Storage