Táblázatok formázása

A táblázatok formázására használhatóak a korábban már megismert szegély, háttér, térköz formázásokat igen gyakran használjuk. Itt csak néhány specialitásra térünk ki.

Szegélyek

A HTML border tulajdonság helyett általában a következő módon szoktuk a szegélyt formázni:

table, th, td {
  border: 1px solid black;
}

Ezen kívül szinte minden esetben alkalmazzuk a table tag border-collapse attribútumát, amivel a szokatlan kinézetű önálló cellaszegélyek helyett a szövegszerkesztőkben megszokott kinézetet írhatjuk elő.

table {
  border-collapse:collapse;
}

Méretek

A táblázatok alapértelmezés szerint csak azt a minimális helyet foglalják el, amely szükséges a tartalom megjelenítéséhez. A könnyebb olvashatóság érdekében a cellákon szokás belső szegélyt (padding) beállítani, illetve egyéb módokon is befolyásolni a táblázat méretét. Néhány szokásos megoldás:

table { width:100%; }
th { height:50px; }
td {line-height: 24px; }

Cella igazítás

A cellák tartalmát mind vízszintes, mind függőleges irányban igazíthatjuk. Érdemes azonban egységes kinézetet tervezni, és nem a „tarkaságra” törekedni.

Nézzünk itt is néhány megoldást:

td {
  text-align:right;
  vertical-align:bottom;
}

Zebra táblák

Az alap formázások lehetőségein túl további segítséget adhatunk a látogatóknak, hogy a táblázatot könnyebben tudják olvasni. Ennek igen elterjedt példája a zebra táblák alkalmazása.

Nézzünk egy rövid példát. (Forrás: A List Apart Magazine)

<table>
  <tr class="paratlan">
    td>1. sor, 1. cella</td>
    <td>1. sor, 2. cella</td>
  </tr>
  <tr class="paros">
    td>2. sor, 1. cella</td>
    <td>2. sor, 2. cella</td>
  </tr>
  <tr class="paratlan">
    td>3. sor, 1. cella</td>
    <td>3. sor, 2. cella</td>
  </tr>
  <tr class="paros">
    td>4. sor, 1. cella</td>
    <td>4. sor, 2. cella</td>
  </tr>
</table>

table {
  border-collapse:collapse;
  border: 1px solid #aaa;
}
td {
  border: 1px solid #aaa;
  padding: 2px;
}
tr.paros td {
  background-color: #eee;
}
tr.paratlan  td {
  background-color: #fff;
}

Az eredmény: