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 . Mung nambah kelas dhasar .tablekanggo 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 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 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 manuk @twitter
# Pisanan Pungkasan nangani
1 Tandhani Otto @mdo
2 Yakub Thornton @lemak
3 Larry 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 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 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 Manuk @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 Manuk @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 Manuk @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 Manuk @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 Manuk @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 Manuk @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 Manuk @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 Manuk @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 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

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}.

Vertical clipping/truncation

Responsive tables make use of overflow-y: hidden, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.

Always responsive

Across every breakpoint, use .table-responsive for horizontally scrolling tables.

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Breakpoint specific

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