Taulak

Bootstrap-ekin taulen estiloa aukeratzeko dokumentazioa eta adibideak (JavaScript pluginetan duten erabilera nagusia kontuan hartuta).

Orrialde honetan

Ikuspegi orokorra

<table>Hirugarrenen widgetetan elementuak oso hedatuta daudenez, egutegiak eta data-hautatzaileak, esaterako, Bootstrap-en taulak aukera ematen du . Gehitu oinarrizko klasea .tableedozein <table>, gero zabaldu gure aukerako modifikatzaile klaseekin edo estilo pertsonalizatuekin. Taula-estilo guztiak ez dira Bootstrap-en heredatzen, hau da, habiaratutako edozein taula gurasoengandik independentea izan daiteke.

Taulen markaketa oinarrizkoena erabiliz, hona hemen .tableBootstrap-en oinarritutako taulak nola ikusten diren.

#	Lehenengoa	Azkena	Heldulekua
1	Markatu	Otto	@mdo
2	Jakob	Thornton	@potolo
3	Larry Txoria		@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>

Aldaerak

Erabili testuinguru-klaseak taulak, taulen errenkadak edo gelaxka indibidualak koloreztatzeko.

Klasea	Goiburua	Goiburua
Lehenetsia	Zelula	Zelula
Lehen mailakoa	Zelula	Zelula
Bigarren mailakoa	Zelula	Zelula
Arrakasta	Zelula	Zelula
Arriskua	Zelula	Zelula
Abisua	Zelula	Zelula
Info	Zelula	Zelula
Argia	Zelula	Zelula
Iluna	Zelula	Zelula

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

Laguntza-teknologiei esanahia ematea

Kolorea esanahi gehitzeko kolorea erabiltzeak adierazgarri bisual bat baino ez du ematen, eta hori ez zaie helaraziko laguntza-teknologien erabiltzaileei, adibidez, pantaila-irakurgailuei. Ziurtatu kolorez adierazten den informazioa edukitik bertatik agerikoa dela (adibidez, ikusgai dagoen testua) edo beste bitarteko batzuen bidez sartzen dela, adibidez .visually-hiddenklasearekin ezkutatuta dagoen testu gehigarria.

Azentudun mahaiak

Ilara marradunak

Erabili .table-stripedzebra marra gehitzeko <tbody>.

#	Lehenengoa	Azkena	Heldulekua
1	Markatu	Otto	@mdo
2	Jakob	Thornton	@potolo
3	Larry Txoria		@twitter

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

Klase hauek taula aldaeretan ere gehi daitezke:

#	Lehenengoa	Azkena	Heldulekua
1	Markatu	Otto	@mdo
2	Jakob	Thornton	@potolo
3	Larry Txoria		@twitter

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

#	Lehenengoa	Azkena	Heldulekua
1	Markatu	Otto	@mdo
2	Jakob	Thornton	@potolo
3	Larry Txoria		@twitter

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

Erran daitezkeen errenkadak

Gehitu .table-hoverpasatzeko egoera bat gaitzeko <tbody>.

#	Lehenengoa	Azkena	Heldulekua
1	Markatu	Otto	@mdo
2	Jakob	Thornton	@potolo
3	Larry Txoria		@twitter

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

#	Lehenengoa	Azkena	Heldulekua
1	Markatu	Otto	@mdo
2	Jakob	Thornton	@potolo
3	Larry Txoria		@twitter

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

Erran daitezkeen errenkada hauek marradun aldaerarekin ere konbina daitezke:

#	Lehenengoa	Azkena	Heldulekua
1	Markatu	Otto	@mdo
2	Jakob	Thornton	@potolo
3	Larry Txoria		@twitter

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

Taula aktiboak

Nabarmendu taulako errenkada edo gelaxka bat .table-activeklase bat gehituz.

#	Lehenengoa	Azkena	Heldulekua
1	Markatu	Otto	@mdo
2	Jakob	Thornton	@potolo
3	Larry Txoria		@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>

#	Lehenengoa	Azkena	Heldulekua
1	Markatu	Otto	@mdo
2	Jakob	Thornton	@potolo
3	Larry Txoria		@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>

Nola funtzionatzen dute aldaerek eta azentudun taulak?

Taul azentudunetarako ( lerro marradunak , errenkada pasagarriak eta taula aktiboak ), efektu hauek gure taula aldaera guztietan funtzionatzeko teknika batzuk erabili ditugu :

Taularen gelaxka baten atzeko planoa --bs-table-bgpropietate pertsonalizatuarekin ezartzen hasten gara. Taula-aldaera guztiek ezarri dute propietate pertsonalizatu hori taulako gelaxkak koloreztatzeko. Horrela, ez dugu arazorik izango kolore erdi gardenak mahaiaren atzeko plano gisa erabiltzen badira.
Ondoren, txertatutako koadroaren itzala gehitzen dugu taulako gelaxketan box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);geruza batekin zehaztutako edozeinen gainean background-color. Hedapen handia erabiltzen dugulako eta lausorik gabe, kolorea monotonoa izango da. Lehenespenez ezarri gabe dagoenez --bs-table-accent-bg, ez dugu kutxaren itzal lehenetsirik.
Biak edo klaseak gehitzen direnean, .table-stripedkolore erdi gardena ezartzen da atzeko planoa koloreztatzeko..table-hover.table-active--bs-table-accent-bg
Taula-aldaera bakoitzeko, --bs-table-accent-bgkolore horren arabera kontraste handiena duen kolorea sortzen dugu. Adibidez, azentu kolorea .table-primaryilunagoa da eta .table-darkazentu kolore argiagoa du.
Testuaren eta ertzaren koloreak modu berean sortzen dira, eta haien koloreak berez heredatzen dira.

Eszena atzean honela ikusten da:

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

Mahaiaren ertzak

Mugadun mahaiak

Gehitu .table-borderedertzak taularen eta gelaxken alde guztietan.

#	Lehenengoa	Azkena	Heldulekua
1	Markatu	Otto	@mdo
2	Jakob	Thornton	@potolo
3	Larry Txoria		@twitter

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

Ertzaren kolore-utilitateak gehi daitezke koloreak aldatzeko:

#	Lehenengoa	Azkena	Heldulekua
1	Markatu	Otto	@mdo
2	Jakob	Thornton	@potolo
3	Larry Txoria		@twitter

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

Mugarik gabeko mahaiak

Gehitu .table-borderlessertzarik gabeko mahai baterako.

#	Lehenengoa	Azkena	Heldulekua
1	Markatu	Otto	@mdo
2	Jakob	Thornton	@potolo
3	Larry Txoria		@twitter

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

#	Lehenengoa	Azkena	Heldulekua
1	Markatu	Otto	@mdo
2	Jakob	Thornton	@potolo
3	Larry Txoria		@twitter

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

Mahai txikiak

Gehitu trinkoagoa .table-smizateko zelula guztiak erditik moztuta..tablepadding

#	Lehenengoa	Azkena	Heldulekua
1	Markatu	Otto	@mdo
2	Jakob	Thornton	@potolo
3	Larry Txoria		@twitter

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

#	Lehenengoa	Azkena	Heldulekua
1	Markatu	Otto	@mdo
2	Jakob	Thornton	@potolo
3	Larry Txoria		@twitter

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

Lerrokadura bertikala

Taularen gelaxkak <thead>beti behealdean lerrokatuta daude bertikalak. Taula-gelaxkek <tbody>beren lerrokadura heredatzen dute <table>eta goialdera lerrokatzen dira lehenespenez. Erabili lerrokatze bertikaleko klaseak behar den lekuan berriro lerrokatzeko.

1. goiburua	2. goiburua	3. goiburua	4. goiburua
`vertical-align: middle;`Gelaxka honek taulatik heredatzen du	`vertical-align: middle;`Gelaxka honek taulatik heredatzen du	`vertical-align: middle;`Gelaxka honek taulatik heredatzen du	Hona hemen leku-markaren testu bat, leku bertikal dezente okupatzeko xedea duena, lerrokadura bertikalak aurreko gelaxketan nola funtzionatzen duen erakusteko.
Gelaxka honek `vertical-align: bottom;`taulako errenkadatik heredatzen du	Gelaxka honek `vertical-align: bottom;`taulako errenkadatik heredatzen du	Gelaxka honek `vertical-align: bottom;`taulako errenkadatik heredatzen du	Hona hemen leku-markaren testu bat, leku bertikal dezente okupatzeko xedea duena, lerrokadura bertikalak aurreko gelaxketan nola funtzionatzen duen erakusteko.
`vertical-align: middle;`Gelaxka honek taulatik heredatzen du	`vertical-align: middle;`Gelaxka honek taulatik heredatzen du	Gelaxka hau goiko aldera lerrokatuta dago.	Hona hemen leku-markaren testu bat, leku bertikal dezente okupatzeko xedea duena, lerrokadura bertikalak aurreko gelaxketan nola funtzionatzen duen erakusteko.

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

Habia egitea

Ertz-estiloak, estilo aktiboak eta taula-aldaerak ez dituzte habiaratutako taulek heredatzen.

Lehenengoa

Azkena

Heldulekua

Markatu

Otto

@mdo

Goiburua	Goiburua	Goiburua
A	Lehenengoa	Azkena
B	Lehenengoa	Azkena
C	Lehenengoa	Azkena

Larry

txoria

@twitter

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

Nola funtzionatzen duen habiak

Estiloak habiaratuta dauden tauletara isurtzea saihesteko , haurren konbinatzaile ( >) hautatzailea erabiltzen dugu gure CSSn. , , eta s-en tds eta s guztiak bideratu behar ditugunez , gure hautatzaileak nahiko luzea izango litzateke hura gabe. Horrenbestez, itxura arraro samarreko hautatzailea erabiltzen dugu s eta s guztiak bideratzeko , baina habiaratutako taula potentzialetako bat ere ez.ththeadtbodytfoot.table > :not(caption) > * > *tdth.table

<tr>Kontuan izan s taula baten seme-alaba zuzen gisa gehitzen baduzu , horiek lehenespenez <tr>bilduta egongo direla , horrela gure hautatzaileak nahi bezala funtzionatuko duela.<tbody>

Anatomia

Mahaiburua

Taulen eta taula ilunen antzera, erabili modifikatzaile klaseak .table-lightedo s gris argia edo iluna agertzeko .table-dark.<thead>

#	Lehenengoa	Azkena	Heldulekua
1	Markatu	Otto	@mdo
2	Jakob	Thornton	@potolo
3	Larry	txoria	@twitter

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

#	Lehenengoa	Azkena	Heldulekua
1	Markatu	Otto	@mdo
2	Jakob	Thornton	@potolo
3	Larry	txoria	@twitter

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

Mahaiaren oina

#	Lehenengoa	Azkena	Heldulekua
1	Markatu	Otto	@mdo
2	Jakob	Thornton	@potolo
3	Larry	txoria	@twitter
Oina	Oina	Oina	Oina

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

Epigrafeak

A <caption>taula baten goiburu gisa funtzionatzen du. Pantaila-irakurgailuak dituzten erabiltzaileei taula bat aurkitzen eta zertaz ari den ulertzen eta irakurri nahi duten erabakitzen laguntzen die.

Erabiltzaileen zerrenda
#	Lehenengoa	Azkena	Heldulekua
1	Markatu	Otto	@mdo
2	Jakob	Thornton	@potolo
3	Larry Txoria		@twitter

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

<caption>Mahaiaren goialdean ere jar dezakezu .caption-top.

Erabiltzaileen zerrenda
#	Lehenengoa	Azkena	Heldulekua
1	Markatu	Otto	@mdo
2	Jakob	Thornton	@potolo
3	Larry	txoria	@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>

Taulen erantzunak

Taulak erantzuteko aukera ematen du taulak horizontalki erraz mugitzeko. Egin ezazu edozein mahai erantzuteko ikuspegi .tableguztietan .table-responsive. Edo, hautatu gehienezko eten-puntua eta horrekin taula erantzunkorra izan dezan .table-responsive{-sm|-md|-lg|-xl|-xxl}.

Mozketa/mozketa bertikala

Taulen erantzunak erabiltzen dituzte overflow-y: hidden, eta horrek taularen beheko edo goiko ertzetatik haratago doan edukia mozten du. Bereziki, goitibeherako menuak eta hirugarrenen beste widget batzuk moztu ditzake.

Beti erantzuten

Eten puntu guztietan, erabili .table-responsivehorizontalki mugitzeko taulak egiteko.

#	Goiburua	Goiburua	Goiburua	Goiburua	Goiburua	Goiburua	Goiburua	Goiburua	Goiburua
1	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula
2	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula
3	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula

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

Eten puntu zehatza

Erabili .table-responsive{-sm|-md|-lg|-xl|-xxl}behar den moduan eten-puntu jakin batera arte erantzuteko taulak sortzeko. Eten-puntu horretatik aurrera, mahaiak normal portatuko du eta ez da horizontalki mugituko.

Taula hauek hautsita ager daitezke beren estilo sentikorrak bista-zabalera zehatzetan aplikatzen diren arte.

#	Goiburua	Goiburua	Goiburua	Goiburua	Goiburua	Goiburua	Goiburua	Goiburua
1	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula
2	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula
3	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula

#	Goiburua	Goiburua	Goiburua	Goiburua	Goiburua	Goiburua	Goiburua	Goiburua
1	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula
2	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula
3	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula

#	Goiburua	Goiburua	Goiburua	Goiburua	Goiburua	Goiburua	Goiburua	Goiburua
1	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula
2	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula
3	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula

#	Goiburua	Goiburua	Goiburua	Goiburua	Goiburua	Goiburua	Goiburua	Goiburua
1	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula
2	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula
3	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula

#	Goiburua	Goiburua	Goiburua	Goiburua	Goiburua	Goiburua	Goiburua	Goiburua
1	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula
2	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula
3	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula

#	Goiburua	Goiburua	Goiburua	Goiburua	Goiburua	Goiburua	Goiburua	Goiburua
1	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula
2	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula
3	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula	Zelula

<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

Aldagaiak

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

Begizta

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

Pertsonalizatzea

Faktore-aldagaiak ( $table-striped-bg-factor, $table-active-bg-factor& $table-hover-bg-factor) taulako aldaeretan kontrastea zehazteko erabiltzen dira.
Argi eta ilun mahai aldaerez gain, gaiaren koloreak aldagaiak argitzen ditu $table-bg-level.