„Táblázatot készíteni HTML-ben” változatai közötti eltérés

Innen: Hogyankell.hu

(Új oldal, tartalma: „== Hogyan kell táblázatot készíteni HTML-ben? == Az alábbiakban bemutatjuk, hogyan kell HTML5-ben táblázatot készíteni. == Lépések == # Az alábbi módon kész…”)
 
(Lépések)
 
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:
+
# '''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á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]]
+
# '''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.  
+
# '''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|580px]]
 
#* 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]]

A lap jelenlegi, 2013. július 23., 12:54-kori változata

[szerkesztés] Hogyan kell táblázatot készíteni HTML-ben?

Az alábbiakban bemutatjuk, hogyan kell HTML5-ben táblázatot készíteni.

[szerkesztés] Lépések

  1. 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 és a
      tagok közé tesszük.
    • A táblázat sorait a és a tagok közé tesszük.
    • A táblázat legkisebb egységét, a cellát a és a 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. Html-tablazat1.jpg
  2. Ha a táblázatnak fejlécet is szeretnénk, akkor a fejléc celláinál a „td” helyett „th” tagokat használunk. 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.
  3. Ha szeretnénk a táblázatnak címet is adni, azt a és tagok közé írhatjuk az alábbi módon: Html-tablazat3.jpg
  4. 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. 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. Html-tablazat5.jpg

[szerkesztés] Tippek

  • A „cellpadding” használatával növelhetjük a távolságot a szöveg és a cella szegélye között. Html-tablazat6.jpg
  • A „cellspacing” használatával növelhetjük a távolságot a cellák között. Html-tablazat7.jpg

[szerkesztés] Amire szükséged lehet

  • kis gyakorlás
  • Notepad ++ vagy egyszerű Jegyzettömb használata

[szerkesztés] Figyelmeztetések

  • A táblázat minden sorában azonos számú cellának kell lennie – legfeljebb vonjuk össze, ha arra van szükség.

[szerkesztés] Kapcsolódó források, hivatkozások

  • saját tapasztalat

Az oldal szerzői

Kiscsillag