https://hogyankell.hu/index.php?action=history&feed=atom&title=T%C3%A1bl%C3%A1zatot_k%C3%A9sz%C3%ADteni_HTML-benTáblázatot készíteni HTML-ben - Laptörténet2026-05-05T11:48:28ZAz oldal laptörténete a wikibenMediaWiki 1.31.16https://hogyankell.hu/index.php?title=T%C3%A1bl%C3%A1zatot_k%C3%A9sz%C3%ADteni_HTML-ben&diff=9113&oldid=prevKiscsillag: /* Lépések */2013-07-23T12:54:05Z<p><span dir="auto"><span class="autocomment">Lépések</span></span></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="hu">
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">← Régebbi változat</td>
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">A lap 2013. július 23., 12:54-kori változata</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l2" >2. sor:</td>
<td colspan="2" class="diff-lineno">2. sor:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Az alábbiakban bemutatjuk, hogyan kell HTML5-ben táblázatot készíteni.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Az alábbiakban bemutatjuk, hogyan kell HTML5-ben táblázatot készíteni.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Lépések ==</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Lépések ==</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div># Az alábbi módon készíthetünk egy egyszerű táblázatot. Az alábbiakat kell figyelembe venni:</div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div># <ins class="diffchange diffchange-inline">'''</ins>Az alábbi módon készíthetünk egy egyszerű táblázatot.<ins class="diffchange diffchange-inline">''' </ins>Az alábbiakat kell figyelembe venni:</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#* A táblázatot a <table> és a </table> tagok közé tesszük.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#* A táblázatot a <table> és a </table> tagok közé tesszük.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#* A táblázat sorait a <tr> és a </tr> tagok közé tesszük.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#* A táblázat sorait a <tr> és a </tr> tagok közé tesszük.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#* A táblázat legkisebb egységét, a cellát a <td> és a </td> tagok közé tesszük.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#* A táblázat legkisebb egységét, a cellát a <td> és a </td> tagok közé tesszük.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#* 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]]  </div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#* 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]]  </div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div># 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]]</div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div># <ins class="diffchange diffchange-inline">'''</ins>Ha a táblázatnak fejlécet is szeretnénk, akkor a fejléc celláinál a „td” helyett „th” tagokat használunk.<ins class="diffchange diffchange-inline">''' </ins>[[Fájl:html-tablazat2.jpg]]</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#* 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.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#* 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.</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div># 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]]</div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div># <ins class="diffchange diffchange-inline">'''</ins>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:<ins class="diffchange diffchange-inline">''' </ins>[[Fájl:html-tablazat3.jpg]]</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div># Táblázat celláinak összevonása a „colspan” és a „rowspan” tagokkal történik.  </div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div># <ins class="diffchange diffchange-inline">'''</ins>Táblázat celláinak összevonása a „colspan” és a „rowspan” tagokkal történik.<ins class="diffchange diffchange-inline">''' </ins></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>#* 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]]</div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>#* 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<ins class="diffchange diffchange-inline">|580px</ins>]]</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#* 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]]</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>#* 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]]</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Tippek ==</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Tippek ==</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* 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]]</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* 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]]</div></td></tr>
</table>Kiscsillaghttps://hogyankell.hu/index.php?title=T%C3%A1bl%C3%A1zatot_k%C3%A9sz%C3%ADteni_HTML-ben&diff=9104&oldid=prevKiscsillag: Ú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…”2013-07-23T12:49:44Z<p>Ú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…”</p>
<p><b>Új lap</b></p><div>== Hogyan kell táblázatot készíteni HTML-ben? ==<br />
Az alábbiakban bemutatjuk, hogyan kell HTML5-ben táblázatot készíteni.<br />
== Lépések ==<br />
# Az alábbi módon készíthetünk egy egyszerű táblázatot. Az alábbiakat kell figyelembe venni:<br />
#* A táblázatot a <table> és a </table> tagok közé tesszük.<br />
#* A táblázat sorait a <tr> és a </tr> tagok közé tesszük.<br />
#* A táblázat legkisebb egységét, a cellát a <td> és a </td> tagok közé tesszük.<br />
#* 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]] <br />
# 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]]<br />
#* 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.<br />
# 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]]<br />
# Táblázat celláinak összevonása a „colspan” és a „rowspan” tagokkal történik. <br />
#* 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]]<br />
#* 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]]<br />
== Tippek ==<br />
* 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]]<br />
* A „cellspacing” használatával növelhetjük a távolságot a cellák között. [[Fájl:html-tablazat7.jpg]]<br />
== Amire szükséged lehet ==<br />
* kis gyakorlás<br />
* Notepad ++ vagy egyszerű Jegyzettömb használata<br />
== Figyelmeztetések ==<br />
* A táblázat minden sorában azonos számú cellának kell lennie – legfeljebb vonjuk össze, ha arra van szükség.<br />
== Kapcsolódó források, hivatkozások ==<br />
* saját tapasztalat<br />
<br />
[[Kategória:Internet]]</div>Kiscsillag