Source

Tabel

Dokumentasi lan conto kanggo milih gaya tabel (diwenehi panggunaan umum ing plugin JavaScript) nganggo Bootstrap.

Tuladha

Amarga panggunaan tabel sing nyebar ing widget pihak katelu kaya tanggalan lan pemilih tanggal, kita wis ngrancang tabel supaya bisa milih . Cukup tambahake kelas dasar .tablemenyang sembarang <table>, banjur tambah karo gaya khusus utawa macem-macem kelas modifier sing kalebu.

Nggunakake markup tabel paling dhasar, kene carane .tabletabel basis katon ing Bootstrap. Kabeh gaya tabel diwarisake ing Bootstrap 4 , tegese tabel sing disusun bakal ditata kanthi cara sing padha karo wong tuwa.

# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry si Manuk @twitter 
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Sampeyan uga bisa ngowahi werna-karo teks cahya ing latar mburi peteng-karo .table-dark.

# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry si Manuk @twitter 
<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Pilihan sirah meja

Kaya karo tabel lan tabel peteng, gunakake kelas modifier .thead-lightutawa .thead-darknggawe <thead>s katon abu-abu cahya utawa peteng.

# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry si Manuk @twitter
# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry si Manuk @twitter 
<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Larik belang

Gunakake .table-stripedkanggo nambah zebra-striping menyang sembarang baris tabel ing <tbody>.

# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry si Manuk @twitter 
<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry si Manuk @twitter 
<table class="table table-striped table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Tabel wewatesan

Tambah .table-borderedkanggo wates ing kabeh pinggir meja lan sel.

# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry the Bird @twitter 
<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry the Bird @twitter 
<table class="table table-bordered table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Tabel tanpa wates

Tambah .table-borderlesskanggo meja tanpa wates.

# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry the Bird @twitter 
<table class="table table-borderless">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

.table-borderlessuga bisa digunakake ing meja peteng.

# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry the Bird @twitter 
<table class="table table-borderless table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Larik sing bisa dilebokake

Tambah .table-hoverkanggo ngaktifake status hover ing baris tabel ing a <tbody>.

# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry the Bird @twitter 
<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry the Bird @twitter 
<table class="table table-hover table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Meja cilik

Tambah .table-smkanggo nggawe tabel luwih kompak kanthi ngethok lapisan sel dadi setengah.

# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry the Bird @twitter 
<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry the Bird @twitter 
<table class="table table-sm table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Kelas kontekstual

Gunakake kelas kontekstual kanggo warna baris tabel utawa sel individu.

kelas judhul judhul
Aktif sel sel
Default sel sel
utami sel sel
Sekunder sel sel
Sukses sel sel
bebaya sel sel
Pènget sel sel
Info sel sel
cahya sel sel
Peteng sel sel 
<!-- On rows -->
<tr class="table-active">...</tr>

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

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>

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

Varian latar mburi meja reguler ora kasedhiya karo meja peteng, nanging sampeyan bisa nggunakake utilitas teks utawa latar mburi kanggo entuk gaya sing padha.

# judhul judhul
1 sel sel
2 sel sel
3 sel sel
4 sel sel
5 sel sel
6 sel sel
7 sel sel
8 sel sel
9 sel sel 
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>
Nuduhake makna kanggo teknologi assistive

Nggunakake warna kanggo nambah makna mung menehi indikasi visual, sing ora bakal dikirim menyang pangguna teknologi bantu - kayata pembaca layar. Priksa manawa informasi sing dituduhake kanthi warna katon jelas saka isi kasebut (umpamane teks sing katon), utawa kalebu liwat cara alternatif, kayata teks tambahan sing didhelikake karo .sr-onlykelas.

Nggawe tabel responsif kanthi mbungkus sembarang .tablekaro .table-responsive{-sm|-md|-lg|-xl}, nggawe tabel nggulung horisontal ing saben max-widthbreakpoint nganti (nanging ora kalebu) 576px, 768px, 992px, lan 1120px, mungguh.

Elinga yen browser saiki ora ndhukung pitakon konteks jangkoan , kita bisa ngatasi watesan min-lan max-prefiks lan viewport kanthi jembar pecahan (sing bisa kedadeyan ing kahanan tartamtu ing piranti dpi dhuwur, contone) kanthi nggunakake nilai kanthi presisi sing luwih dhuwur kanggo mbandhingake. .

Caption

A <caption>fungsi kaya judhul kanggo tabel. Iku mbantu pangguna karo maca layar kanggo nemokake tabel lan ngerti apa iku lan mutusaké apa padha arep maca.

Dhaptar pangguna
# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry si Manuk @twitter 
<table class="table">
  <caption>List of users</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Tabel responsif

Tabel responsif ngidini tabel bisa digulung kanthi horisontal kanthi gampang. Nggawe tabel responsif ing kabeh viewports kanthi mbungkus .tablekaro .table-responsive. Utawa, pilih breakpoint maksimum sing bisa digunakake kanggo tabel responsif kanthi nggunakake .table-responsive{-sm|-md|-lg|-xl}.

Kliping / pemotongan vertikal

Tabel responsif nggunakake overflow-y: hidden, sing ngethok konten sing ngluwihi sisih ngisor utawa ndhuwur meja. Utamane, iki bisa ngilangi menu gulung mudhun lan widget pihak katelu liyane.

Tansah responsif

Ing saben breakpoint, gunakake .table-responsivekanggo nggulung tabel horisontal.

# judhul judhul judhul judhul judhul judhul judhul judhul judhul
1 sel sel sel sel sel sel sel sel sel
2 sel sel sel sel sel sel sel sel sel
3 sel sel sel sel sel sel sel sel sel 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Breakpoint tartamtu

Gunakake .table-responsive{-sm|-md|-lg|-xl}yen perlu kanggo nggawe tabel responsif nganti breakpoint tartamtu. Saka breakpoint lan munggah, tabel bakal tumindak normal lan ora nggulung horisontal.

Tabel kasebut bisa uga katon rusak nganti gaya responsif ditrapake ing jembar viewport tartamtu.

# judhul judhul judhul judhul judhul judhul judhul judhul
1 sel sel sel sel sel sel sel sel
2 sel sel sel sel sel sel sel sel
3 sel sel sel sel sel sel sel sel 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# judhul judhul judhul judhul judhul judhul judhul judhul
1 sel sel sel sel sel sel sel sel
2 sel sel sel sel sel sel sel sel
3 sel sel sel sel sel sel sel sel 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# judhul judhul judhul judhul judhul judhul judhul judhul
1 sel sel sel sel sel sel sel sel
2 sel sel sel sel sel sel sel sel
3 sel sel sel sel sel sel sel sel 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# judhul judhul judhul judhul judhul judhul judhul judhul
1 sel sel sel sel sel sel sel sel
2 sel sel sel sel sel sel sel sel
3 sel sel sel sel sel sel sel sel 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>