Biçe ser naveroka sereke Biçe navîgasyon belgeyan
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.

Li ser vê rûpelê

Têgihiştinî

Ji ber berbelavbûna karanîna <table>hêmanan li ser widgetên sêyemîn ên mîna salname û hilbijêrên tarîxê, tabloyên Bootstrap têne hilbijartin . Dersa bingehîn .tableli her <table>yekê zêde bikin, dûv re bi dersên meya guhêrbar an şêwazên xwerû ve dirêj bikin. Hemî şêwazên tabloyê di Bootstrap de ne mîras in, yanî her tabloyên hêlînkirî dikarin ji dêûbavê serbixwe werin şêwaz kirin.

Bi karanîna nîşankirina tabloya herî bingehîn, li vir çawa .tabletabloyên -based li Bootstrap xuya dikin.

# Yekem Dawîn Destik
1 Delîl Otto @mdo
2 Jacob Thornton @rûn
3 Larry The Bird @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 colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Variants

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

Sinif Sernivîs Sernivîs
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 tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>

<!-- On rows -->
<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-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>
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 .visually-hiddenpolê re veşartî ye.

Tabloyên devokî

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 The Bird @twitter 
<table class="table table-striped">
  ...
</table>

Ev çîn dikarin li guhertoyên tabloyê jî werin zêdekirin:

# Yekem Dawîn Destik
1 Delîl Otto @mdo
2 Jacob Thornton @rûn
3 Larry The Bird @twitter 
<table class="table table-dark table-striped">
  ...
</table>
# Yekem Dawîn Destik
1 Delîl Otto @mdo
2 Jacob Thornton @rûn
3 Larry The Bird @twitter 
<table class="table table-success table-striped">
  ...
</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">
  ...
</table>
# Yekem Dawîn Destik
1 Delîl Otto @mdo
2 Jacob Thornton @rûn
3 Larry The Bird @twitter 
<table class="table table-dark table-hover">
  ...
</table>

Van rêzên hêlînkirî jî dikarin bi guhertoya xerîdar re bêne hev kirin:

# Yekem Dawîn Destik
1 Delîl Otto @mdo
2 Jacob Thornton @rûn
3 Larry The Bird @twitter 
<table class="table table-striped table-hover">
  ...
</table>

Tabloyên çalak

.table-activeBi lêzêdekirina çînekê rêzek tabloyê an şaneyek ronî bikin .

# Yekem Dawîn Destik
1 Delîl Otto @mdo
2 Jacob Thornton @rûn
3 Larry The Bird @twitter 
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">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-dark">
  <thead>
    ...
  </thead>
  <tbody>
    <tr class="table-active">
      ...
    </tr>
    <tr>
      ...
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2" class="table-active">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Variant û tabloyên bi lêvkirî çawa dixebitin?

Ji bo tabloyên devokî ( rêzên bi xêz, rêzikên pêvekirî , û tabloyên çalak ), me hin teknîk bikar anîn da ku van bandoran ji bo hemî guhertoyên tabloya xwe bixebitînin :

  • Em bi danîna paşxaneya şaneyek tabloyê bi --bs-table-bgtaybetmendiya xwerû dest pê dikin. Dûv re hemî guhertoyên tabloyê wê taybetmendiya xwerû destnîşan dikin ku şaneyên tabloyê rengîn bikin. Bi vî rengî, heke rengên nîv-şefaf wekî paşnavên tabloyê werin bikar anîn, em nekevin tengasiyê.
  • Dûv re em siya qutiya hundurîn li ser şaneyên tabloyê lê zêde dikin box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);ku li ser her ku hatî destnîşankirî background-colorye. Ji ber ku em belavbûnek mezin bikar tînin û bê xirbe, reng dê monoton be. Ji ber --bs-table-accent-bgku ji hêla xwerû ve nehatiye saz kirin, me siya qutiya xwerû tune.
  • Dema ku yek .table-striped, .table-hoveran .table-activeçîn têne zêdekirin, --bs-table-accent-bgji bo rengdêrkirina paşxanê rengek nîvşefaf tê danîn.
  • Ji bo her guhertoya tabloyê, em --bs-table-accent-bgrengek bi berevajiya herî bilind li gorî wî rengî diafirînin. Mînakî, rengê devokê ji bo .table-primarytarîtir e dema .table-darkku rengek devokî sivik heye.
  • Rengên nivîs û sînor bi heman rengî têne çêkirin, û rengên wan ji hêla xwerû ve têne mîras kirin.

Li pişt perdeyan wiha xuya dike:

@mixin table-variant($state, $background) {
  .table-#{$state} {
    $color: color-contrast(opaque($body-bg, $background));
    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
    $active-bg: mix($color, $background, percentage($table-active-bg-factor));

    --#{$variable-prefix}table-bg: #{$background};
    --#{$variable-prefix}table-striped-bg: #{$striped-bg};
    --#{$variable-prefix}table-striped-color: #{color-contrast($striped-bg)};
    --#{$variable-prefix}table-active-bg: #{$active-bg};
    --#{$variable-prefix}table-active-color: #{color-contrast($active-bg)};
    --#{$variable-prefix}table-hover-bg: #{$hover-bg};
    --#{$variable-prefix}table-hover-color: #{color-contrast($hover-bg)};

    color: $color;
    border-color: mix($color, $background, percentage($table-border-factor));
  }
}

Sînorên sifrê

Maseyên 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">
  ...
</table>

Karûbarên rengê sînor dikarin werin zêdekirin da ku rengan biguhezînin:

# Yekem Dawîn Destik
1 Delîl Otto @mdo
2 Jacob Thornton @rûn
3 Larry The Bird @twitter 
<table class="table table-bordered border-primary">
  ...
</table>

Tabloyên 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">
  ...
</table>
# Yekem Dawîn Destik
1 Delîl Otto @mdo
2 Jacob Thornton @rûn
3 Larry The Bird @twitter 
<table class="table table-dark table-borderless">
  ...
</table>

Maseyên piçûk

Bi qutkirina hemî hucreyê di nîvê de zêde .table-smbikin da ku bêtir tevlihev bikin..tablepadding

# 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>
# Yekem Dawîn Destik
1 Delîl Otto @mdo
2 Jacob Thornton @rûn
3 Larry The Bird @twitter 
<table class="table table-dark table-sm">
  ...
</table>

Alignment Vertical

Hucreyên tabloyê <thead>her gav ber bi jêr ve li hev rêzkirî ne. Di şaneyên tabloyê de lihevhatina <tbody>xwe ji mîrasê digirin <table>û ji hêla xwerû ve li jorê têne rêz kirin. Dersên hevrêziya vertîkal bikar bînin ku li cîhê ku hewce be ji nû ve li hev bikin.

Sernav 1 Sernav 2 Sernav 3 Sernav 4
Ev hucre ji vertical-align: middle;sifrê mîras digire Ev hucre ji vertical-align: middle;sifrê mîras digire Ev hucre ji vertical-align: middle;sifrê mîras digire Ev li vir hin nivîsa cîhgir e, ku tê armanc kirin ku pir cîhek vertîkal bigire, da ku destnîşan bike ka hevrêziya vertîkal di şaneyên pêşîn de çawa dixebite.
Ev hucre ji vertical-align: bottom;rêza sifrê mîras digire Ev hucre ji vertical-align: bottom;rêza sifrê mîras digire Ev hucre ji vertical-align: bottom;rêza sifrê mîras digire Ev li vir hin nivîsa cîhgir e, ku tê armanc kirin ku pir cîhek vertîkal bigire, da ku destnîşan bike ka hevrêziya vertîkal di şaneyên pêşîn de çawa dixebite.
Ev hucre ji vertical-align: middle;sifrê mîras digire Ev hucre ji vertical-align: middle;sifrê mîras digire Ev şaneyek bi jor ve hatî rêz kirin. Ev li vir hin nivîsa cîhgir e, ku tê armanc kirin ku pir cîhek vertîkal bigire, da ku destnîşan bike ka hevrêziya vertîkal di şaneyên pêşîn de çawa dixebite. 
<div class="table-responsive">
  <table class="table align-middle">
    <thead>
      <tr>
        ...
      </tr>
    </thead>
    <tbody>
      <tr>
        ...
      </tr>
      <tr class="align-bottom">
        ...
      </tr>
      <tr>
        <td>...</td>
        <td>...</td>
        <td class="align-top">This cell is aligned to the top.</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>

Nesting

Şêwazên sînor, şêwazên çalak, û guhertoyên tabloyê ji hêla tabloyên hêlîn ve nayên mîras kirin.

# Yekem Dawîn Destik
1 Delîl Otto @mdo
Header Header Header
YEK Yekem Dawîn
B Yekem Dawîn
C Yekem Dawîn
3 Larry Çûk @twitter 
<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Çawa hêlînê dixebite

Ji bo ku tu şêwaz neherikin tabloyên hêlîn, em >di CSS-ya xwe de hilbijêra hevberdana zarokan ( ) bikar tînin. Ji ber ku em hewce ne ku hemî tds û ths-yên di thead, tbody, û , û tfoot, vebijêrkê me de bêyî wê pir dirêj xuya bike. Bi vî rengî, em hilbijêrek xuyangê xerîb bikar tînin .table > :not(caption) > * > *da ku hemî tds û ths-ên .table, lê yek ji tabloyên hêlînkirî yên potansiyel tune bikin armanc.

Bala xwe bidinê ku hûn <tr>s-ê wekî zarokên rasterast ên tabloyek lê zêde bikin, ew <tr>ê ji hêla xwerû ve di nav de werin pêçan <tbody>, bi vî rengî hilbijêrên me wekî ku tê xwestin bixebitin.

Enatomî

Serê sifrê

Mîna tablo û tabloyên tarî, çînên guhêrbar bikar bînin .table-lightan jî .table-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 
<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>
# Yekem Dawîn Destik
1 Delîl Otto @mdo
2 Jacob Thornton @rûn
3 Larry Çûk @twitter 
<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Lingê masê

# Yekem Dawîn Destik
1 Delîl Otto @mdo
2 Jacob Thornton @rûn
3 Larry Çûk @twitter
Footer Footer Footer Footer 
<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Captions

A <caption>fonksiyonên wek sernivîsê ji bo sifrê. Ew ji bikarhênerên bi xwendevanên ekranê re dibe alîkar ku tabloyek bibînin û fêm bikin ka ew li ser çi ye û biryar bidin ka ew dixwazin wê bixwînin.

Lîsteya bikarhêneran
# Yekem Dawîn Destik
1 Delîl Otto @mdo
2 Jacob Thornton @rûn
3 Larry The Bird @twitter 
<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Her weha hûn dikarin bi <caption>serê sifrê bixin .caption-top.

Lîsteya bikarhêneran
# Yekem Dawîn Destik
1 Delîl Otto @mdo
2 Jacob Thornton @rûn
3 Larry Çûk @twitter 
<table class="table caption-top">
  <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>

Tabloyên bersivdar

Tabloyên bersivdar dihêlin ku tablo bi hêsanî bi horizontî werin gerandin. Bi pêçandina tabloyek .tablebi .table-responsive. An jî, xala veqetandinê ya herî zêde ya ku bi karanîna tabloyek bersivdar hebe hilbijêrin .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Clipping Vertical / qutkirin

Tabloyên bersivdar bi kar tînin overflow-y: hidden, ku her naverokek ku ji keviyên jêrîn an jorîn ên tabloyê derbas dibe qut dike. Bi taybetî, ev dikare pêşekên dakêşanê û widgetên din ên partiya sêyemîn qut bike.

Her tim bersivdar

Li seranserê her xala veqetandinê, ji .table-responsivebo tabloyên gerîdeya horîzontal bikar bînin.

# Sernivîs 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 Koşik
2 Koşik 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 Koşik 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Breakpoint taybet

Wekî ku hewce be bikar bînin .table-responsive{-sm|-md|-lg|-xl|-xxl}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
# 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">
  <table class="table">
    ...
  </table>
</div>

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

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

Sass

Variables

$table-cell-padding-y:        .5rem;
$table-cell-padding-x:        .5rem;
$table-cell-padding-y-sm:     .25rem;
$table-cell-padding-x-sm:     .25rem;

$table-cell-vertical-align:   top;

$table-color:                 $body-color;
$table-bg:                    transparent;
$table-accent-bg:             transparent;

$table-th-font-weight:        null;

$table-striped-color:         $table-color;
$table-striped-bg-factor:     .05;
$table-striped-bg:            rgba($black, $table-striped-bg-factor);

$table-active-color:          $table-color;
$table-active-bg-factor:      .1;
$table-active-bg:             rgba($black, $table-active-bg-factor);

$table-hover-color:           $table-color;
$table-hover-bg-factor:       .075;
$table-hover-bg:              rgba($black, $table-hover-bg-factor);

$table-border-factor:         .1;
$table-border-width:          $border-width;
$table-border-color:          $border-color;

$table-striped-order:         odd;

$table-group-separator-color: currentColor;

$table-caption-color:         $text-muted;

$table-bg-scale:              -80%;

Loop

$table-variants: (
  "primary":    shift-color($primary, $table-bg-scale),
  "secondary":  shift-color($secondary, $table-bg-scale),
  "success":    shift-color($success, $table-bg-scale),
  "info":       shift-color($info, $table-bg-scale),
  "warning":    shift-color($warning, $table-bg-scale),
  "danger":     shift-color($danger, $table-bg-scale),
  "light":      $light,
  "dark":       $dark,
);

Customizing

  • Guherbarên faktorê ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) ji bo diyarkirina berevajî di guhertoyên tabloyê de têne bikar anîn.
  • Ji bilî guhertoyên sifrê yên sivik û tarî, rengên mijarê ji hêla guhêrbar ve têne ronî kirin $table-bg-level.