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

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

Try it now

Source Code

Download

          
            <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

		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

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

Try it now

Source Code

Download

          
            <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

  
		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

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

Try it now

Source Code

Download

          
            <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

Download

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

Download

          
            <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

Download

          
            <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

Name	Age
John Smith	40
Mithlesh Yadav	35

General Syntax

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

Try it now

Source Code

Download

          
            <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

Bulma | Table

Steps To Create Bulma CSS Table

Example

Bulma CSS Table: Bordered

Example

Bulma CSS Table: Striped

Example

Bulma CSS Table: Narrow

Example

Bulma CSS Table: Hover

Example

Table: Full Width

Example

Bulma CSS Table: Scroll Bar

Example

Web Tutorials