Táblázatok:
- Mikor használjuk? - A modern HTML weboldalakon (a szabványok miatt) a táblázatokat NEM használhatjuk dizájnelemként (pl.: nem oszthatunk fel egy weboldalt táblázatok segítségével). ehhez az úgynevezett box-elvet, vagy doboz-elvet fogjuk alkalmazni. Csak akkor használhatunk táblázatokat, ha az a weboldal tartalmához szükséges.
SZINTAXIS:
<table border="1">
<tr>
<td>1. sor, 1. cella</td>
<td>1. sor, 2. cella</td>
</tr>
<tr>
<td>2. sor, 1. cella</td>
<td>2. sor, 2. cella</td>
</tr>
</table>
<tr>
<td>1. sor, 1. cella</td>
<td>1. sor, 2. cella</td>
</tr>
<tr>
<td>2. sor, 1. cella</td>
<td>2. sor, 2. cella</td>
</tr>
</table>
PÉLDA:
<html>
<body>
<table border="1">
<tr>
<td>Ez a táblázat első sorának első oszlopa</td>
<td>Ez a táblázat első sorának második oszlopa</td>
</tr>
<tr>
<td>Ez a táblázat második sorának első oszlopa</td>
<td>Ez a táblázat második sorának második oszlopa</td>
</tr>
</table>
</body>
</html>
EZT KELL LÁTNOD:
ELEMZÉS:
<tr> - tag. Egy új sort definiál.
<td> - tag. Egy soron belül egy új oszlopot definiál
Tehát:
Először definiálok egy táblázatot a <table> tag-gel. Majd megadok egy <tr> tag-et. Ekkor keletkezik egy új sorom. Ezután megadok egy <td> tag-et. Ekkor lesz egy új oszlopom. Beírom a </td> zárótag-et. Majd addig ismétlem az előző mondatot ( megadok egy <td> tag-et. Ekkor lesz egy új oszlopom. Beírom a </td> zárótag-et), amíg annyi oszlopunk nem lesz abban az sorban, ahányat szeretnénk. Ezt követően megadjuk a </tr> zárótag-et. Majd addig ismételem az eddig elhangzottakat (megadok egy <tr> tag-et. Ekkor keletkezik egy új sorom. Ezután megadok egy <td> tag-et. Ekkor lesz egy új oszlopom. Beírom a </td> zárótag-et. Majd addig ismétlem az előző mondatot, amíg annyi oszlopunk nem lesz abban az sorban, ahányat szeretnénk), amíg a táblázatunk olyan nem lesz, amilyet mi szeretnénk. Végül lezárom a táblázatot a </table> zárótag-gel.
Nem világos? Próbáld ki :)
Folytatom az ELEMZÉST:
border - attribútum. Értéke a táblázat keretének a mérete. Hogyha a <table> tag-hoz nem írunk border attribútumot (pl.: <table>), akkor a táblázatnak nem lesz kerete.
Címek a táblázatban:
<html>
<body>
<table border="1">
<tr>
<th>Cím 1</th>
<th>Cím 2</th>
</tr>
<tr>
<th>Cím 1</th>
<th>Cím 2</th>
</tr>
<tr>
<td>sor 1, cella 1</td>
<td>sor 1, cella 1</td>
<td>sor 1, cella 2</td>
</tr>
<tr>
<td>sor 2, cella 1</td>
<td>sor 2, cella 2</td>
</tr>
</table>
</tr>
<tr>
<td>sor 2, cella 1</td>
<td>sor 2, cella 2</td>
</tr>
</table>
</body>
</html>
EZT KELL LÁTNOD:
ELEMZÉS:
Ha a táblázatunkba szeretnénk címeket beilleszteni (a fent látható minta alapján), akkor a <th> tag-et használjuk. Ha a táblázat első sorának nyitó <tr> és záró </tr> tag-jei közé tesszük, akkor a nyitó <th> és záró </th> tagek között a szöveg középre igazított és félkövér lesz. Ahány <th></tr> tagpárt írunk be egy <tr></tr> soron belül, annyi oszlopunk lesz.
Ha a címeket függőlegsen akarjuk elhelyezni, akkor a <tr></tr> soron belül az első (vagy más) oszlop <td></td> helyére <th></th> tagpárt írjuk.
Példa:
Ha a táblázatunkba szeretnénk címeket beilleszteni (a fent látható minta alapján), akkor a <th> tag-et használjuk. Ha a táblázat első sorának nyitó <tr> és záró </tr> tag-jei közé tesszük, akkor a nyitó <th> és záró </th> tagek között a szöveg középre igazított és félkövér lesz. Ahány <th></tr> tagpárt írunk be egy <tr></tr> soron belül, annyi oszlopunk lesz.
Ha a címeket függőlegsen akarjuk elhelyezni, akkor a <tr></tr> soron belül az első (vagy más) oszlop <td></td> helyére <th></th> tagpárt írjuk.
Példa:
<html>
<body>
<table border="1">
<tr>
<th>Ez a táblázat első címe</th>
<td>Ez a táblázat első sorának második oszlopa</td>
</tr>
<tr>
<th>Ez a táblázat második címe</th>
<td>Ez a táblázat második sorának második oszlopa</td>
</tr>
</table>
</body>
</html>
EZT KELL LÁTNOD:
IDE TARTOZIK MÉG:
<caption> tag. Segítségével a táblázatnak címet adhatunk.
<table border="1"> <caption>A táblázat címe</caption>
<th rowspan = "2"> cellák összevonására használjuk. Ez esetben 2 SOR lesz összevonva.
<th colsspan = "2"> cellák összevonására használjuk. Ez esetben 2 OSZLOP lesz összevonva.
Nem érted? http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_span <-- nézd meg ezt :D
Ha a <table> tag frame attribútumának
-"border" értéket adunk meg, akkor a táblázatnak egy sima vonal lesz a kerete.
-"box" értéket adunk meg, akkor a táblázatnak egy sima vonal lesz a kerete (mint a border-nél)
-"void" értéket adunk meg, akkor a táblázatnak nem lesz kerete. (mintha nem is adnánk meg semmit)
példa: <table frame="box">
És mivel tegnap nem volt lecke, a mai napon megnézzük még a felsorolásokat is.
Ez egy nagyon egyszerű lecke, hiszen csak 3 tag-et fogunk megnézni (meg pár attribútumot és néhány értéket :D)
Nézzük is a listák fajtáit:
Rendezett: Ilyenkor a felsorolás számozott (vagy a,b,c...), de minden felsorolásjel különböző (kivéve ha nem :D)
Rendezetlen: Minden felsorolásjel ugyan olyan.
TAG-EK:
<ol> rendezett (ordered) lista tagje
<ul> rendezetlen (unordered) lista tagje
<li> lista elemeinek tag-je
PÉLDA (későbbiekben általában nem fogom a html ill. body tag-eket leírni, de ha ki szeretnéd próbálni, akkor a forráskódban SZEREPELNIE KELL):
rendezetlen lista:
<ul>
<li>Első elem</li>
<li>Második elem</li>
</ul>
rendezett lista:
EZT KELL LÁTNOD:
<caption> tag. Segítségével a táblázatnak címet adhatunk.
<table border="1"> <caption>A táblázat címe</caption>
<th rowspan = "2"> cellák összevonására használjuk. Ez esetben 2 SOR lesz összevonva.
<th colsspan = "2"> cellák összevonására használjuk. Ez esetben 2 OSZLOP lesz összevonva.
Nem érted? http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_span <-- nézd meg ezt :D
Ha a <table> tag frame attribútumának
-"border" értéket adunk meg, akkor a táblázatnak egy sima vonal lesz a kerete.
-"box" értéket adunk meg, akkor a táblázatnak egy sima vonal lesz a kerete (mint a border-nél)
-"void" értéket adunk meg, akkor a táblázatnak nem lesz kerete. (mintha nem is adnánk meg semmit)
példa: <table frame="box">
És mivel tegnap nem volt lecke, a mai napon megnézzük még a felsorolásokat is.
Ez egy nagyon egyszerű lecke, hiszen csak 3 tag-et fogunk megnézni (meg pár attribútumot és néhány értéket :D)
Nézzük is a listák fajtáit:
Rendezett: Ilyenkor a felsorolás számozott (vagy a,b,c...), de minden felsorolásjel különböző (kivéve ha nem :D)
Rendezetlen: Minden felsorolásjel ugyan olyan.
TAG-EK:
<ol> rendezett (ordered) lista tagje
<ul> rendezetlen (unordered) lista tagje
<li> lista elemeinek tag-je
PÉLDA (későbbiekben általában nem fogom a html ill. body tag-eket leírni, de ha ki szeretnéd próbálni, akkor a forráskódban SZEREPELNIE KELL):
rendezetlen lista:
<ul>
<li>Első elem</li>
<li>Második elem</li>
</ul>
rendezett lista:
<ol>
<li>Első elem</li>
<li>Második elem</li>
</ol>
EZT KELL LÁTNOD:
Többszintű felsorolás:
Ez is nagyon egyszerű. Az felsoroláson belül egy új felsorolást kezdesz.
Pl.:
<ul>
<li>Első elem</li>
<li>Második elem
<ul>
<li>Másodikon belül az első elem</li>
<li>Másodikon belül a második elem</li>
</ul>
</li>
<li>Harmadik elem</li>
</ul>
Ha még többágúbb felsorolást szeretnénk, akkor értelemszerűen a belső felsoroláson belül is létrehozunk egy felsorolást.
Definíció lista:
Ha egy dolgot akarunk megmagyarázni, akkor arra is van egy felsorolásmódunk.
Hasonlóan a felsorolás <ul> vagy <ol>-jához itt is van egy felsorolást "definiáló" tag-ünk. Ez a <dl>. Eztán a <dt> tag a megmagyarázandó elemnek a nevét, a <dd> tag pedig a magyarázatát adja. A magyarázat egy kicsit behúzva jelenik meg.
Pl.:
<dl>
<dt>Windows</dt>
<dd>Microsoft által fejlesztett OS</dd>
<dt>OSX</dt>
<dd>Apple által fejlesztett OS</dd>
</dl>
EZT KELL LÁTNOD:
IDE TARTOZIK MÉG:
Az <ul>-on és az <ol>-on belül van egy type attribútum. Ezzel a felsorolásjel típusát változtathatjuk meg.
Ha a type attribútum értéke rendezetlen listánál:
- disc, akkor a felsorolásjel egy teli kör
- circle, akkor a felsorolásjel egy üres kör
- square, akkor egy négyzet.
Ha a type attribútum értéke rendezett listánál:
- A, akkor a felsorolásjel az angol a,b,c nagy betűi sorrendben
- a, akkor a felsorolásjel az angol a,b,c kis betűi sorrendben
- I, akkor a felsorolásjel görög számok nagy karakterekkel (I,II,III)
-i, akkor a felsorolásjel görög számok kis karakterekkel (i,ii,iii)
Ennyit akkor mára. A következő leckében megismerkedünk a formokkal. Nem garantálom, hogy holnapra meg lesz a lecke, hiszen egy viszonylag bonyolult, hosszú leckéről van szó. Továbbra is ajánlom a w3-as HTML szerkesztőt és tananyagot is (gyakorlatilag egy darabig mi csak a magyar fordítását és kiegészítését nézzük meg). Létrehoztam egy oldalt az eddig megismert TAG-ekkel, és egy másikat a különböző színek (nekünk fontos) hexadecimális kódjával. Ezeket nem kell megtanulni, de érdemes megnézegetni.
Köszi!
VálaszTörlés