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>

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.

#	Judul	Judul	Judul	Judul	Judul
1	Sél	Sél	Sél	Sél	Sél
2	Sél	Sél	Sél	Sél	Sél
3	Sél	Sél	Sél	Sél	Sél

#	Judul	Judul	Judul	Judul	Judul
1	Sél	Sél	Sél	Sél	Sél
2	Sél	Sél	Sél	Sél	Sél
3	Sél	Sél	Sél	Sél	Sél

#	Judul	Judul	Judul	Judul	Judul
1	Sél	Sél	Sél	Sél	Sél
2	Sél	Sél	Sél	Sél	Sél
3	Sél	Sél	Sél	Sél	Sél

#	Judul	Judul	Judul	Judul	Judul
1	Sél	Sél	Sél	Sél	Sél
2	Sél	Sél	Sél	Sél	Sél
3	Sél	Sél	Sél	Sél	Sél

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

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

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

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