Source

Gabateewwan

Galmee fi fakkeenyota akkaataa filannoo gabatee (fayyadama isaanii babal'ataa pilaagiinii JaavaScript keessatti kennameef) Bootstrap waliin.

Fakkeenyaaf

Sababa bal'inaan fayyadama gabatee wiijetoota qaama sadaffaa akka kalaandarii fi guyyaa filattoota hunda keessatti, gabateewwan keenya akka filannoo-in ta'aniif dizaayinii gooneerra . Gitaa bu'uuraa .tablegara kamiyyuutti qofa dabali <table>, sana booda akkaataa amala ykn gita fooyyessaa keenya adda addaa hammataman waliin dheeressi.

Mallattoo gabatee hunda caalaa bu'uuraa fayyadamuun, kunoo akkaataa .tablegabateewwan -bu'uura godhatan Bootstrap keessatti mul'atu. Akkaataan gabatee hundi Bootstrap 4 keessatti dhaalama , jechuunis gabateewwan man'ee kamiyyuu haala walfakkaatuun warraa wajjin akkaataan ni taasifama.

# Jalqaba Isa dhumaa Harkatti qabuu
1. 1. Maarqos Otto @mdo jedhaa
2. 2. Yaaqoob Thornton jedhamuun beekama @furdaa
3. 3. Laarii kan jedhu Simbirroo @twitter irratti argattu 
<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>

Akkasumas halluuwwan garagalchuu dandeessa—barruu ifaa duubbee dukkanaa'aa irratti—kan waliin .table-dark.

# Jalqaba Isa dhumaa Harkatti qabuu
1. 1. Maarqos Otto @mdo jedhaa
2. 2. Yaaqoob Thornton jedhamuun beekama @furdaa
3. 3. Laarii kan jedhu Simbirroo @twitter irratti argattu 
<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>

Filannoowwan mataa gabatee

Gabatee fi gabatee dukkanaa'aa wajjin wal fakkaata, gita fooyyessaa fayyadami .thead-lightykn s halluu diimaa ifaa ykn dukkanaa'aa akka mul'atu .thead-darkgochuuf .<thead>

# Jalqaba Isa dhumaa Harkatti qabuu
1. 1. Maarqos Otto @mdo jedhaa
2. 2. Yaaqoob Thornton jedhamuun beekama @furdaa
3. 3. Laarii kan jedhu Simbirroo @twitter irratti argattu
# Jalqaba Isa dhumaa Harkatti qabuu
1. 1. Maarqos Otto @mdo jedhaa
2. 2. Yaaqoob Thornton jedhamuun beekama @furdaa
3. 3. Laarii kan jedhu Simbirroo @twitter irratti argattu 
<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>

Tarreewwan sarara qaban

.table-stripedTarree gabatee kamiyyuu keessaa zebra-striping dabaluudhaaf fayyadami <tbody>.

# Jalqaba Isa dhumaa Harkatti qabuu
1. 1. Maarqos Otto @mdo jedhaa
2. 2. Yaaqoob Thornton jedhamuun beekama @furdaa
3. 3. Laarii kan jedhu Simbirroo @twitter irratti argattu 
<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>
# Jalqaba Isa dhumaa Harkatti qabuu
1. 1. Maarqos Otto @mdo jedhaa
2. 2. Yaaqoob Thornton jedhamuun beekama @furdaa
3. 3. Laarii kan jedhu Simbirroo @twitter irratti argattu 
<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>

Gabatee daangaa qabu

.table-borderedDaangaawwan gama hundaan gabatee fi man'eewwaniif dabali .

# Jalqaba Isa dhumaa Harkatti qabuu
1. 1. Maarqos Otto @mdo jedhaa
2. 2. Yaaqoob Thornton jedhamuun beekama @furdaa
3. 3. Laarii Simbirroo @twitter irratti argattu 
<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>
# Jalqaba Isa dhumaa Harkatti qabuu
1. 1. Maarqos Otto @mdo jedhaa
2. 2. Yaaqoob Thornton jedhamuun beekama @furdaa
3. 3. Laarii Simbirroo @twitter irratti argattu 
<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>

Gabatee daangaa hin qabne

.table-borderlessGabatee daangaa hin qabneef dabali .

# Jalqaba Isa dhumaa Harkatti qabuu
1. 1. Maarqos Otto @mdo jedhaa
2. 2. Yaaqoob Thornton jedhamuun beekama @furdaa
3. 3. Laarii Simbirroo @twitter irratti argattu 
<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-borderlessminjaala dukkanaa’aa irrattis fayyadamuun ni danda’ama.

# Jalqaba Isa dhumaa Harkatti qabuu
1. 1. Maarqos Otto @mdo jedhaa
2. 2. Yaaqoob Thornton jedhamuun beekama @furdaa
3. 3. Laarii Simbirroo @twitter irratti argattu 
<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>

Tarreewwan hoverable

.table-hoverTarreewwan gabatee irratti haalata hover dandeessisuuf dabali <tbody>.

# Jalqaba Isa dhumaa Harkatti qabuu
1. 1. Maarqos Otto @mdo jedhaa
2. 2. Yaaqoob Thornton jedhamuun beekama @furdaa
3. 3. Laarii Simbirroo @twitter irratti argattu 
<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>
# Jalqaba Isa dhumaa Harkatti qabuu
1. 1. Maarqos Otto @mdo jedhaa
2. 2. Yaaqoob Thornton jedhamuun beekama @furdaa
3. 3. Laarii Simbirroo @twitter irratti argattu 
<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>

Minjaala xiqqaa

.table-smPaadiingii seelii walakkaatti muruun gabateewwan caalaatti kompaaktii gochuuf itti dabali .

# Jalqaba Isa dhumaa Harkatti qabuu
1. 1. Maarqos Otto @mdo jedhaa
2. 2. Yaaqoob Thornton jedhamuun beekama @furdaa
3. 3. Laarii Simbirroo @twitter irratti argattu 
<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>
# Jalqaba Isa dhumaa Harkatti qabuu
1. 1. Maarqos Otto @mdo jedhaa
2. 2. Yaaqoob Thornton jedhamuun beekama @furdaa
3. 3. Laarii Simbirroo @twitter irratti argattu 
<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>

Kutaalee haala dubbii (contextual classes).

Tarreewwan gabatee ykn man'eelee dhuunfaa halluu itti gochuuf gitawwan yaadannoo fayyadami.

Kutaa Mata duree Mata duree
Si'aawaa Seelii Seelii
Durtii dha Seelii Seelii
Sadarkaa tokkoffaa Seelii Seelii
Sadarkaa lammaffaa Seelii Seelii
Milkaa'ina Seelii Seelii
Hamaa Seelii Seelii
Akeekkachiisa Seelii Seelii
Info Seelii Seelii
Ifa Seelii Seelii
Duukkana Seelii Seelii 
<!-- 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>

Garaagarummaan duubbee gabatee idilee gabatee dukkanaa'aa wajjin hin jiran, haa ta'u malee, akkaataa walfakkaataa galmaan ga'uuf barruu ykn faayidaa duubbee fayyadamuu dandeessa.

# Mata duree Mata duree
1. 1. Seelii Seelii
2. 2. Seelii Seelii
3. 3. Seelii Seelii
4. Seelii Seelii
5. 5. Seelii Seelii
6. 6. Seelii Seelii
7. 7. Seelii Seelii
8. Seelii Seelii
9. 9. Seelii Seelii 
<!-- 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>
Teeknooloojiiwwan gargaaraa ta’aniif hiika dabarsuu

Hiika dabaluudhaaf halluu fayyadamuun agarsiisa mul’ataa qofa kenna, kunis fayyadamtoota teeknooloojiiwwan gargaarsaa – kan akka dubbistoota iskiriinii – hin dabarfamu. Odeeffannoon halluudhaan agarsiifame qabiyyee mataa isaa irraa ifa ta'uu isaa mirkaneessi (fkn barruu mul'atu), ykn karaa filannootiin hammatamuu isaa, kan akka barruu dabalataa .sr-onlygita waliin dhokatee.

Gabateewwan deebii kennanii kamiyyuu .tablewaliin marsuudhaan uumi .table-responsive{-sm|-md|-lg|-xl}, gabatee tokkoon tokkoo max-widthqabxii cabbii hanga (garuu osoo hin dabalatin) 576px, 768px, 992px, fi 1120px, akkaataa walduraa duubaan, garagalfamu gochuu.

Hubadhu, erga biraawzaroonni yeroo ammaa gaaffiiwwan haalata hangaa hin deeggaran , walmadaalchisoota kanaaf gatiiwwan sirritti ol'aanaa qaban fayyadamuun daangaawwanii min-fi max-durtii fi iddoowwan ilaalchaa bal'ina firaakshinii qaban (kan haalawwan murtaa'an jalatti meeshaalee dpi ol'aanaa irratti uumamuu danda'u, fakkeenyaaf) naannoo hojjenna .

Barreeffamoota barreeffamaa

A <caption>akka mataduree gabatee tokkootti hojjeta. Fayyadamtoonni dubbistoota iskiriinii qaban gabatee akka argatanii fi waa'ee isaa maal akka ta'e hubatanii dubbisuu yoo barbaadan akka murteessan gargaara.

Tarree fayyadamtootaa
# Jalqaba Isa dhumaa Harkatti qabuu
1. 1. Maarqos Otto @mdo jedhaa
2. 2. Yaaqoob Thornton jedhamuun beekama @furdaa
3. 3. Laarii kan jedhu Simbirroo @twitter irratti argattu 
<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>

Gabateewwan deebii kennan

Gabateewwan deebii kennan gabateewwan salphaatti akka qajeelaan akka qaxxaamuran hayyamu. .tableGabatee kamiyyuu deebii akka kennu godhi a with marchuudhaan .table-responsive. Yookiin, qabxii cabbii guddaa kan gabatee deebii kennuu hanga ittiin qabaattu fayyadamuun filadhu .table-responsive{-sm|-md|-lg|-xl}.

Ciccituu/ciccituu dhaabbataa

Gabateewwan deebii kennan overflow-y: hidden, kan qabiyyee kamiyyuu kan qarqara jalaa ykn gubbaa gabatee bira darbee deemu fayyadamu fayyadamu. Keessattuu, kun menu gadi bu'aa fi wiijetoota qaama sadaffaa biroo irraa cicciruu danda'a.

Yeroo hundumaa deebii kan kennu

Qabxii cabbii hunda qaxxaamuree, .table-responsivegabateewwan qajeelaan garagalchuuf fayyadami.

# Mata duree Mata duree Mata duree Mata duree Mata duree Mata duree Mata duree Mata duree Mata duree
1. 1. Seelii Seelii Seelii Seelii Seelii Seelii Seelii Seelii Seelii
2. 2. Seelii Seelii Seelii Seelii Seelii Seelii Seelii Seelii Seelii
3. 3. Seelii Seelii Seelii Seelii Seelii Seelii Seelii Seelii Seelii 
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Breakpoint adda ta'e

.table-responsive{-sm|-md|-lg|-xl}Gabateewwan deebii kennanii hanga qabxii cabbii murtaa'etti uumuuf akka barbaachisummaa isaatti fayyadami . Qabxii cabbii sana irraa fi ol, gabatee akka idileetti amala qabaata malee gara qajeelaa hin tarkaanfatu.

Gabateewwan kun hanga akkaataan deebii isaanii bal'ina buufata ilaalchaa murtaa'e irratti hojiirra oolutti cabee mul'achuu danda'u.

# Mata duree Mata duree Mata duree Mata duree Mata duree Mata duree Mata duree Mata duree
1. 1. Seelii Seelii Seelii Seelii Seelii Seelii Seelii Seelii
2. 2. Seelii Seelii Seelii Seelii Seelii Seelii Seelii Seelii
3. 3. Seelii Seelii Seelii Seelii Seelii Seelii Seelii Seelii 
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
# Mata duree Mata duree Mata duree Mata duree Mata duree Mata duree Mata duree Mata duree
1. 1. Seelii Seelii Seelii Seelii Seelii Seelii Seelii Seelii
2. 2. Seelii Seelii Seelii Seelii Seelii Seelii Seelii Seelii
3. 3. Seelii Seelii Seelii Seelii Seelii Seelii Seelii Seelii 
<div class="table-responsive-md">
  <table class="table">
    ...
  </table>
</div>
# Mata duree Mata duree Mata duree Mata duree Mata duree Mata duree Mata duree Mata duree
1. 1. Seelii Seelii Seelii Seelii Seelii Seelii Seelii Seelii
2. 2. Seelii Seelii Seelii Seelii Seelii Seelii Seelii Seelii
3. 3. Seelii Seelii Seelii Seelii Seelii Seelii Seelii Seelii 
<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>
# Mata duree Mata duree Mata duree Mata duree Mata duree Mata duree Mata duree Mata duree
1. 1. Seelii Seelii Seelii Seelii Seelii Seelii Seelii Seelii
2. 2. Seelii Seelii Seelii Seelii Seelii Seelii Seelii Seelii
3. 3. Seelii Seelii Seelii Seelii Seelii Seelii Seelii Seelii 
<div class="table-responsive-xl">
  <table class="table">
    ...
  </table>
</div>