Táblázatok

A táblázat a <table>, és a </table> utasítások között sorokat <tr> </tr>, és azon belül cellákat <td></td> tartalmaz.

2 sort, és 3 oszlopot tartalmazó tábla:
<table>
<tr>
<td>1. sor, 1. oszlop</td>
<td>1. sor, 2. oszlop</td>
<td>1. sor, 3. oszlop</td>
</tr>
<tr>
<td>2. sor, 1. oszlop</td>
<td>2. sor, 2. oszlop</td>
<td>2. sor, 3. oszlop</td>
</tr>
</table>
1. sor, 1. oszlop 1. sor, 2. oszlop 1. sor, 3. oszlop
2. sor, 1. oszlop 2. sor, 2. oszlop 2. sor, 3. oszlop

Cellák vízszintes összevonásakor az első cellának megadjuk a colspan="2" tulajdonságot, ahol a 2 helyett mindig annyit írunk, ahány cellát akarunk egyesíteni. többi összevonandó cellát nem adjuk meg:

<table>
<tr>
<td colspan="2">1. sor, 1-2. oszlop összevonva (következő cella kihagyva)</td>
<td>1. sor, 3. oszlop</td>
</tr>
<tr>
<td>2. sor, 1. oszlop</td>
<td>2. sor, 2. oszlop</td>
<td>2. sor, 3. oszlop</td>
</tr>
</table>
1. sor, 1-2. oszlop összevonva (következő cella kihagyva) 1. sor, 3. oszlop
2. sor, 1. oszlop 2. sor, 2. oszlop 2. sor, 3. oszlop

Cellák függőleges összevonásakor a felső cellának megadjuk a rowspan="2" tulajdonságot, ahol a 2 helyett mindig annyit írunk, ahány cellát akarunk egyesíteni. többi alatta lévő összevonandó cellát nem adjuk meg:

<table>
<tr>
<td>1. sor, 1. oszlop</td>
<td rowspan="2">összevont 2. oszlop (2. sorban kihagyjuk a 2. oszlopot)</td>
<td>1. sor, 3. oszlop</td>
</tr>
<tr>
<td>2. sor, 1. oszlop</td>
<td>2. sor, 3. oszlop</td>
</tr>
</table>
1. sor, 1. oszlop összevont 2. oszlop (2. sorban kihagyjuk a 2. oszlopot) 1. sor, 3. oszlop
2. sor, 1. oszlop 2. sor, 3. oszlop

Fontos! Az összevonásokat is figyelembe véve soronként egyenlő számú cellának kell lennie!

Táblázatot szokás használni szerkezetek kialakítására is. Ilyenkor érdemes a körvonalat <table border="0"> eltüntetni!

Fontos megjegyezni, hogy a modern ajánlások szerint nem táblázattal, hanem <div> dobozokkal, és stiluslapokkal alakítják ki a szerkezetet, de az érettségin mindkét megoldás elfogadott.

Tipikus elrendezések:

<table border="0">
<tr>
<td colspan="2">fejléc, logó, reklámcsík (banner)</td>
</tr>
<tr>
<td>oldalsáv, menüsor</td>
<td>tartalom</td>
</tr>
</table>
fejléc, logó, reklámcsík (banner)
oldalsáv, menüsor tartalom
<table border="0">
<tr>
<td colspan="3">fejléc, logó, reklámcsík (banner)</td>
</tr>
<tr>
<td>bal oldalsáv, menüsor</td>
<td>tartalom</td>
<td>jobb oldalsáv, reklámcsík</td>
</tr>
</table>
fejléc, logó, reklámcsík (banner)
bal oldalsáv, menüsor tartalom jobb oldalsáv, reklámcsík
<table border="0">
<tr>
<td rowspan="2">bal oldalsáv, menüsor</td>
<td>fejléc, logó, reklámcsík (banner)</td>
</tr>
<tr>
<td>tartalom</td>
</tr>
</table>
bal oldalsáv, menüsor fejléc, logó, reklámcsík (banner)
tartalom