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 csíkozása



Áttekinthetőbbé, könnyebben átláthatóvá válik egy táblázat, ha minden második vagy harmadik sorának háttere eltér a többitől. Ekkor az eltérő színű sorok vezetik a szemet.

Az :nth-child(szám) kijelölő segítségével meghatározott számú sorokhoz saját tulajdonságokat rendelhetünk.

Minden második sor színének módosítása:

<style>...
  tr:nth-child(2n) { background:#33FF66; }
</style>

Minden harmadik sor színének módosítása:

<style>...
  tr:nth-child(3n) { background:#33FF66; }
</style>

Példa:

Forráskód



<style>
  thead tr {background-color: orange;}
  tr {background-color: #00CC66;}
  tr:nth-child(2n) {
        background-color: #33FF66;}
</style>
...
<body>
  <table>
    <thead><tr>
       <th> thead 1 </th>
       <th> thead 2 </th>
       <th> thead 3 </th>
    </tr><thead>
    <tbody>
      <tr>
         <th> th 1 </th>
         <td> td 1 </td>
         <td> td 2 </td>
       </tr> <tr>
         <th> th 2 </th>
         <td> td 3 </td>
         <td> td 4 </td>
      </tr> <tr>
         <th> th 3 </th>
         <td> td 5 </td>
         <td> td 6 </td>
      </tr> <tr>
          <th> th 4 </th>
          <td> td 7 </td>
          <td> td 8 </td>
      </tr> <tr>
          <th> th 5 </th>
          <td> td 9 </td>
          <td> td 10 </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_csikozasa_01.html ;