Table Component
The Table component is a powerful UI element used to display data in a structured format, allowing users to easily scan and analyze information.
Regular Table
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>[email protected]</td>
<td>(123) 456-7890</td>
<td>USA</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>[email protected]</td>
<td>(098) 765-4321</td>
<td>UK</td>
</tr>
<tr>
<td>3</td>
<td>Sam Wilson</td>
<td>[email protected]</td>
<td>(111) 222-3333</td>
<td>Canada</td>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
<table className="table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>[email protected]</td>
<td>(123) 456-7890</td>
<td>USA</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>[email protected]</td>
<td>(098) 765-4321</td>
<td>UK</td>
</tr>
<tr>
<td>3</td>
<td>Sam Wilson</td>
<td>[email protected]</td>
<td>(111) 222-3333</td>
<td>Canada</td>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
Table Heading
<table class="table table-heading">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>[email protected]</td>
<td>(123) 456-7890</td>
<td>USA</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>[email protected]</td>
<td>(098) 765-4321</td>
<td>UK</td>
</tr>
<tr>
<td>3</td>
<td>Sam Wilson</td>
<td>[email protected]</td>
<td>(111) 222-3333</td>
<td>Canada</td>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
<table className="table table-heading">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>[email protected]</td>
<td>(123) 456-7890</td>
<td>USA</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>[email protected]</td>
<td>(098) 765-4321</td>
<td>UK</td>
</tr>
<tr>
<td>3</td>
<td>Sam Wilson</td>
<td>[email protected]</td>
<td>(111) 222-3333</td>
<td>Canada</td>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
Table Active
<table class="table table-heading">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>[email protected]</td>
<td>(123) 456-7890</td>
<td>USA</td>
</tr>
<tr class="is-active">
<td>2</td>
<td>Jane Smith</td>
<td>[email protected]</td>
<td>(098) 765-4321</td>
<td>UK</td>
</tr>
<tr>
<td>3</td>
<td>Sam Wilson</td>
<td>[email protected]</td>
<td>(111) 222-3333</td>
<td>Canada</td>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
<table className="table table-heading">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>[email protected]</td>
<td>(123) 456-7890</td>
<td>USA</td>
</tr>
<tr className="is-active">
<td>2</td>
<td>Jane Smith</td>
<td>[email protected]</td>
<td>(098) 765-4321</td>
<td>UK</td>
</tr>
<tr>
<td>3</td>
<td>Sam Wilson</td>
<td>[email protected]</td>
<td>(111) 222-3333</td>
<td>Canada</td>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
Table hover
<table class="table is-hover">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>[email protected]</td>
<td>(123) 456-7890</td>
<td>USA</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>[email protected]</td>
<td>(098) 765-4321</td>
<td>UK</td>
</tr>
<tr>
<td>3</td>
<td>Sam Wilson</td>
<td>[email protected]</td>
<td>(111) 222-3333</td>
<td>Canada</td>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
<table className="table is-hover">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>[email protected]</td>
<td>(123) 456-7890</td>
<td>USA</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>[email protected]</td>
<td>(098) 765-4321</td>
<td>UK</td>
</tr>
<tr>
<td>3</td>
<td>Sam Wilson</td>
<td>[email protected]</td>
<td>(111) 222-3333</td>
<td>Canada</td>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
Table Zebra
<table class="table is-zebra">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>[email protected]</td>
<td>(123) 456-7890</td>
<td>USA</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>[email protected]</td>
<td>(098) 765-4321</td>
<td>UK</td>
</tr>
<tr>
<td>3</td>
<td>Sam Wilson</td>
<td>[email protected]</td>
<td>(111) 222-3333</td>
<td>Canada</td>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
<table className="table is-zebra">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>[email protected]</td>
<td>(123) 456-7890</td>
<td>USA</td>
</tr>
<tr>
<td>2</td>
<td>Jane Smith</td>
<td>[email protected]</td>
<td>(098) 765-4321</td>
<td>UK</td>
</tr>
<tr>
<td>3</td>
<td>Sam Wilson</td>
<td>[email protected]</td>
<td>(111) 222-3333</td>
<td>Canada</td>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>