Táblázatot készíteni HTML-ben szerkesztése
Innen: Hogyankell.hu
Figyelem: Nem vagy bejelentkezve. Ha szerkesztesz, az IP-címed nyilvánosan látható lesz a laptörténetben. Ha bejelentkezel vagy regisztrálsz, a szerkesztéseid a felhasználónevedhez lesznek társítva, egyéb hasznos dolgok mellett.
A szerkesztés visszavonható. Kérlek ellenőrizd alább a változásokat, hogy valóban ezt szeretnéd-e tenni, majd kattints a lap mentése gombra a visszavonás véglegesítéséhez.
| Aktuális változat | A te változatod | ||
| 2. sor: | 2. sor: | ||
Az alábbiakban bemutatjuk, hogyan kell HTML5-ben táblázatot készíteni. | Az alábbiakban bemutatjuk, hogyan kell HTML5-ben táblázatot készíteni. | ||
== Lépések == | == Lépések == | ||
| − | # | + | # Az alábbi módon készíthetünk egy egyszerű táblázatot. Az alábbiakat kell figyelembe venni: |
#* A táblázatot a <table> és a </table> tagok közé tesszük. | #* A táblázatot a <table> és a </table> tagok közé tesszük. | ||
#* A táblázat sorait a <tr> és a </tr> tagok közé tesszük. | #* A táblázat sorait a <tr> és a </tr> tagok közé tesszük. | ||
#* A táblázat legkisebb egységét, a cellát a <td> és a </td> tagok közé tesszük. | #* A táblázat legkisebb egységét, a cellát a <td> és a </td> tagok közé tesszük. | ||
#* Ahhoz, hogy lássuk, hogyan is néz ki a táblázat, ezért egy 1 pixeles keretet teszünk rá. Ezt úgy tudjuk elérni, ha a table taghoz az alább látható módon hozzátesszük a border=”1” tagot. [[Fájl:html-tablazat1.jpg]] | #* Ahhoz, hogy lássuk, hogyan is néz ki a táblázat, ezért egy 1 pixeles keretet teszünk rá. Ezt úgy tudjuk elérni, ha a table taghoz az alább látható módon hozzátesszük a border=”1” tagot. [[Fájl:html-tablazat1.jpg]] | ||
| − | # | + | # Ha a táblázatnak fejlécet is szeretnénk, akkor a fejléc celláinál a „td” helyett „th” tagokat használunk. [[Fájl:html-tablazat2.jpg]] |
#* Ha a táblázat első celláit szeretnénk fejlécként használni, akkor azon cellák esetében használjuk a „td” helyett a „th” tagokat. | #* Ha a táblázat első celláit szeretnénk fejlécként használni, akkor azon cellák esetében használjuk a „td” helyett a „th” tagokat. | ||
| − | # | + | # Ha szeretnénk a táblázatnak címet is adni, azt a <caption> és </caption> tagok közé írhatjuk az alábbi módon: [[Fájl:html-tablazat3.jpg]] |
| − | # | + | # Táblázat celláinak összevonása a „colspan” és a „rowspan” tagokkal történik. |
| − | #* Ha egymás melletti cellákat szeretnénk összevonni, akkor használjuk a „colspan” parancsot az alábbi módon. Az idézőjelek közötti számot annak megfelelően adjuk meg, hogy hány cellát szeretnénk összevonni. [[Fájl:html-tablazat4.jpg | + | #* Ha egymás melletti cellákat szeretnénk összevonni, akkor használjuk a „colspan” parancsot az alábbi módon. Az idézőjelek közötti számot annak megfelelően adjuk meg, hogy hány cellát szeretnénk összevonni. [[Fájl:html-tablazat4.jpg]] |
#* Ha egymás alatti cellákat szeretnénk összevonni, akkor használjuk a „rowspan” parancsot az alábbi módon. Az idézőjelek közötti számot annak megfelelően adjuk meg, hogy hány cellát szeretnénk összevonni. [[Fájl:html-tablazat5.jpg]] | #* Ha egymás alatti cellákat szeretnénk összevonni, akkor használjuk a „rowspan” parancsot az alábbi módon. Az idézőjelek közötti számot annak megfelelően adjuk meg, hogy hány cellát szeretnénk összevonni. [[Fájl:html-tablazat5.jpg]] | ||
| − | |||
== Tippek == | == Tippek == | ||
* A „cellpadding” használatával növelhetjük a távolságot a szöveg és a cella szegélye között. [[Fájl:html-tablazat6.jpg]] | * A „cellpadding” használatával növelhetjük a távolságot a szöveg és a cella szegélye között. [[Fájl:html-tablazat6.jpg]] | ||
| 24. sor: | 23. sor: | ||
== Kapcsolódó források, hivatkozások == | == Kapcsolódó források, hivatkozások == | ||
* saját tapasztalat | * saját tapasztalat | ||
| − | |||
| − | |||
