in English

Tables

Belgekirin û mînakên ji bo şêwaza vebijarkî ya tabloyan (ji ber karanîna wan a berbelav di pêvekên JavaScript de) bi Bootstrap re.

Examples

Ji ber berbelavbûna karanîna tabloyan li ser widgetên sêyemîn ên mîna salname û hilbijêrên tarîx, me tabloyên xwe ji bo vebijarkî dîzayn kir . Tenê çîna bingehîn .tableli her <table>yekê zêde bikin, dûv re bi şêwazên xwerû an çînên meyên guhezker ên cihêreng ên tevlêkirî dirêj bikin.

Bi karanîna nîşankirina tabloya herî bingehîn, li vir çawa .tabletabloyên -based li Bootstrap xuya dikin. Hemî şêwazên tabloyê di Bootstrap 4-ê de mîras in , tê vê wateyê ku hemî tabloyên hêlînkirî dê bi heman awayê dêûbav bêne şêwaz kirin.

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry	Çûk	@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>

Her weha hûn dikarin rengan-bi nivîsa sivik a li ser paşxaneyên tarî- bi rengan vegerînin .table-dark.

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry	Çûk	@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>

Vebijarkên serê sifrê

Mîna tablo û tabloyên tarî, çînên guhêrbar bikar bînin .thead-lightan jî .thead-darkji bo ku <thead>s gewr sivik an tarî xuya bikin.

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry	Çûk	@twitter

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry	Çûk	@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>

Rêzên xerîdar

Ji .table-stripedbo lêzêdekirina zebra-striping li her rêzika tabloyê ya di hundurê de bikar bînin <tbody>.

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry	Çûk	@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>

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
3	Larry	Çûk	@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>

Tabloya sînorkirî

Ji .table-borderedbo sînorên li ser hemî aliyên tablo û hucreyan zêde bikin.

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
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>

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
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>

Tabloya bêsînor

Ji .table-borderlessbo tabloyek bê sînor zêde bikin.

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
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-borderlessdikare li ser maseyên tarî jî were bikar anîn.

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
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>

Rêzên hoverable

Zêde .table-hoverbikin da ku rewşek hêlînê li ser rêzên tabloyê di nav a <tbody>.

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
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>

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
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>

Maseya piçûk

Zêde .table-smbikin da ku tabloyan tevlihevtir bikin bi qutkirina pelika hucreyê nîvco.

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
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>

#	Yekem	Dawîn	Destik
1	Delîl	Otto	@mdo
2	Jacob	Thornton	@rûn
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>

Dersên hevoksaziyê

Ji bo rengkirina rêzên tabloyê an şaneyên takekesî dersên kontekstê bikar bînin.

Sinif	Sernivîs	Sernivîs
Jîr	Koşik	Koşik
Destçûnî	Koşik	Koşik
Bingehîn	Koşik	Koşik
Dûwemdor	Koşik	Koşik
Serketinî	Koşik	Koşik
Talûke	Koşik	Koşik
Gazî	Koşik	Koşik
Info	Koşik	Koşik
Sivik	Koşik	Koşik
Tarî	Koşik	Koşik

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

Guhertoyên paşperdeya tabloya birêkûpêk bi tabloya tarî re peyda nabin, lêbelê, hûn dikarin ji bo bidestxistina şêwazên wekhev karûbarên nivîsê an paşîn bikar bînin.

#	Sernivîs	Sernivîs
1	Koşik	Koşik
2	Koşik	Koşik
3	Koşik	Koşik
4	Koşik	Koşik
5	Koşik	Koşik
6	Koşik	Koşik
7	Koşik	Koşik
8	Koşik	Koşik
9	Koşik	Koşik

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

Veguheztina wateya teknolojiyên arîkar

Bikaranîna rengan ji bo zêdekirina wateyê tenê nîşanek dîtbar peyda dike, ku dê ji bikarhênerên teknolojiyên arîkar re neyê ragihandin - wek xwendevanên ekranê. Piştrast bikin ku agahdariya ku bi reng tê destnîşan kirin an ji naverokê bixwe diyar e (mînak nivîsa xuyayî), an jî bi rêyên alternatîf ve tê de, wek mînak nivîsa zêde ya ku bi .sr-onlypolê re veşartî ye.

Create responsive tables by wrapping any .table with .table-responsive{-sm|-md|-lg|-xl}, making the table scroll horizontally at each max-width breakpoint of up to (but not including) 576px, 768px, 992px, and 1120px, respectively.

Note that since browsers do not currently support range context queries, we work around the limitations of min- and max- prefixes and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.

Captions

A <caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.

List of users
#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@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>

Responsive tables

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

Wekî ku hewce be bikar bînin .table-responsive{-sm|-md|-lg|-xl}da ku tabloyên bersivdar heya nuqteyek taybetî biafirînin. Ji wê nuqteya veqetandinê û jor, dê tablo bi rengek normal tevbigere û bi horizontî negere.

Dibe ku ev tablo şikestî xuya bikin heya ku şêwazên wan ên bersivdar li ser firehiyên dîmendera taybetî bicîh nebin.

#	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs
1	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik
2	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik
3	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik

#	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs
1	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik
2	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik
3	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik

#	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs
1	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik
2	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik
3	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik

#	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs	Sernivîs
1	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik
2	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik
3	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik	Koşik

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