Táblázatok

Táblázatot a „table” címkék segítségével hozhatjuk létre. A táblázatok sorait a „tr” címkével határozzuk meg az angol „table row” szavakból. A táblázat egyes adatokat tartalmazó tábláit a „td” címkékkel adjuk meg. A „td” az angol „table data” szavakból származik. Az alábbi táblázat például a néhány merevlemezt árait tartalmazza:

<table>
 <tr>
  <td>Samsung</td><td>12250</td>
 </tr>
 <tr>
  <td>Hitachi</td><td>11900</td>
 </tr>
 <tr>
  <td>Seagate</td><td>16450</td>
 </tr>
</table>

A táblázat alapértelmezetten nem tartalmaz keretet. Keretet a „border” tulajdonsággal határozhatjuk meg. A „border” értéke egy szám ami meghatározza a keret vastagságát. A fenti példa kerettel:

<table border=3>
 <tr>
  <td>Samsung</td><td>12250</td>
 </tr>
 <tr>
  <td>Hitachi</td><td>11900</td>
 </tr>
 <tr>
  <td>Seagate</td><td>16450</td>
 </tr>
</table>

A táblázat oszlopainak címsorokat is meghatározhatunk.

<table border=3>
 <tr>
  <th>Gyártó</th><th>Ár</th>
 </tr>
 <tr>
  <td>Samsung</td><td>12250</td>
 </tr>
 <tr>
  <td>Hitachi</td><td>11900</td>
 </tr>
 <tr>
  <td>Seagate</td><td>16450</td>
 </tr>
</table>

A táblázat színét beállíthatjuk a „bgcolor” tulajdonsággal. Értékei mindig egy RGB színkód.

<table border=3 bgcolor="#e5e5e5">
 <tr>
  <th>Gyártó</th><th>Ár</th>
 </tr>
 <tr>
  <td>Samsung</td><td>12250</td>
 </tr>
 <tr>
  <td>Hitachi</td><td>11900</td>
 </tr>
 <tr>
  <td>Seagate</td><td>16450</td>
 </tr>
</table>

Az egyes sorok vagy adatcellákra szintén alkalmazható a külön szín. A táblázat fejléc sorának #aaaaaa színre állítása például a következő módon történhet.

<tr bgcolor=”#aaaaaa”>

A fenti táblázat teljes forrása:

<table border=3 bgcolor="#e5e5e5">
 <tr>
  <th bgcolor="#aaaaaa">Gyártó</th><th>Ár</th>
 </tr>
 <tr>
  <td>Samsung</td><td>12250</td>
 </tr>
 <tr>
  <td>Hitachi</td><td>11900</td>
 </tr>
 <tr>
  <td>Seagate</td><td>16450</td>
 </tr>
</table>

A egész táblázat és az egyes sorok mellett egy cella színe önmagában is megadható:

<td bgcolor=”yellow”>

A táblázat címét is meghatározhatjuk a „caption” címke segítségével. A „caption” címkét a „table” címkét követően az első „tr” címke elé tesszük.

<table border=”1” bgcolor=”#e5e5e5”>
  <caption>Merevlemez</a>
   <tr bgcolor=”#aaaaaa”><th>Gyártó</th><th>Ár</th> </tr>
   <tr><td>Samsung</td><td>12250</td></tr>
  <tr><td>Hitachi</td><td>12250</td></tr>
  <tr><td>Seagate</td><td>12250</td</tr>)
</table>

A táblázat tartalmának igazítása megadható a „tr”, a „th” és a „td” címkék „align” tulajdonságával. Értékük a szokásos: „left”, „center” és „right” lehet.
A táblázat sorai és oszlopai összevonhatók. Tegyük fel, hogy a fenti merevlemez példában a „Merevlemez” szót szeretnénk a táblázat részeként megadni, a „Gyártó” és az „Ár” feliratok felett. Ehhez a első sor oszlopait össze kell vonnunk. Oszlopok összevonása a „td” címke „colspan” tulajdonságával lehet. Értéke egy szám, amely megmondja, hogy hány oszlopot akarunk összevonni.

<table>
 <tr><td colspan="2">Merevlemez</td></tr>
 <tr><td>Samsung</td><td>12250</td></tr>
 <tr><td>Hitachi</td><td>11900</td></tr>
 <tr><td>Seagate</td><td>16450</td></tr>
</table>

Összevonhatók a sorok is. A „td” címke „rowspan” tulajdonságával adhatjuk meg hány sort vonjunk össze. Tegyük fel, hogy a Segate merevlemeznek két árat szeretnénk megadni.

<table border=”1” bgcolor=”#e5e5e5” align="center">
<caption>Merevlemez</caption>
<tr bgcolor=”#aaaaaa”><th>Gyártó</th><th>Ár</th></tr>
<tr><td>Samsung</td><td>12250</td></tr>
<tr><td>Hitachi</td><td>12250</td></tr>
<tr><td rowspan=2>Seagate</td><td>13250</td></tr>
<tr><td>13900</td></tr>
</table>

A „table” címke „width” tulajdonságával beállíthatjuk egy táblázat szélességét pixelben megadva. Ha a megadott szélességben a tartalom nem fér el a böngésző nagyobb szélességet enged a táblázatnak. Éppen akkorát amelyben elfér a tartalom. A táblázat szélességét megadhatjuk százalékos formában is. Ilyenkor a táblázat mérete mindig az böngésző ablak méretéhez képest lesz kiszámítva. Ha a táblázatot középre igazítjuk, a szélességét pedig 80%-ra akkor a táblázat mindkét oldalán 10%, 10% marad. Ezzel a módszerrel 10%-os margót hozhatunk létre jobb és bal oldalon. Ezt a 10%-os margót a következő módon állíthatjuk be:

<table width=”80%” align=”center”>