Táblázatok

Egy táblázat elemei


Törzs (tbody)

  <table class="table">
    <tbody>
      <tr> <td>d11</td> <td>d12</td> <td>d13</td> </tr>
      <tr> <td>d21</td> <td>d22</td> <td>d23</td> </tr>
      <tr> <td>d31</td> <td>d32</td> <td>d33</td> </tr>
    </tbody>
  </table>

d11 d12 d13
d21 d22 d23
d31 d32 d33


Fejrész (thead) és törzs

  <table class="table">
    <thead>
      <tr> <th>F1</th> <th>F2</th> <th>F3</th> </tr>
    </thead>
    <tbody>
      <tr> <td>d11</td> <td>d12</td> <td>d13</td> </tr>
      <tr> <td>d21</td> <td>d22</td> <td>d23</td> </tr>
      <tr> <td>d31</td> <td>d32</td> <td>d33</td> </tr>
    </tbody>
  </table>

F1 F2 F3
d11 d12 d13
d21 d22 d23
d31 d32 d33


Fejrész, törzs és lábrész (tfoot)

  <table class="table">
    <thead>
      <tr> <th>F1</th> <th>F2</th> <th>F3</th> </tr>
    </thead>
    <tbody>
      <tr> <td>d11</td> <td>d12</td> <td>d13</td> </tr>
      <tr> <td>d21</td> <td>d22</td> <td>d23</td> </tr>
      <tr> <td>d31</td> <td>d32</td> <td>d33</td> </tr>
    </tbody>
    <tfoot>
      <tr> <th>L1</th> <th>L2</th> <th>L3</th> </tr>
    </tfoot>
  </table>

F1 F2 F3
d11 d12 d13
d21 d22 d23
d31 d32 d33
L1 L2 L3


Fejrész, törzs, lábrész és felirat (caption)

  <table class="table caption-top">
    <caption>Táblázat felirata</caption>
    <thead>
      <tr> <th>F1</th> <th>F2</th> <th>F3</th> </tr>
    </thead>
    <tbody>
      <tr> <td>d11</td> <td>d12</td> <td>d13</td> </tr>
      <tr> <td>d21</td> <td>d22</td> <td>d23</td> </tr>
      <tr> <td>d31</td> <td>d32</td> <td>d33</td> </tr>
    </tbody>
    <tfoot>
      <tr> <th>L1</th> <th>L2</th> <th>L3</th> </tr>
    </tfoot>
  </table>

Táblázat felirata
F1 F2 F3
d11 d12 d13
d21 d22 d23
d31 d32 d33
L1 L2 L3

Ha az 1. sorból elhagyjuk a "caption-top" részt, a táblázat felirata alulra (a lábrész alá) kerül.



Táblázatok formázása


  <table class="table">
    <tr> <th>F1</th>  <th>F2</th>  <th>F3</th>  <th>F4</th>  </tr>
    <tr> <td>d11</td> <td>d12</td> <td>d13</td> <td>d14</td> </tr>
    <tr> <td>d21</td> <td>d22</td> <td>d23</td> <td>d24</td> </tr>
    <tr> <td>d31</td> <td>d32</td> <td>d33</td> <td>d34</td> </tr>
  </table>

A táblázatok HTML kódja szinte teljesen azonos, csak az első soruk módosult illetve bővült.


F1 F2 F3 F4
d11 d12 d13 d14
d21 d22 d23 d24
d31 d32 d33 d34

egyszerű táblázat
class="table"

F1 F2 F3 F4
d11 d12 d13 d14
d21 d22 d23 d24
d31 d32 d33 d34

táblázat szegélyekkel
class="table table-bordered"

F1 F2 F3 F4
d11 d12 d13 d14
d21 d22 d23 d24
d31 d32 d33 d34

táblázat színes háttérrel
class="table table-danger"


F1 F2 F3 F4
d11 d12 d13 d14
d21 d22 d23 d24
d31 d32 d33 d34

zebra táblázat
class="table table-striped"

F1 F2 F3 F4
d11 d12 d13 d14
d21 d22 d23 d24
d31 d32 d33 d34

táblázat, az aktuális sor kiemelve
class="table table-hover"

F1 F2 F3 F4
d11 d12 d13 d14
d21 d22 d23 d24
d31 d32 d33 d34

táblázat, az előbbiek kombinálhatók
class="table table-primary table-hover"



Egyéb variációk: https://getbootstrap.com/docs/5.2/content/tables/

Teszteléshez kattintsunk arra a gombra, amelyre az egérkurzort téve "Edit on StackBlitz" szöveg jelenik meg!

  Itt a forrásprogram módosítható is!