Source

tabél

Dokuméntasi sareng conto pikeun milih gaya tabel (dibikeun panggunaan umumna dina plugins JavaScript) sareng Bootstrap.

Contona

Kusabab pamakean tabel anu nyebar dina widget pihak katilu sapertos almenak sareng pamilih tanggal, kami parantos ngararancang tabel kami pikeun milih . Ngan tambahkeun kelas dasar .tablekana naon waé <table>, teras manjangkeun ku gaya khusus atanapi sababaraha kelas modifier anu kalebet.

Nganggo markup tabel anu paling dasar, ieu kumaha .tabletabel dumasar kana Bootstrap. Sadaya gaya méja diwariskeun dina Bootstrap 4 , hartosna tabel anu aya dina gaya anu sami sareng indungna.

# kahiji Panungtungan Nanganan
1 Tandaan Otto @mdo
2 Yakub Thornton @gajih
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>

Anjeun ogé tiasa ngabalikeun warna-kalayan téks anu terang dina latar anu poék-kalayan .table-dark.

# kahiji Panungtungan Nanganan
1 Tandaan Otto @mdo
2 Yakub Thornton @gajih
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 méja

Sarupa jeung tabel sarta tabel poék, make kelas modifier .thead-lightatawa .thead-darknyieun <thead>s némbongan lampu atawa kulawu poék.

# kahiji Panungtungan Nanganan
1 Tandaan Otto @mdo
2 Yakub Thornton @gajih
3 Larry manuk @twitter
# kahiji Panungtungan Nanganan
1 Tandaan Otto @mdo
2 Yakub Thornton @gajih
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>

Jajaran belang

Paké .table-stripedpikeun nambahkeun zebra-striping kana sagala baris tabel dina <tbody>.

# kahiji Panungtungan Nanganan
1 Tandaan Otto @mdo
2 Yakub Thornton @gajih
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>
# kahiji Panungtungan Nanganan
1 Tandaan Otto @mdo
2 Yakub Thornton @gajih
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>

méja wates

Tambahkeun .table-borderedpikeun wates dina sagala sisi tabel sarta sél.

# kahiji Panungtungan Nanganan
1 Tandaan Otto @mdo
2 Yakub Thornton @gajih
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>
# kahiji Panungtungan Nanganan
1 Tandaan Otto @mdo
2 Yakub Thornton @gajih
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>

Méja tanpa wates

Tambahkeun .table-borderlesspikeun méja tanpa wates.

# kahiji Panungtungan Nanganan
1 Tandaan Otto @mdo
2 Yakub Thornton @gajih
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-borderlessogé bisa dipaké dina tabel poék.

# kahiji Panungtungan Nanganan
1 Tandaan Otto @mdo
2 Yakub Thornton @gajih
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>

Jajaran hoverable

Tambahkeun .table-hoverpikeun ngaktipkeun kaayaan hover dina baris tabel dina hiji <tbody>.

# kahiji Panungtungan Nanganan
1 Tandaan Otto @mdo
2 Yakub Thornton @gajih
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>
# kahiji Panungtungan Nanganan
1 Tandaan Otto @mdo
2 Yakub Thornton @gajih
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>

méja leutik

Tambahkeun .table-smsangkan tabel leuwih kompak ku motong padding sél dina satengah.

# kahiji Panungtungan Nanganan
1 Tandaan Otto @mdo
2 Yakub Thornton @gajih
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>
# kahiji Panungtungan Nanganan
1 Tandaan Otto @mdo
2 Yakub Thornton @gajih
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

Anggo kelas kontekstual pikeun ngawarnaan baris tabel atanapi sél individu.

Kelas Judul Judul
Aktip Sél Sél
Default Sél Sél
primér Sél Sél
Sekunder Sél Sél
Kasuksésan Sél Sél
Bahaya Sél Sél
Awas Sél Sél
Inpo Sél Sél
Caang Sél Sél
Poek Sél Sél 
<!-- 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 tukang tabel biasa henteu sayogi sareng méja poék, tapi anjeun tiasa nganggo téks atanapi latar tukang pikeun ngahontal gaya anu sami.

# Judul Judul
1 Sél Sél
2 Sél Sél
3 Sél Sél
4 Sél Sél
5 Sél Sél
6 Sél Sél
7 Sél Sél
8 Sél Sél
9 Sél Sél 
<!-- 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>
Nepikeun harti kana téknologi anu ngabantosan

Ngagunakeun warna pikeun nambahkeun harti ngan nyadiakeun indikasi visual, nu moal conveyed ka pamaké tina téhnologi mantuan - kayaning pamiarsa layar. Pastikeun yén inpormasi anu dilambangkeun ku warna écés tina eusina sorangan (contona téks anu katingali), atanapi kalebet dina cara alternatif, sapertos téks tambahan disumputkeun sareng .sr-onlykelas.

Jieun tabel responsif ku wrapping sagala .tablekalawan .table-responsive{-sm|-md|-lg|-xl}, sahingga tabel ngagulung horisontal di unggal max-widthbreakpoint nepi ka (tapi teu kaasup) 576px, 768px, 992px, jeung 1120px, masing-masing.

Catet yén kumargi browser ayeuna henteu ngadukung patarosan kontéks rentang , urang ngerjakeun watesan min-sareng max-awalan sareng viewports kalayan rubak fraksional (anu tiasa lumangsung dina kaayaan anu tangtu dina alat-alat dpi luhur, contona) ku ngagunakeun nilai-nilai anu akurasi anu langkung luhur pikeun babandingan ieu. .

Captions

A <caption>fungsi kawas judul pikeun méja. Éta ngabantosan pangguna anu maca layar pikeun mendakan méja sareng ngartos naon éta sareng mutuskeun upami aranjeunna hoyong maca éta.

Daptar pamaké
# kahiji Panungtungan Nanganan
1 Tandaan Otto @mdo
2 Yakub Thornton @gajih
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>

tabél responsif

Tabel responsif ngamungkinkeun tabel pikeun ngagulung sacara horisontal kalayan gampang. Jieun tabel naon responsif peuntas sagala viewports ku wrapping a .tablekalawan .table-responsive. Atanapi, pilih titik putus maksimal pikeun ngagaduhan méja responsif ku ngagunakeun .table-responsive{-sm|-md|-lg|-xl}.

Clipping nangtung / truncation

tabél responsif ngagunakeun overflow-y: hidden, nu klip kaluar sagala eusi nu mana saluareun edges handap atawa luhur tabél. Khususna, ieu tiasa motong ménu lungsur sareng widget pihak katilu anu sanés.

Salawasna responsif

Di sakuliah unggal breakpoint, pake .table-responsivepikeun tabel ngagulung horizontal.

# Judul Judul Judul Judul Judul Judul Judul Judul Judul
1 Sél Sél Sél Sél Sél Sél Sél Sél Sél
2 Sél Sél Sél Sél Sél Sél Sél Sél Sél
3 Sél Sél Sél Sél Sél Sél Sél Sél Sél 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Breakpoint husus

Paké .table-responsive{-sm|-md|-lg|-xl}sakumaha diperlukeun pikeun nyieun tabel responsif nepi ka breakpoint tinangtu. Ti breakpoint éta sarta nepi, tabél bakal kalakuanana normal teu ngagulung horisontal.

Tabél ieu tiasa katingali rusak dugi ka gaya responsifna dilarapkeun dina lebar viewport khusus.

# Judul Judul Judul Judul Judul Judul Judul Judul
1 Sél Sél Sél Sél Sél Sél Sél Sél
2 Sél Sél Sél Sél Sél Sél Sél Sél
3 Sél Sél Sél Sél Sél Sél Sél Sél 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# Judul Judul Judul Judul Judul Judul Judul Judul
1 Sél Sél Sél Sél Sél Sél Sél Sél
2 Sél Sél Sél Sél Sél Sél Sél Sél
3 Sél Sél Sél Sél Sél Sél Sél Sél 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# Judul Judul Judul Judul Judul Judul Judul Judul
1 Sél Sél Sél Sél Sél Sél Sél Sél
2 Sél Sél Sél Sél Sél Sél Sél Sél
3 Sél Sél Sél Sél Sél Sél Sél Sél 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# Judul Judul Judul Judul Judul Judul Judul Judul
1 Sél Sél Sél Sél Sél Sél Sél Sél
2 Sél Sél Sél Sél Sél Sél Sél Sél
3 Sél Sél Sél Sél Sél Sél Sél Sél 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>