Cara Membuat Tabel dengan Bootstrap V 5

Digital Cilacap - Artikel kali ini kami akan membahas mengenai Cara Membuat Tabel dengan Bootstrap V 5. Sebuah tampilan tabel sering kita buat dengan berbagai macam gaya. Nah kali ini dalam belajar framework bootstrap kita mencoba untuk membuat beberapa gaya tampilan tabel dengan bantuan bootstrap.

Biasanya sebuah codingan tabel dengan bootstrap menggunakan elemen (table) dengan diikuti oleh class dasar (table) dan bisa diperluas lagi dengan beberapa style varian class table lainnya.

Table Basic

Gunakan code berikut untuk membuat tabel basic bootstrap.

<table class="table">
  <thead>
    <tr>
      <th scope="col">#th>
      <th scope="col">Firstth>
      <th scope="col">Lastth>
      <th scope="col">Handleth>
    tr>
  thead>
  <tbody>
    <tr>
      <th scope="row">1th>
      <td>Marktd>
      <td>Ottotd>
      <td>@mdotd>
    tr>
    <tr>
      <th scope="row">2th>
      <td>Jacobtd>
      <td>Thorntontd>
      <td>@fattd>
    tr>
    <tr>
      <th scope="row">3th>
      <td colspan="2">Larry the Birdtd>
      <td>@twittertd>
    tr>
  tbody>
table>

Table Varian

Gunakan class kontekstual untuk mewarnai kolom/baris tabel. Kamu bisa memvariasikan beberapa style warna table ini, usahakan konten text didalam tabel masih bisa terlihat dan terbaca dengan jelas, namun jika kamu ingin menyembunyikannya bisa menambahkan class (visually-hidden).

<table class="table-primary">...table>
<table class="table-secondary">...table>
<table class="table-success">...table>
<table class="table-danger">...table>
<table class="table-warning">...table>
<table class="table-info">...table>
<table class="table-light">...table>
<table class="table-dark">...table>


<tr class="table-primary">...tr>
<tr class="table-secondary">...tr>
<tr class="table-success">...tr>
<tr class="table-danger">...tr>
<tr class="table-warning">...tr>
<tr class="table-info">...tr>
<tr class="table-light">...tr>
<tr class="table-dark">...tr>


<tr>
  <td class="table-primary">...td>
  <td class="table-secondary">...td>
  <td class="table-success">...td>
  <td class="table-danger">...td>
  <td class="table-warning">...td>
  <td class="table-info">...td>
  <td class="table-light">...td>
  <td class="table-dark">...td>
tr>

Table Striped Rows

Jika kamu ingin membuat tabel bergaris seperti zebra cross, silahkan tambahkan class (table-striped) didalam struktur codingan table.

<table class="table table-striped">
  ...
table>

Table Striped Colomns

Jika yang diatas membuat striped dengan baris, nah yang ingin membuat striped di area kolom. Kamu cukup menambahkan class (table-striped-colomns). Berikut tampilan dan codingannya

<table class="table table-striped-columns">
  ...
table>

Kamu bisa menggunakan variasi class lain, silahkan bereksperimen dengan menambahkan elemen class lain, diantaranya (table-dark), (table-success), (table-primary), (table-danger), (table-warning)

Table Hover

Gaya tabel hover ini membuat tampilan background muncul ketika kursor diarahkan ke kolom tabel. Kamu cukup menambahkan class (table-hover)

<table class="table table-striped table-hover">
  ...
table>

Table Active

Style table active ini membuat baris menjadi memiliki background yang berbeda dengan kolom lainnya (disoroti). Penggunaanya cukup dengan menambahkan class (table-active) yang bisa dimasukan didalam tag tr atau td.

 class="table">
  <thead>
    ...
  thead>
  <tbody>
    <tr class="table-active">
      ...
    tr>
    <tr>
      ...
    tr>
    <tr>
      <th scope="row">3th>
      <td colspan="2" class="table-active">Larry the Birdtd>
      <td>@twittertd>
    tr>
  tbody>
table>

Table Border

Membuat tabel berborder cukup mudah dengan bootstrap. Kita hanya menambahkan class (table-bordered) didalam struktur codingan table. Berikut tampilan dan sample codingannya

<table class="table table-bordered">
  ...
table>

Kamu bisa membuat warna pada garis tabel dengan menambahkan class (border-primary), (border-danger), (border-warning), (border-success) atau memberikan class (table-borderless) untuk menghilangkan garis tabel.

Table Small

Untuk membuat tabel yang ukurannya lebih kecil dari standar, kamu cukup menambahkan class (table-sm), maka tampilan tabel kamu akan terlhat kecil dari biasanya.

<table class="table table-sm">
  ...
table>

Table Group Divider

Kamu bisa membagi atau mengelompokan didalam group tabel menjadi (thead), (tbody), (tfoot) yang nantinya setiap bagian tersebut memiliki style tersendiri-sendiri. Dan jika kamu ingin menggabungan beberapa kolom bisa menambahkan colspan pada tag td. Misal colspan="2" artinya, menggabungkan dua kolom menjadi 1. sample seperti dibawah

<table class="table">
  <thead>
    <tr>
      <th scope="col">#th>
      <th scope="col">Firstth>
      <th scope="col">Lastth>
      <th scope="col">Handleth>
    tr>
  thead>
  <tbody class="table-group-divider">
    <tr>
      <th scope="row">1th>
      <td>Marktd>
      <td>Ottotd>
      <td>@mdotd>
    tr>
    <tr>
      <th scope="row">2th>
      <td>Jacobtd>
      <td>Thorntontd>
      <td>@fattd>
    tr>
    <tr>
      <th scope="row">3th>
      <td colspan="2">Larry the Birdtd>
      <td>@twittertd>
    tr>
  tbody>
table>

Table Vertical Alignment

Untuk membuat tabel di bootstrap dengan kolom sel (thead) selalu vertikal sejajar ke bawah dan sel (tbody) rata secara default dengan menambahkan class (align-middle), berikut sample pengaplikasannya.

<div class="table-responsive">
  <table class="table align-middle">
    <thead>
      <tr>
        ...
      tr>
    thead>
    <tbody>
      <tr>
        ...
      tr>
      <tr class="align-bottom">
        ...
      tr>
      <tr>
        <td>...td>
        <td>...td>
        <td class="align-top">This cell is aligned to the top.td>
        <td>...td>
      tr>
    tbody>
  table>
div>

Table Foot

Untuk menambahkan elemen catatan kaki, cukup dengan menambahkan tag (tfoot), berikut samplenya

<table class="table">
  <thead>
    ...
  thead>
  <tbody>
    ...
  tbody>
  <tfoot>
    ...
  tfoot>
table>

Table Caption

Kamu bisa menambahkan caption text heading didalam tabel dengan menambahkan tag (caption)

<table class="table table-sm">
  <caption>List of userscaption>
  <thead>
    ...
  thead>
  <tbody>
    ...
  tbody>
table>

Table Responsive

Class ini sering kami gunakan dalam membuat table di project kami. Untuk cara membuat tabel responsive di bootstrap agar tampilan table bisa menyesuaikan atau bisa digulir secara horizontal yaitu dengan menambahkan class (table-responsive).

<div class="table-responsive">
  <table class="table">
    ...
  table>
div>

Demikian beberapa cara membuat tabel dengan bootstrap. Kamu bisa memvariasikan atau mengkombinasikan beberapa style class table menjadi tampilan tabel yang kamu kehendaki. Semoga bermanfaat buat kita semua. Jika Anda sedang mencari jasa pembuatan website dan desain grafis, silahkan hubungi kami Digital Cilacap dot Com.

cara membuat tabel dengan bootstrap v 5