HTML jegyzet

Táblázatok
HTML elem neve: TABLE, TR, TH, TD, CAPTION

 táblázat, páros címke: <table>...</table>

 sor, páros címke: <tr>...</tr> table row
 fejléc, páros címke: <th>...</th> table header
 cella páros címke: <td>...</td> table data
 táblázat felirata: <caption>...</caption>
o közvetlen a table nyitó tag után kell írni

Példa egy táblázat szerkezetére

Kód:
<table>
<tr>
<th>1. oszlop fejléce</th>
<th>2. oszlop fejléce</th>
</tr>
<tr>
<td>2.sor 1.cella</td>
<td>2.sor 2.cella</td>
</tr>
<tr>
<td>3.sor 1.cella</td>
<td>3.sor 2.cella</td>
</tr>
</table>

Példa vízszintes cellaegyesítésre:

Kód:
<table>
<tr>
<th colspan="2">1. oszlop fejléce</th>
<th>2. oszlop fejléce</th>
</tr>
<tr>
<td>2.sor 1.cella</td>
<td>2.sor 2.cella</td>
</tr>
<tr>
<td>3.sor 1.cella</td>
<td>3.sor 2.cella</td>
</tr>
</table>

1 Oláh Katalin
HTML jegyzet

Példa függőleges cellaegyesítésre:

Kód:
<table>
<tr>
<th colspan="2">1. oszlop fejléce</th>
</tr>
<tr>
<td rowspan="2">2.sor 1.cella</td>
<td>2.sor 2.cella</td>
</tr>
<tr>
<td>3.sor 1.cella</td>
<td>3.sor 2.cella</td>
</tr>
</table>

Táblázat bővülése HTML5-ben

HTML elem neve: THEAD, TBODY, TFOOT

 táblázat fejrésze, pároscímke: <thead>...</thead>

o Csoportba foglalja azokat a cellákat, amelyeket a fejlécnek szánunk, pl. az
előző példában az első sort.
o Ez az elem a <table> tag gyereke lehet, és a <caption> elem után, de a
<tbody>, <tfoot>, <tr> elemek előtt állhat. A <thead> elem <tr> elemeket
tartalmazhat, vagy üres is lehet.
 táblázat törzse, páros címke: <tbody>...</tbody>
o Azokat a sorokat foglalja magában, amit közvetlen a tábla tartalmának
szánunk.
o Ez az elem a <table> tag gyereke lehet, és a <caption>, <thead> elemek
mögött állhat, de csak akkor, ha a <table> elemnek nincs <tr> gyereke. A
<tbody> elem <tr> elemeket tartalmazhat, vagy üres is lehet.
 táblázat lábrésze, páros címke: <tfoot>...</tfoot>
o Csoportba foglalja azokat a cellákat, amelyeket a láblécnek szánunk, ilyen
például egy összegző sor.
o Ez az elem a <table> tag gyereke lehet, és a <caption, <thead> elemek után, de
a <tbody>, <tr> elemek előtt állhat. A <tfoot> elem <tr> elemeket
tartalmazhat, vagy üres is lehet.

2 Oláh Katalin
HTML jegyzet

Példa egy táblázat szerkezetére HTML5 szabványnak megfelelően

<table>
<thead>
<tr>
<th>1. oszlop fejléce</th>
<th>2. oszlop fejléce</th>
</tr>
</thead>
<tfoot>
<tr>
<td>1. oszlop lábléce</td>
<td>2. oszlop lábléce</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>2.sor 1.cella</td>
<td>2.sor 2.cella</td>
</tr>
<tr>
<td>3.sor 1.cella</td>
<td>3.sor 2.cella</td>
</tr>
</tbody>
</table>

3 Oláh Katalin