Saltatu eduki nagusira Saltatu dokumentuen nabigaziora
in English

Taulak

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

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
1 Markatu Otto @mdo
Goiburua Goiburua Goiburua
A Lehenengoa Azkena
B Lehenengoa Azkena
C Lehenengoa Azkena
3 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.