Source

Tabelat

Dokumentacioni dhe shembuj për stilimin e tabelave (duke pasur parasysh përdorimin e tyre të përhapur në shtojcat JavaScript) me Bootstrap.

Shembuj

Për shkak të përdorimit të gjerë të tabelave nëpër miniaplikacionet e palëve të treta, si kalendarët dhe zgjedhësit e datave, ne i kemi projektuar tabelat tona për t'u zgjedhur . Thjesht shtoni klasën bazë .tablenë çdo <table>, pastaj zgjerojeni me stile të personalizuara ose klasa të ndryshme modifikuese të përfshira.

Duke përdorur shënjimin më bazë të tabelës, ja se si .tableduken tabelat e bazuara në Bootstrap. Të gjitha stilet e tabelave trashëgohen në Bootstrap 4 , që do të thotë se çdo tavolinë e vendosur do të stilohet në të njëjtën mënyrë si prindi.

# Së pari E fundit Doreza
1 shenjë Oto @mdo
2 Jakobi Thornton @yndyrë
3 Larry Zogu @Cicëroj 
<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>

Ju gjithashtu mund t'i ktheni ngjyrat - me tekst të lehtë në sfond të errët - me .table-dark.

# Së pari E fundit Doreza
1 shenjë Oto @mdo
2 Jakobi Thornton @yndyrë
3 Larry Zogu @Cicëroj 
<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>

Opsionet e kokës së tavolinës

Ngjashëm me tabelat dhe tabelat e errëta, përdorni klasat e modifikuesve .thead-lightose .thead-darkpër ta bërë <thead>s të duket gri e hapur ose e errët.

# Së pari E fundit Doreza
1 shenjë Oto @mdo
2 Jakobi Thornton @yndyrë
3 Larry Zogu @Cicëroj
# Së pari E fundit Doreza
1 shenjë Oto @mdo
2 Jakobi Thornton @yndyrë
3 Larry Zogu @Cicëroj 
<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>

Rreshtat me vija

Përdoreni .table-stripedpër të shtuar vija zebra në çdo rresht tabele brenda <tbody>.

# Së pari E fundit Doreza
1 shenjë Oto @mdo
2 Jakobi Thornton @yndyrë
3 Larry Zogu @Cicëroj 
<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>
# Së pari E fundit Doreza
1 shenjë Oto @mdo
2 Jakobi Thornton @yndyrë
3 Larry Zogu @Cicëroj 
<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>

Tabela me kufi

Shto .table-borderedpër kufijtë në të gjitha anët e tabelës dhe qelizat.

# Së pari E fundit Doreza
1 shenjë Oto @mdo
2 Jakobi Thornton @yndyrë
3 Larry Zogu @Cicëroj 
<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>
# Së pari E fundit Doreza
1 shenjë Oto @mdo
2 Jakobi Thornton @yndyrë
3 Larry Zogu @Cicëroj 
<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>

Tabela pa kufi

Shto .table-borderlesspër një tabelë pa kufij.

# Së pari E fundit Doreza
1 shenjë Oto @mdo
2 Jakobi Thornton @yndyrë
3 Larry Zogu @Cicëroj 
<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-borderlessmund të përdoret edhe në tavolina të errëta.

# Së pari E fundit Doreza
1 shenjë Oto @mdo
2 Jakobi Thornton @yndyrë
3 Larry Zogu @Cicëroj 
<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>

Rreshtat e lëvizshëm

Shto .table-hoverpër të aktivizuar një gjendje qëndrimi në rreshtat e tabelës brenda një <tbody>.

# Së pari E fundit Doreza
1 shenjë Oto @mdo
2 Jakobi Thornton @yndyrë
3 Larry Zogu @Cicëroj 
<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>
# Së pari E fundit Doreza
1 shenjë Oto @mdo
2 Jakobi Thornton @yndyrë
3 Larry Zogu @Cicëroj 
<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>

Tavolinë e vogël

Shtoni .table-smpër t'i bërë tavolinat më kompakte duke e prerë mbushjen e qelizave në gjysmë.

# Së pari E fundit Doreza
1 shenjë Oto @mdo
2 Jakobi Thornton @yndyrë
3 Larry Zogu @Cicëroj 
<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>
# Së pari E fundit Doreza
1 shenjë Oto @mdo
2 Jakobi Thornton @yndyrë
3 Larry Zogu @Cicëroj 
<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>

Klasat kontekstuale

Përdorni klasa kontekstuale për të ngjyrosur rreshtat e tabelës ose qelizat individuale.

Klasa Drejtimi Drejtimi
Aktiv Qelizë Qelizë
E paracaktuar Qelizë Qelizë
fillore Qelizë Qelizë
E mesme Qelizë Qelizë
Sukses Qelizë Qelizë
Rrezik Qelizë Qelizë
Paralajmërim Qelizë Qelizë
Informacion Qelizë Qelizë
Drita Qelizë Qelizë
E errët Qelizë Qelizë 
<!-- 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>

Variantet e zakonshme të sfondit të tabelës nuk disponohen me tabelën e errët, megjithatë, mund të përdorni programe teksti ose sfondi për të arritur stile të ngjashme.

# Drejtimi Drejtimi
1 Qelizë Qelizë
2 Qelizë Qelizë
3 Qelizë Qelizë
4 Qelizë Qelizë
5 Qelizë Qelizë
6 Qelizë Qelizë
7 Qelizë Qelizë
8 Qelizë Qelizë
9 Qelizë Qelizë 
<!-- 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>
Përcjellja e kuptimit tek teknologjitë ndihmëse

Përdorimi i ngjyrës për të shtuar kuptimin ofron vetëm një tregues vizual, i cili nuk do t'u transmetohet përdoruesve të teknologjive ndihmëse - siç janë lexuesit e ekranit. Sigurohuni që informacioni i shënuar nga ngjyra të jetë ose i dukshëm nga vetë përmbajtja (p.sh. teksti i dukshëm), ose të përfshihet përmes mjeteve alternative, si teksti shtesë i fshehur me .sr-onlyklasën.

Krijoni tabela të përgjegjshme duke mbështjellë ndonjë .tableme .table-responsive{-sm|-md|-lg|-xl}, duke e bërë tabelën të lëvizë horizontalisht në çdo max-widthpikë ndërprerjeje deri në (por pa përfshirë) përkatësisht 576 pikselë, 768 px, 992 px dhe 1120 px.

Vini re se meqenëse shfletuesit nuk mbështesin aktualisht pyetjet e kontekstit të diapazonit , ne punojmë rreth kufizimeve min-dhe max-prefikseve dhe portave të pamjes me gjerësi të pjesshme (të cilat mund të ndodhin në kushte të caktuara në pajisjet me dpi të lartë, për shembull) duke përdorur vlera me saktësi më të lartë për këto krahasime .

Titrat

Një <caption>funksionon si një titull për një tabelë. Ai i ndihmon përdoruesit me lexues ekrani të gjejnë një tabelë dhe të kuptojnë se për çfarë bëhet fjalë dhe të vendosin nëse duan ta lexojnë atë.

Lista e përdoruesve
# Së pari E fundit Doreza
1 shenjë Oto @mdo
2 Jakobi Thornton @yndyrë
3 Larry Zogu @Cicëroj 
<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>

Tabelat e përgjegjshme

Tabelat e përgjegjshme lejojnë që tabelat të lëvizin me lehtësi horizontalisht. Bëni çdo tabelë të përgjegjshme në të gjitha portat e shikimit duke e mbështjellë një .tableme .table-responsive. Ose, zgjidhni një pikë ndërprerjeje maksimale me të cilën do të keni një tabelë të përgjegjshme deri në duke përdorur .table-responsive{-sm|-md|-lg|-xl}.

Prerje/prerje vertikale

Tabelat e përgjegjshme përdorin overflow-y: hidden, e cila heq çdo përmbajtje që shkon përtej skajeve të poshtme ose të sipërme të tabelës. Në veçanti, kjo mund të fshijë menytë rënëse dhe pajisje të tjera të palëve të treta.

Gjithmonë i përgjegjshëm

Për çdo pikë ndërprerjeje, përdoret .table-responsivepër tabelat me lëvizje horizontale.

# Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi
1 Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë
2 Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë
3 Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Pika specifike e ndërprerjes

Përdorni .table-responsive{-sm|-md|-lg|-xl}sipas nevojës për të krijuar tabela të përgjegjshme deri në një pikë të caktuar ndërprerjeje. Nga ajo pikë e ndërprerjes e lart, tabela do të sillet normalisht dhe nuk do të lëvizë horizontalisht.

Këto tabela mund të duken të thyera derisa stilet e tyre reaguese të zbatohen në gjerësi të veçanta të portave të pamjes.

# Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi
1 Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë
2 Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë
3 Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi
1 Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë
2 Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë
3 Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi
1 Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë
2 Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë
3 Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi Drejtimi
1 Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë
2 Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë
3 Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë Qelizë 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>