10. fejezet: táblázat
Példa táblázat
Miért alkalmazunk táblázatokat? |
Táblázatok az adatokat egyszerűbben értelmezhetővé teszik, ezért a dokumentum egészére nagy hatással vannak. |
<table border=4>
<tr>
<th>Miért alkalmazunk
táblázatokat?
</th>
</tr>
<tr>
<td>Táblázatok az adatokat
egyszerűbben értelmezhetővé teszik,
ezért a dokumentum egészére nagy
hatással vannak.
</td>
</tr>
</table>
Táblázatok az egyik legnagyobb kihívást jelentő kód HTML-ben. Ez nem nehéz, csak eltart egy ideig, hogy rájöjjön a nyitjára. Táblázatot kezdi a TABLE elem, és általában tartalmazza a border = n attribútumot is. Ha a border = 0, a táblázat határ láthatatlan. Ez akkor hasznos, ha az igazítani kívánjuk szöveget a sorok és oszlopok szerint, de nem akarunk egy határoló szegélyt. A border = 1 egy vékony határ, a border = 2 egy kicsit vastagabb,... és így tovább.
A táblázatnak végződnie kell /table címkével!
A táblázat több elemből is állhat, ezeket celláknak nevezzük.
Példa táblázatok kerete
Ennek a cellának a kerete=0 |
<table border=0>
<tr>
<td>Ennek a táblázatnak a kerete = 0</td>
</tr>
</table>
|
<table border=3>
<tr>
<td>Ennek a kerete = 3</td>
</tr>
</table>
|
Minden sort a táblázatban a nyitó <tr> címke és az opcionális </ tr> záró tag határozza meg. Minden egyes táblázat sorban lévő cellákat, a <td> nyitó és a </ td> záró tag definiálja.
A legtöbb táblázatsor egynél több cellát tartalmaz . A táblázat fejléc címke <th> a szöveget, a cellában félkövérként és középre igazítja. Csak akkor kell használni a cellák címsorát , ha szükséges.
Ez a táblázat több sort és oszlopot tartalmaz és van fejléce
Fejléc A |
Fejléc B |
Fejléc C |
A |
B |
C |
D |
E |
F |
<table border=2>
<tr>
<th>Fejléc A</th><th>Fejléc B</th><th>Fejléc C</th>
</tr>
<tr>
<td> A</td><td> B</td><td> C</td>
</tr>
<tr>
<td> D</td><td> E</td><td> F</td>
</tr>
</tr>
</table>
De mi van, ha szeretné, hogy a táblázat a következőképpen nézzen ki?
fejléc A |
fejléc B |
fejléc C |
A & D
összevonva |
Cell B |
Cell C |
Cell E |
Cell F |
<table border=2>
<tr>
<th>fejléc A</th><th>fejléc B</th><th>fejléc C</th>
</tr>
<tr>
<td rowspan=2>A & D<br>összevonva</td>
<td>Cell B</td>
<td>Cell C</td>
</tr>
<tr>
<td>Cell E</td><td>Cell F</td>
</tr>
</tr>
</table>
Figyeljük meg, hogy ha rowspan = 2 attribútumot használjuk ez lehetővé teszi, hogy a cellát kiterjesszük két sorra. Ha szeretné, hogy egy cella bővüljön több oszlopban, használja colspan = n attribútumot. Ha meg kívánja változtatni a vízszintes a tartalom igazítását egy bizonyoscellában: align = left, align = center, vagy align = right tegyes a nyitó <td> tagba. Ha meg kívánja változtatni a függőleges igazítását a cella tartalmát, használja valign = top, valign = middlie, vagy valign = bottom attribútumokat.
Példa az ALIGN attribútum használatára egy táblázatnál
<table border=1 width=100%>
<tr>
<td align=left>Left</td>
<td align=center>Center</td>
<td align=right>Right</td>
</tr>
</table>
|