Tananyag_HTML_táblázatok

HTML táblázatok

Táblázatok használatával az adatokat átláthatóan, sorokba és oszlopokba rendezve jeleníthetjük meg.

<table> </table>

Cellái két csoportba oszthatóak:
1. Adatcellák: tényleges információkat tartalmaz, az adatokat.

2. Fejléccellák: meghatározzák a táblázat oszlopaiba, soraiba kerülő adatok jellegét.

Cellák összevonása

• Vízszintes összevonás: colspan=" "

• Függőleges összevonás: rowspan=" "

Az " "-be az összevonni kívánt cellák számát kell beírni.
Egy cellára lehet egyszere alkalmazni függőleges és vízszintes összevonást is.

​Tagek (<>)

<table> </table> táblázat
<caption> </caption> táblázat címe
<tr> </tr> táblázat sorai
<th> </th> táblázat oszlopai
<td> </td> adatcellák kialakítása

​Táblázat tartalmi elemei

HTML5 szabvány szerinti sorrend:

I. <thead> </thead> TÁBLÁZAT FEJLÉCE <tbody>;<tfoot>; <tr> tagek előtt; <caption> tag után helyezkedik el!!
II. <tbody> </tbody> TÁBLÁZAT TÖRZSE <caption>; <thead>; <tbody> tagek után helyezkedik el!!
III. <tfoot> </tfoot> TÁBLÁZAT LÁBLÉCE <caption>; <thead>; <tbody> tagek után helyezkedhet el!!

​Formázása (később stíluslappal is)

border táblázat szegélye
border-spacing cellaszegélyek közötti távolság
border-collapse szegélyek összevonása
padding belső margó
caption-side: bottom vagy top táblázatcím elhelyezése, a táblázat alatt, vagy alapértelmezetten középen

<table>

<caption>Nyertesek</caption>

<tr>

<th>Név</th>

</tr>

<tr>

<td>Nagy András</td>

</tr>

</table>