Source

Tabali minnu bɛ yen

Sɛbɛnw ni misaliw tabali cogoya sugandicogo la (ka da u baaracogo kan JavaScript plugins kɔnɔ) ni Bootstrap ye.

Misaliw

K’a sababu kɛ tabali baara cayalenba ye mɔgɔ sabananw ka wideyow kɔnɔ i n’a fɔ kalandriyaw ani donw sugandibagaw, an y’an ka tabaliw dilan walasa u ka kɛ mɔgɔ sugandilenw ye . Dɔrɔn ka basigi kalasi .tableFàra fɛn o fɛn kan <table>, o kɔ fɛ ka janya ni ladamu cogoyaw ye walima an ka fɛn caman b’a la minnu bɛ fɛn caman sɛmɛntiya.

Baara kɛli ni tabali taamasiyɛn jɔnjɔnba ye, nin ye .table-based tabali bɛ cogo min na Bootstrap kɔnɔ. Tabali cogoyaw bɛɛ bɛ ciyɛn ta Bootstrap 4 kɔnɔ, o kɔrɔ ye ko tabali minnu bɛ sigi sen kan, olu bɛna cogoya kelen na ni bangebaga ye.

# Bamako . Fɔlɔ Laban Kala
1 ye Marka Otto ye @mdo ye
2 ye Yakuba Thornton ye @belebeleba
3 ye Larry ye Kɔnɔ in @twitter kan 
<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>

Aw bɛ se fana ka kulɛriw wuli—ni sɛbɛnni jɛlenw ye dibi la—ni .table-dark.

# Bamako . Fɔlɔ Laban Kala
1 ye Marka Otto ye @mdo ye
2 ye Yakuba Thornton ye @belebeleba
3 ye Larry ye Kɔnɔ in @twitter kan 
<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>

Tabali kunkolo suganditaw

I n’a fɔ tabali ni tabali dibimanw, baara kɛ ni modificateur classes ye .thead-lightwalima .thead-darkka <thead>s kɛ i n’a fɔ a ɲɛ ye jɛman ye walima a ɲɛ ye nɛrɛmuguma ye.

# Bamako . Fɔlɔ Laban Kala
1 ye Marka Otto ye @mdo ye
2 ye Yakuba Thornton ye @belebeleba
3 ye Larry ye Kɔnɔ in @twitter kan
# Bamako . Fɔlɔ Laban Kala
1 ye Marka Otto ye @mdo ye
2 ye Yakuba Thornton ye @belebeleba
3 ye Larry ye Kɔnɔ in @twitter kan 
<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>

Layini sɛrɛkiliw

Aw bɛ baara kɛ ni .table-stripedzebra-striping fara tabali jirisun o tabali kan <tbody>.

# Bamako . Fɔlɔ Laban Kala
1 ye Marka Otto ye @mdo ye
2 ye Yakuba Thornton ye @belebeleba
3 ye Larry ye Kɔnɔ in @twitter kan 
<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>
# Bamako . Fɔlɔ Laban Kala
1 ye Marka Otto ye @mdo ye
2 ye Yakuba Thornton ye @belebeleba
3 ye Larry ye Kɔnɔ in @twitter kan 
<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>

Tabali min bɛ dankan na

Aw bɛ a fara a kan .table-borderedwalasa ka danw kɛ tabali ni seliw fan bɛɛ la.

# Bamako . Fɔlɔ Laban Kala
1 ye Marka Otto ye @mdo ye
2 ye Yakuba Thornton ye @belebeleba
3 ye Larry ka Kɔnɔ @twitter kan 
<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>
# Bamako . Fɔlɔ Laban Kala
1 ye Marka Otto ye @mdo ye
2 ye Yakuba Thornton ye @belebeleba
3 ye Larry ka Kɔnɔ @twitter kan 
<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>

Layiw minnu bɛ se ka wuli

Fàra ɲɔgɔn kan .table-hoverwalasa ka se ka hover cogoya dɔ Kɛ tabali jὲkuluw kan a kɔnɔ <tbody>.

# Bamako . Fɔlɔ Laban Kala
1 ye Marka Otto ye @mdo ye
2 ye Yakuba Thornton ye @belebeleba
3 ye Larry ka Kɔnɔ @twitter kan 
<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>
# Bamako . Fɔlɔ Laban Kala
1 ye Marka Otto ye @mdo ye
2 ye Yakuba Thornton ye @belebeleba
3 ye Larry ka Kɔnɔ @twitter kan 
<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>

Tabali fitinin dɔ

Aw bɛ a fara a kan .table-smwalasa ka tabali kɛ ɲɔgɔn fɛ ni aw ye selilɛriw tigɛ ka tila tila.

# Bamako . Fɔlɔ Laban Kala
1 ye Marka Otto ye @mdo ye
2 ye Yakuba Thornton ye @belebeleba
3 ye Larry ka Kɔnɔ @twitter kan 
<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>
# Bamako . Fɔlɔ Laban Kala
1 ye Marka Otto ye @mdo ye
2 ye Yakuba Thornton ye @belebeleba
3 ye Larry ka Kɔnɔ @twitter kan 
<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>

Kalanso minnu bɛ kɛ ka ɲɛsin ko kɛlenw ma

Baara kɛ ni contextual classes ye walasa ka tabali jiriw walima seliw kelen-kelenw kulɛri.

Kilasi Kumakun Kumakun
Walawalalen Selili Selili
Fɔlɔ Selili Selili
Fɔlɔ Selili Selili
Seginnkanni Selili Selili
Sanga Selili Selili
Farati Selili Selili
Lasɔmi Selili Selili
Info Selili Selili
Yeelen Selili Selili
Dibi Selili Selili 
<!-- 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>

Tabali kɔkanna suguya basigilenw tɛ sɔrɔ ni tabali dibiman ye, nka, i bɛ se ka baara kɛ ni sɛbɛnni walima kɔkanna nafamafɛnw ye walasa ka o cogoya kelenw sɔrɔ.

# Bamako . Kumakun Kumakun
1 ye Selili Selili
2 ye Selili Selili
3 ye Selili Selili
4 ye Selili Selili
5 ye Selili Selili
6. 6 Selili Selili
7 ye Selili Selili
8 ye Selili Selili
9 ye Selili Selili 
<!-- 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>
Kɔrɔ lasecogo dɛmɛni fɛɛrɛw ma

Baara kɛli ni kulɛri ye walasa ka kɔrɔ fara a kan, o bɛ taamasiyɛn yelen dɔrɔn de di, min tɛna lase dɛmɛni fɛɛrɛw baarakɛlaw ma – i n’a fɔ ɛkran kalanbagaw. Aw ye aw jija kunnafoni minnu jiralen don ni kulɛri ye, olu bɛ ye ka bɔ kɔnɔkow yɛrɛ la (misali la sɛbɛn yelen), walima u bɛ don a kɔnɔ fɛɛrɛ wɛrɛw fɛ, i n’a fɔ sɛbɛn wɛrɛw minnu dogolen don ni .sr-onlykalan ye.

Aw bɛ jaabi-tabali Dabɔ ni fɛn o fɛn sirili ye .tableni .table-responsive{-sm|-md|-lg|-xl}, ka tabali Kɛ 'sènfɛ-sɛbɛnni-yɔrɔ kelen-kelen bɛɛ max-widthla fo ka Se (nka a ma Dòn a la) 576px, 768px, 992px, ani 1120px, o cogo la.

A kɔlɔsi ko ikomi navigatɔrɔw tɛ dɛmɛ don sisan range context queries , an bɛ baara kɛ ni dantigɛliw ye min-ani max-prefixes ani viewports ni fractional widths (min bɛ se ka kɛ cogoya dɔw la dpi sanfɛ minɛnw kan, misali la) ni nafaw ye minnu bɛ ni tiɲɛni caman ye o sangaɲɔgɔnmaw kama .

Sɛbɛnw ɲɛfɔli sɛbɛnw

A bɛ <caption>baara kɛ i n’a fɔ tabali kuncɛ. A bɛ baarakɛlaw dɛmɛ ni ɛkran kalanbagaw ye walasa u ka tabali sɔrɔ ani k’a faamuya a bɛ min kan ani k’a latigɛ n’u b’a fɛ k’a kalan.

Baarakɛlaw tɔgɔw sɛbɛn
# Bamako . Fɔlɔ Laban Kala
1 ye Marka Otto ye @mdo ye
2 ye Yakuba Thornton ye @belebeleba
3 ye Larry ye Kɔnɔ in @twitter kan 
<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>

Tabali minnu bɛ jaabi di

Tabali minnu bɛ jaabi di, olu b’a to tabali bɛ se ka wuli ka taa a fɛ ni nɔgɔya ye. Aw bɛ tabali o tabali kɛ jaabi ye filɛlikɛlanw bɛɛ kɔnɔ ni aw ye a siri .tableni .table-responsive. Walima, aw bɛ kariyɔrɔba dɔ sugandi min bɛ se ka jaabi tabali sɔrɔ ni min ye ni aw bɛ baara kɛ ni .table-responsive{-sm|-md|-lg|-xl}.

Clipping/truncation jɔlen

Tabali minnu bɛ jaabi di, olu bɛ baara kɛ ni overflow-y: hidden, min bɛ kunnafoni fɛn o fɛn bɛ tɛmɛ tabali duguma walima sanfɛ dakunw kan, o bɛ tigɛ. Kɛrɛnkɛrɛnnenya la, o bɛ se ka clip off dropdown menus ani mɔgɔ wɛrɛw ka widget wɛrɛw bɔ.

A bɛ jaabi di tuma bɛɛ

Kariyɔrɔ kelen-kelen bɛɛ kan, aw bɛ baara kɛ ni .table-responsivetabali ye min bɛ wuli ka taa a fɛ.

# Bamako . Kumakun Kumakun Kumakun Kumakun Kumakun Kumakun Kumakun Kumakun Kumakun
1 ye Selili Selili Selili Selili Selili Selili Selili Selili Selili
2 ye Selili Selili Selili Selili Selili Selili Selili Selili Selili
3 ye Selili Selili Selili Selili Selili Selili Selili Selili Selili 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Breakpoint kɛrɛnkɛrɛnnen

Baara kɛ .table-responsive{-sm|-md|-lg|-xl}i n’a fɔ a mago bɛ cogo min na walasa ka jaabi tabali dilan fo ka se kariyɔrɔ kɛrɛnkɛrɛnnen dɔ ma. Ka bɔ o kariyɔrɔ la ka taa san fɛ, tabali bɛna kɛ cogo la min bɛ kɛ cogo la, wa a tɛna wuli ka taa a fɛ.

# Bamako . Kumakun Kumakun Kumakun Kumakun Kumakun
1 ye Selili Selili Selili Selili Selili
2 ye Selili Selili Selili Selili Selili
3 ye Selili Selili Selili Selili Selili
# Bamako . Kumakun Kumakun Kumakun Kumakun Kumakun
1 ye Selili Selili Selili Selili Selili
2 ye Selili Selili Selili Selili Selili
3 ye Selili Selili Selili Selili Selili
# Bamako . Kumakun Kumakun Kumakun Kumakun Kumakun
1 ye Selili Selili Selili Selili Selili
2 ye Selili Selili Selili Selili Selili
3 ye Selili Selili Selili Selili Selili
# Bamako . Kumakun Kumakun Kumakun Kumakun Kumakun
1 ye Selili Selili Selili Selili Selili
2 ye Selili Selili Selili Selili Selili
3 ye Selili Selili Selili Selili Selili 
<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>