A táblázat háttere - WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS

A táblázat háttere

Alapértelmezetten a táblázatok minden eleme (cellák, sorok, sorcsoportok, oszlopok és oszlopcsoportok) átlátszó, így az oldal vagy a befogadó elem háttere látszik mögötte. Egy táblázathoz vagy bármely eleméhez rendelhetünk háttérszínt vagy háttérképet. Ekkor válik fontossá a fedési sorrend.

Fedési sorrend:

Cellák – háttere mindent takar
Sorok – háttere az alatta lévő elemeket takarja
Sorcsoportok – háttere az alatta lévő elemeket takarja
Oszlopok – háttere az alatta lévő elemeket takarja
Oszlopcsoportok – háttere az alatta lévő elemeket takarja
Táblázat – háttere az alatta lévő elemeket takarja
Befogadó elem vagy Body – háttere csak akkor látszik, ha a táblázatnak illetve a táblázat adott elemének nem lett háttér beállítva.

Példa:

Forráskód


<style>
   table {background-color: aqua;}
   .zold {background-color: green;}
    .kek {background-color: blue;}
  .sarga {background-color: yellow;}    
  .vzold {background-color: lime;}    
</style>
...
<body>
  <table border="1">
  <colgroup>
     <col class="zold">
     <col span="3" class="vzold" >
     <col >
  </colgroup>
  </thead>
<tr>
    <th> thead 1 </th>
    <th> thead 2 </th>
    <th> thead 3 </th>
    <th> thead 4 </th>
    <th> thead 5 </th>
  </tr><thead>
  <tbody>
    <tr class="sarga">
      <th> th 1 </th>
      <td> td 2 </td>
      <td class="kek"> td 2 </td>
      <td> td 3 </td> 
      <td> td 4 </td>
    </tr><tr>
      <th> th 2 </th>
      <td class="kek"> td 5 </td>
      <td> td 6 </td>
      <td> td 7 </td>
      <td> td 8 </td> 
    </tr><tr>
      <th class="kek"> th 3 </th>
      <td> td 9 </td>
      <td> td 10 </td>
      <td> td 11 </td>
      <td> td 12 </td> 
    </tr>
  </tbody>	
  <tfoot>
    <tr> <td colspan="5">tfoot</td> </tr>
  </tfoot>
 </table> 
</body>

Eredmény*

* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: css_tablazat_hattere_01.html ;