Source

Tabelli

Dokumentazzjoni u eżempji għall-grafika opt-in tat-tabelli (minħabba l-użu prevalenti tagħhom fil-plugins JavaScript) b'Bootstrap.

Eżempji

Minħabba l-użu mifrux tat-tabelli f'widgets ta' partijiet terzi bħall-kalendarji u l-ġbir tad-data, iddisinna t-tabelli tagħna biex ikunu opt-in . Żid biss il-klassi bażi .tablegħal kwalunkwe <table>, imbagħad testendi bi stili tad-dwana jew il-klassijiet varji ta 'modifikaturi inklużi tagħna.

Bl-użu tal-markup tat-tabella l-aktar bażiku, hawn kif .tablejidhru t-tabelli bbażati fuq Bootstrap. L-istili tal-mejda kollha jintirtu f'Bootstrap 4 , li jfisser li kwalunkwe tabelli nested se jiġu stilati bl-istess mod bħall-ġenitur.

# L-ewwel L-aħħar Manku
1 Mark Otto @mdo
2 Ġakobb Thornton @xaħam
3 Larry l-ghasfur @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>

Tista' wkoll taqleb il-kuluri—b'test ċar fuq sfondi skuri—bil- .table-dark.

# L-ewwel L-aħħar Manku
1 Mark Otto @mdo
2 Ġakobb Thornton @xaħam
3 Larry l-ghasfur @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>

Għażliet tar-ras tal-mejda

Simili għal tabelli u tabelli skuri, uża l-klassijiet modifikaturi .thead-lightjew .thead-darkbiex tagħmel <thead>s jidhru griż ċar jew skur.

# L-ewwel L-aħħar Manku
1 Mark Otto @mdo
2 Ġakobb Thornton @xaħam
3 Larry l-ghasfur @twitter
# L-ewwel L-aħħar Manku
1 Mark Otto @mdo
2 Ġakobb Thornton @xaħam
3 Larry l-ghasfur @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>

Ringieli strixxi

Uża .table-stripedbiex iżżid zebra-striping ma' kwalunkwe ringiela tal-mejda fi ħdan il- <tbody>.

# L-ewwel L-aħħar Manku
1 Mark Otto @mdo
2 Ġakobb Thornton @xaħam
3 Larry l-ghasfur @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>
# L-ewwel L-aħħar Manku
1 Mark Otto @mdo
2 Ġakobb Thornton @xaħam
3 Larry l-ghasfur @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>

Mejda mdawra

Żid .table-borderedgħall-fruntieri fuq in-naħat kollha tat-tabella u ċ-ċelloli.

# L-ewwel L-aħħar Manku
1 Mark Otto @mdo
2 Ġakobb Thornton @xaħam
3 Larry l-Għasfur @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>
# L-ewwel L-aħħar Manku
1 Mark Otto @mdo
2 Ġakobb Thornton @xaħam
3 Larry l-Għasfur @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>

Mejda bla fruntieri

Żid .table-borderlessgħal mejda mingħajr fruntieri.

# L-ewwel L-aħħar Manku
1 Mark Otto @mdo
2 Ġakobb Thornton @xaħam
3 Larry l-Għasfur @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-borderlessjista 'jintuża wkoll fuq imwejjed skuri.

# L-ewwel L-aħħar Manku
1 Mark Otto @mdo
2 Ġakobb Thornton @xaħam
3 Larry l-Għasfur @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>

Ringieli hoverable

Żid .table-hoverbiex tippermetti stat ta' hover fuq ringieli tal-mejda fi ħdan <tbody>.

# L-ewwel L-aħħar Manku
1 Mark Otto @mdo
2 Ġakobb Thornton @xaħam
3 Larry l-Għasfur @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>
# L-ewwel L-aħħar Manku
1 Mark Otto @mdo
2 Ġakobb Thornton @xaħam
3 Larry l-Għasfur @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>

Mejda żgħira

Żid .table-smbiex tagħmel it-tabelli aktar kompatti billi taqta' l-ikkuttunar taċ-ċelluli bin-nofs.

# L-ewwel L-aħħar Manku
1 Mark Otto @mdo
2 Ġakobb Thornton @xaħam
3 Larry l-Għasfur @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>
# L-ewwel L-aħħar Manku
1 Mark Otto @mdo
2 Ġakobb Thornton @xaħam
3 Larry l-Għasfur @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>

Klassijiet kuntestwali

Uża klassijiet kuntestwali biex ikkulurit ringieli tat-tabella jew ċelloli individwali.

Klassi Intestatura Intestatura
Attiva Ċellula Ċellula
Default Ċellula Ċellula
Primarja Ċellula Ċellula
Sekondarja Ċellula Ċellula
Suċċess Ċellula Ċellula
Periklu Ċellula Ċellula
Twissija Ċellula Ċellula
Info Ċellula Ċellula
Dawl Ċellula Ċellula
Dlam Ċellula Ċellula 
<!-- 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>

Varjanti regolari fl-isfond tal-mejda mhumiex disponibbli mat-tabella skura, madankollu, tista 'tuża test jew utilitajiet fl-isfond biex tikseb stili simili.

# Intestatura Intestatura
1 Ċellula Ċellula
2 Ċellula Ċellula
3 Ċellula Ċellula
4 Ċellula Ċellula
5 Ċellula Ċellula
6 Ċellula Ċellula
7 Ċellula Ċellula
8 Ċellula Ċellula
9 Ċellula Ċellula 
<!-- 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>
Twassal tifsira għal teknoloġiji ta' assistenza

L-użu tal-kulur biex iżżid it-tifsira jipprovdi biss indikazzjoni viżwali, li mhux se tiġi mgħoddija lill-utenti ta 'teknoloġiji ta' assistenza - bħal screen readers. Kun żgur li l-informazzjoni indikata bil-kulur hija jew ovvja mill-kontenut innifsu (eż. it-test viżibbli), jew tkun inkluża permezz ta' mezzi alternattivi, bħal test addizzjonali moħbi mal- .sr-onlyklassi.

Oħloq tabelli li jirrispondu billi tgeżwer kwalunkwe .tableb' .table-responsive{-sm|-md|-lg|-xl}, u tagħmel it-tabella tiskrollja orizzontalment f'kull max-widthbreakpoint ta' sa (iżda mhux inkluż) 576px, 768px, 992px, u 1120px, rispettivament.

Innota li peress li l-browsers bħalissa ma jappoġġjawx mistoqsijiet dwar il-kuntest tal-firxa , naħdmu madwar il-limitazzjonijiet ta' min-u max-prefissi u viewports b'wisgħat frazzjonali (li jistgħu jseħħu taħt ċerti kundizzjonijiet fuq apparati b'dpi għolja, pereżempju) billi nużaw valuri bi preċiżjoni ogħla għal dawn il-paraguni. .

Captions

A <caption>jiffunzjona bħal intestatura għal tabella. Jgħin lill-utenti bi screen readers biex isibu tabella u jifhmu dwar xiex tkun u jiddeċiedu jekk iridux jaqrawha.

Lista ta' utenti
# L-ewwel L-aħħar Manku
1 Mark Otto @mdo
2 Ġakobb Thornton @xaħam
3 Larry l-ghasfur @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>

Tabelli li jirrispondu

Tabelli li jirrispondu jippermettu li t-tabelli jiġu skrollati orizzontalment b'faċilità. Agħmel kwalunkwe mejda li tirreaġixxi fil-viewports kollha billi tgeżwer .tableb ' .table-responsive. Jew, agħżel breakpoint massimu li bih ikollok tabella li tirrispondi sa billi tuża .table-responsive{-sm|-md|-lg|-xl}.

Qtugħ/qtugħ vertikali

It-tabelli li jirrispondu jagħmlu użu minn overflow-y: hidden, li jaqta' kull kontenut li jmur lil hinn mit-truf ta' isfel jew ta' fuq tat-tabella. B'mod partikolari, dan jista' jaqtgħu menus dropdown u widgets oħra ta 'partijiet terzi.

Dejjem jirrispondi

F'kull breakpoint, uża .table-responsivegħal tabelli li tiskrolljaw orizzontalment.

# Intestatura Intestatura Intestatura Intestatura Intestatura Intestatura Intestatura Intestatura Intestatura
1 Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula
2 Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula
3 Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Breakpoint speċifiku

Uża .table-responsive{-sm|-md|-lg|-xl}kif meħtieġ biex toħloq tabelli responsivi sa breakpoint partikolari. Minn dak il-breakpoint u 'l fuq, it-tabella se taġixxi b'mod normali u mhux tiskrollja orizzontalment.

Dawn it-tabelli jistgħu jidhru mkissra sakemm l-istili reattivi tagħhom japplikaw f'wisgħat ta' viewport speċifiċi.

# Intestatura Intestatura Intestatura Intestatura Intestatura Intestatura Intestatura Intestatura
1 Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula
2 Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula
3 Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# Intestatura Intestatura Intestatura Intestatura Intestatura Intestatura Intestatura Intestatura
1 Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula
2 Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula
3 Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# Intestatura Intestatura Intestatura Intestatura Intestatura Intestatura Intestatura Intestatura
1 Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula
2 Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula
3 Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# Intestatura Intestatura Intestatura Intestatura Intestatura Intestatura Intestatura Intestatura
1 Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula
2 Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula
3 Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula Ċellula 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>