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>