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 ;