in English

Tables

Takaddun bayanai da misalai don ficewa salon salon tebur (idan aka ba su yawan amfani da su a cikin plugins JavaScript) tare da Bootstrap.

A wannan shafi

Dubawa

Saboda yaɗuwar amfani da <table>abubuwa a cikin widgets na ɓangare na uku kamar kalanda da masu zaɓen kwanan wata, Teburan Bootstrap sun shiga . Ƙara ajin tushe .tablezuwa kowane <table>, sannan ƙara tare da azuzuwan gyare-gyare na zaɓi ko salon al'ada. Ba a gaji duk salon tebur a cikin Bootstrap, ma'ana kowane tebur na gida yana iya zama mai zaman kansa daga iyaye.

Yin amfani da mafi mahimmancin alamar tebur, ga yadda .tabletebur na tushen ke kallo a cikin Bootstrap.

#	Na farko	Karshe	Hannu
1	Alama	Otto	@mdo
2	Yakubu	Thornton	@mai
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>

Bambance-bambance

Yi amfani da azuzuwan mahallin don launi tebur, layuka na tebur ko sel guda ɗaya.

Class	Jagora	Jagora
Default	Cell	Cell
Firamare	Cell	Cell
Sakandare	Cell	Cell
Nasara	Cell	Cell
hadari	Cell	Cell
Gargadi	Cell	Cell
Bayani	Cell	Cell
Haske	Cell	Cell
Duhu	Cell	Cell

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

Isar da ma'ana ga fasahar taimako

Yin amfani da launi don ƙara ma'ana kawai yana ba da alamar gani, wanda ba za a isar da shi ga masu amfani da fasahar taimako ba - kamar masu karanta allo. Tabbatar cewa bayanin da launi ke nunawa ko dai a bayyane yake daga abun cikin kanta (misali rubutun bayyane), ko kuma an haɗa shi ta hanyar madadin, kamar ƙarin rubutu da aka ɓoye tare da .visually-hiddenajin.

Tebur masu ƙaranci

Layukan tsige

Yi amfani .table-stripeddon ƙara zakin zebra zuwa kowane jere na tebur a cikin <tbody>.

#	Na farko	Karshe	Hannu
1	Alama	Otto	@mdo
2	Yakubu	Thornton	@mai
3	Larry the Bird		@twitter

<table class="table table-striped">
  ...
</table>

Hakanan ana iya ƙara waɗannan azuzuwan zuwa bambance-bambancen tebur:

#	Na farko	Karshe	Hannu
1	Alama	Otto	@mdo
2	Yakubu	Thornton	@mai
3	Larry the Bird		@twitter

<table class="table table-dark table-striped">
  ...
</table>

#	Na farko	Karshe	Hannu
1	Alama	Otto	@mdo
2	Yakubu	Thornton	@mai
3	Larry the Bird		@twitter

<table class="table table-success table-striped">
  ...
</table>

Layukan masu shawagi

Ƙara .table-hoverdon kunna yanayin jujjuyawa akan layuka na tebur a cikin <tbody>.

#	Na farko	Karshe	Hannu
1	Alama	Otto	@mdo
2	Yakubu	Thornton	@mai
3	Larry the Bird		@twitter

<table class="table table-hover">
  ...
</table>

#	Na farko	Karshe	Hannu
1	Alama	Otto	@mdo
2	Yakubu	Thornton	@mai
3	Larry the Bird		@twitter

<table class="table table-dark table-hover">
  ...
</table>

Hakanan ana iya haɗa waɗannan layuka masu tsalle-tsalle tare da bambance-bambancen taguwa:

#	Na farko	Karshe	Hannu
1	Alama	Otto	@mdo
2	Yakubu	Thornton	@mai
3	Larry the Bird		@twitter

<table class="table table-striped table-hover">
  ...
</table>

Tebur masu aiki

Hana layin tebur ko tantanin halitta ta ƙara .table-activeaji.

#	Na farko	Karshe	Hannu
1	Alama	Otto	@mdo
2	Yakubu	Thornton	@mai
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>

#	Na farko	Karshe	Hannu
1	Alama	Otto	@mdo
2	Yakubu	Thornton	@mai
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>

Ta yaya bambance-bambancen da teburi masu kaifi ke aiki?

Don teburin da aka ƙara ( layuka masu ratsi , layuka masu ɗaukar nauyi , da tebur masu aiki ), mun yi amfani da wasu dabaru don sa waɗannan tasirin suyi aiki ga duk bambance-bambancen tebur ɗin mu :

Mun fara da saita bangon tantanin halitta tare da --bs-table-bgkayan al'ada. Duk bambance-bambancen tebur sannan saita waccan kadara ta al'ada don canza launin teburin sel. Ta wannan hanyar, ba za mu shiga cikin matsala ba idan ana amfani da launuka masu tsaka-tsaki azaman bayanan tebur.
Sa'an nan kuma mu ƙara inset akwatin inuwa a kan tebur Kwayoyin tare box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);da Layer a saman kowane kayyade background-color. Saboda muna amfani da babban yaduwa kuma babu blur, launi zai zama monotone. Tun --bs-table-accent-bgda ba a saita shi ta tsohuwa, ba mu da tsohuwar inuwar akwatin.
Lokacin da aka ƙara ko dai .table-striped, .table-hoverko .table-activeazuzuwan, --bs-table-accent-bgana saita shi zuwa launi mai tsaka-tsaki don canza launin bango.
Ga kowane bambance-bambancen tebur, muna samar da --bs-table-accent-bglauni tare da mafi girman bambanci dangane da wannan launi. Misali, launin lafazin don .table-primaryya fi duhu yayin da yake .table-darkda launi mai sauƙi.
Rubutu da launukan iyakoki ana samar da su iri ɗaya ne, kuma launukansu ana gadar su ta asali.

Bayan fage ya yi kama da haka:

@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));
  }
}

Iyakokin tebur

Tebur masu iyaka

Ƙara .table-bordereddon iyakoki a duk bangarorin tebur da sel.

#	Na farko	Karshe	Hannu
1	Alama	Otto	@mdo
2	Yakubu	Thornton	@mai
3	Larry the Bird		@twitter

<table class="table table-bordered">
  ...
</table>

Ana iya ƙara kayan aikin launi na kan iyaka don canza launuka:

#	Na farko	Karshe	Hannu
1	Alama	Otto	@mdo
2	Yakubu	Thornton	@mai
3	Larry the Bird		@twitter

<table class="table table-bordered border-primary">
  ...
</table>

Tables ba tare da iyakoki ba

Ƙara .table-borderlessdon tebur ba tare da iyakoki ba.

#	Na farko	Karshe	Hannu
1	Alama	Otto	@mdo
2	Yakubu	Thornton	@mai
3	Larry the Bird		@twitter

<table class="table table-borderless">
  ...
</table>

#	Na farko	Karshe	Hannu
1	Alama	Otto	@mdo
2	Yakubu	Thornton	@mai
3	Larry the Bird		@twitter

<table class="table table-dark table-borderless">
  ...
</table>

Ƙananan teburi

Ƙara .table-smdon yin wani .tableƙarami ta hanyar yanke duk tantanin halitta paddingcikin rabi.

#	Na farko	Karshe	Hannu
1	Alama	Otto	@mdo
2	Yakubu	Thornton	@mai
3	Larry the Bird		@twitter

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

#	Na farko	Karshe	Hannu
1	Alama	Otto	@mdo
2	Yakubu	Thornton	@mai
3	Larry the Bird		@twitter

<table class="table table-dark table-sm">
  ...
</table>

Daidaita tsaye

Kwayoyin tebur na <thead>koyaushe suna daidaitawa zuwa ƙasa. Kwayoyin tebur a cikin sun <tbody>gaji daidaitawar su <table>kuma an daidaita su zuwa sama ta tsohuwa. Yi amfani da azuzuwan daidaita layi don sake daidaitawa inda ake buƙata.

Take 1	Take 2	Take 3	Take 4
Wannan tantanin halitta ya gaji `vertical-align: middle;`daga tebur	Wannan tantanin halitta ya gaji `vertical-align: middle;`daga tebur	Wannan tantanin halitta ya gaji `vertical-align: middle;`daga tebur	Anan akwai wasu rubutu mai riƙe da wuri, wanda aka yi niyya don ɗaukar ɗan sarari a tsaye, don nuna yadda daidaitawar ke aiki a cikin sel na baya.
Wannan tantanin halitta ya gaji `vertical-align: bottom;`daga layin tebur	Wannan tantanin halitta ya gaji `vertical-align: bottom;`daga layin tebur	Wannan tantanin halitta ya gaji `vertical-align: bottom;`daga layin tebur	Anan akwai wasu rubutu mai riƙe da wuri, wanda aka yi niyya don ɗaukar ɗan sarari a tsaye, don nuna yadda daidaitawar ke aiki a cikin sel na baya.
Wannan tantanin halitta ya gaji `vertical-align: middle;`daga tebur	Wannan tantanin halitta ya gaji `vertical-align: middle;`daga tebur	Wannan tantanin halitta an daidaita shi zuwa sama.	Anan akwai wasu rubutu mai riƙe da wuri, wanda aka yi niyya don ɗaukar ɗan sarari a tsaye, don nuna yadda daidaitawar ke aiki a cikin sel na baya.

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

Gurasa

Salon kan iyaka, salon aiki, da bambance-bambancen teburi ba su gaji ta teburi masu gida.

Na farko

Karshe

Hannu

Alama

Otto

@mdo

Kai	Kai	Kai
A	Na farko	Karshe
B	Na farko	Karshe
C	Na farko	Karshe

Larry

Tsuntsu

@twitter

<table class="table table-striped">
  <thead>
    ...
  </thead>
  <tbody>
    ...
    <tr>
      <td colspan="4">
        <table class="table mb-0">
          ...
        </table>
      </td>
    </tr>
    ...
  </tbody>
</table>

Yadda gida ke aiki

Don hana kowane salo daga zubewa zuwa teburi masu gida, muna amfani da >mai zaɓin yara ( ) a cikin CSS ɗin mu. Tunda muna buƙatar yin niyya ga duk tds da ths a cikin thead, tbody, da tfoot, mai zaɓin mu zai yi kyau sosai ba tare da shi ba. .table > :not(caption) > * > *Don haka, muna amfani da zaɓi mai ban sha'awa don yin niyya ga duk tds da ths na .table, amma babu ɗayan tebur mai yuwuwar.

Lura cewa idan kun ƙara <tr>s a matsayin yaran tebur kai tsaye, waɗannan <tr>za a naɗe <tbody>su ta hanyar tsohuwa, don haka sa masu zaɓinmu suyi aiki kamar yadda aka yi niyya.

Jiki

Shugaban tebur

Kama da teburi da teburi masu duhu, yi amfani da azuzuwan masu gyara .table-lightko .table-darkdon sanya <thead>s ya zama haske ko launin toka mai duhu.

#	Na farko	Karshe	Hannu
1	Alama	Otto	@mdo
2	Yakubu	Thornton	@mai
3	Larry	Tsuntsu	@twitter

<table class="table">
  <thead class="table-light">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

#	Na farko	Karshe	Hannu
1	Alama	Otto	@mdo
2	Yakubu	Thornton	@mai
3	Larry	Tsuntsu	@twitter

<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Kafar tebur

#	Na farko	Karshe	Hannu
1	Alama	Otto	@mdo
2	Yakubu	Thornton	@mai
3	Larry	Tsuntsu	@twitter
Kafa	Kafa	Kafa	Kafa

<table class="table">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

Kalmomi

Ayyuka <caption>kamar tafiya zuwa tebur. Yana taimaka wa masu amfani da masu karanta allo don nemo tebur kuma su fahimci abin da ke cikinsa kuma su yanke shawarar idan suna son karanta shi.

Jerin masu amfani
#	Na farko	Karshe	Hannu
1	Alama	Otto	@mdo
2	Yakubu	Thornton	@mai
3	Larry the Bird		@twitter

<table class="table table-sm">
  <caption>List of users</caption>
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

Hakanan zaka iya sanya <caption>saman saman tebur tare da .caption-top.

Jerin masu amfani
#	Na farko	Karshe	Hannu
1	Alama	Otto	@mdo
2	Yakubu	Thornton	@mai
3	Larry	Tsuntsu	@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>

Tables masu amsawa

Tables masu amsawa suna ba da damar gungurawa tebur a kwance cikin sauƙi. Sanya kowane tebur mai amsawa a duk wuraren kallo ta hanyar nannade .tableda .table-responsive. Ko, zaɓi matsakaicin matsakaicin wurin da za a sami tebur mai amsawa da shi ta amfani da .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Yanke/tsatsewa tsaye

Tables masu amsawa suna amfani da overflow-y: hidden, wanda ke cire duk wani abun ciki wanda ya wuce ƙasa ko saman saman teburin. Musamman, wannan na iya kashe menus na zazzagewa da sauran widgets na ɓangare na uku.

Koyaushe mai amsawa

A ko'ina cikin kowane wurin hutu, yi amfani .table-responsiveda teburin gungurawa a kwance.

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

Musamman Breakpoint

Yi amfani .table-responsive{-sm|-md|-lg|-xl|-xxl}da yadda ake buƙata don ƙirƙirar tebur masu amsawa har zuwa wani wuri na musamman. Tun daga wancan lokacin zuwa sama, tebur ɗin zai kasance kamar yadda aka saba kuma ba gungurawa a kwance ba.

Waɗannan allunan na iya bayyana sun karye har sai an yi amfani da salon da suka dace a takamaiman nisan kallon kallo.

#	Jagora	Jagora	Jagora	Jagora	Jagora	Jagora	Jagora	Jagora
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Jagora	Jagora	Jagora	Jagora	Jagora	Jagora	Jagora	Jagora
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Jagora	Jagora	Jagora	Jagora	Jagora	Jagora	Jagora	Jagora
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Jagora	Jagora	Jagora	Jagora	Jagora	Jagora	Jagora	Jagora
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Jagora	Jagora	Jagora	Jagora	Jagora	Jagora	Jagora	Jagora
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

#	Jagora	Jagora	Jagora	Jagora	Jagora	Jagora	Jagora	Jagora
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

<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

Masu canji

$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%;

Madauki

$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,
);

Keɓancewa

Matsalolin dalilai ( $table-striped-bg-factor, $table-active-bg-factor&$table-hover-bg-factor ) don tantance bambanci a cikin bambance-bambancen tebur.
Baya ga bambance-bambancen tebur na haske & duhu, launukan jigo ana haskaka su da $table-bg-levelma'auni.