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    

Cellatartalom függőleges igazítása



A szövegformázásnál megismert vertical-align tulajdonság segítségével lehet a táblázat celláinak tartalmát is függőlegesen pozicionálni.

Lehetséges értékei táblázatok esetén:
top = fent,
bottom = lent,
middle = középen,
baseline = betűvonalon.

Függőleges igazítás :

kijelölő
{
vertical-align
:
kulcsszó;
}


A td és th címkéket használva a táblázat valamennyi cellájára alkalmazhatunk egy-egy beállítást.

Ha csupán a cellák egy részét kívánjuk egy irányba igazítani, akkor a legegyszerűbb egy osztály létrehozása, a példában látható módon.

Példa:

Forráskód



<style>
  th {vertical-align:bottom;} 
  td {vertical-align:middle;}      
  .fent {vertical-align:top;} 

  .lent {vertical-align:bottom;} 
  .kozepen {vertical-align:middle;}   
  </style>      
...
<body>
<h2>A táblázat címe fent:</h2>
  <table class="fent">
    <caption> Árjegyzék</caption>
    <tr>
      <th> Termékkód </th>
      <th> Megnevezése </th>
      <th class="kozepen"> Ár </th>
    </tr><tr>
      <th> XU1587</th>
      <td> Irodai PC 2 </td>
      <td> 107.500 Ft </td>
    </tr><tr>
      <th class="fent"> XU1583c</th>
      <td> Irodai PC 6  </td>
      <td class="lent"> 123.300 Ft </td>
    </tr> 
  </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_fuggoleges_igazitas.html ;