HTML5 + CSS3 logó
  WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

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:

  1. Cellák – háttere mindent takar
  2. Sorok – háttere az alatta lévő elemeket takarja
  3. Sorcsoportok – háttere az alatta lévő elemeket takarja
  4. Oszlopok – háttere az alatta lévő elemeket takarja
  5. Oszlopcsoportok – háttere az alatta lévő elemeket takarja
  6. Táblázat – háttere az alatta lévő elemeket takarja
  7. 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 ;