„HTML Táblázatok” változatai közötti eltérés

Innen: IT documentation
(Új oldal, tartalma: „== HTML Táblázatok == A táblázatokat a HTML-ben a <nowiki><table> tag definiálja. A táblázatok sorokból állnak (<tr></nowiki> tag), a sorok pedig cellákból (…”)
 
 
(4 közbenső módosítás ugyanattól a szerkesztőtől nincs mutatva)
1. sor: 1. sor:
== HTML Táblázatok ==
==HTML Táblázatok==
A táblázatokat a HTML-ben a <nowiki><table> tag definiálja. A táblázatok sorokból állnak (<tr></nowiki> tag), a sorok pedig cellákból (<nowiki><td></nowiki> tag). A cellák tartalmazhatnak bármilyen HTML elemet.
A táblázatokat a HTML-ben a [[HTML table tag|<nowiki><table></nowiki>]] tag definiálja. A táblázatok sorokból állnak ([[HTML tr tag|<nowiki><tr></nowiki>]] tag), a sorok pedig cellákból ([[HTML td tag|<nowiki><td></nowiki>]] tag). A cellák tartalmazhatnak bármilyen HTML elemet.


Szintaktika:<syntaxhighlight lang="html">
== Szintaktika ==
<syntaxhighlight lang="html">
<table border="1">
<table border="1">
     <tr>
     <tr>
13. sor: 14. sor:
     </tr>
     </tr>
</table>
</table>
</syntaxhighlight>Megjelenés a böngészőben:
</syntaxhighlight>Megjelenés a böngészőben
{| class="wikitable"
<html>
|sor 1, celal 1
<table border="1">
|sor 1, cella 2
    <tr>
|-
        <td>sor 1, cella 1</td>
|sor 2, cella 1
        <td>sor 1, cella 2</td>
|sor 2, cella 2
    </tr>
|}
    <tr>
A tábázatok egyéb tulajdonságait további tagek definiálják. A táblázat címe: <nowiki><caption> tag, fejléce: <thead>,<th> tagek, törzse: <tbody> tag és a lábléce: <tfoot> taggal valósítható meg. A <col></nowiki> és a <nowiki><colgroup> tagek az oszlopok egyszerű és egységes formázásában nyújtanának segítséget, de mivel csak az Internet Explorer támogatja őket, ezért nem kerülnek részletezésre. A táblázatok kifinomultabb megjelenését továbbá CSS táblázatokkal kapcsolatos tulajdonságaival lehet megvalósítani.</nowiki>
        <td>sor 2, cella 1</td>
 
        <td>sor 2, cella 2</td>
Van egy olyan nézet, hogy a táblázatokat visszafogottan illik használni, mert a nagy méretű és bonyolult szerkezetű, illetve többszörösen egymásba ágyazott táblázatok jelentősen lellassíthatják a böngészőt. E mellett a forrás kód méretét is növelik, kevésbé áltláthatóvá teszik, ebből kifolyólag a szintaktikai hibáknak is nagyobb az esélyük.
    </tr>
 
</table>
A mai sávszélességek és processzorsebességek mellet ez nem feltétlenül igaz és bonyolultabb forráskódot is inkább valamely szerver oldali szkriptel generálunk manapság, mint "kézzel". Viszont az bizosan igaz, hogy az adatok egyszerű, gyors formázására a táblázatok kitűnően alkalmazhatók. A site dizájn kialakításában is nagy szerepük lehet, bár ma már ilyen célra valóban inkább a stíluslapokat javasolt használni.
</html>


Példa a táblázatok lehetőségeire:<syntaxhighlight lang="html">
== Táblázatok lehetőségei ==
A tábázatok egyéb tulajdonságait további tagek definiálják. A táblázat címe: [[HTML caption tag|<nowiki><caption></nowiki>]] tag, fejléce: [[HTML thead tag|<thead>]],[[HTML th tag|<nowiki><th></nowiki>]] tagek, törzse: [[HTML tbody tag|<tbody>]] tag és a lábléce: [[HTML tfoot tag|<tfoot>]] taggal valósítható meg. A [[HTML col tag|<col>]] és a [[HTML colgroup tag|<colgroup>]] tagek az oszlopok egyszerű és egységes formázásában nyújtanának segítséget. A táblázatok kifinomultabb megjelenését továbbá CSS táblázatokkal kapcsolatos tulajdonságaival lehet megvalósítani.<syntaxhighlight lang="html">
<table border="1" cellpadding="3" cellspacing="1">
<table border="1" cellpadding="3" cellspacing="1">
<caption>Megtakarítások</caption>
<caption>Megtakarítások</caption>
<thead style="color:green;">
<colgroup>
    <col style="background-color:yellow;">
</colgroup>
<thead style="color:green;background-color:yellow;">
     <tr>
     <tr>
         <th>Hónap</th>
         <th>Hónap</th>
54. sor: 59. sor:
</table>
</table>
</syntaxhighlight>Megjelenés a böngészőben:
</syntaxhighlight>Megjelenés a böngészőben:
{| class="wikitable"
<html>
|+Megtakarítások
<table border="1" cellpadding="3" cellspacing="1">
!Hónap
  <caption>Megtakarítások</caption>
!Megtakarítás
  <colgroup>
|-
    <col style="background-color:yellow;">
|Január
  </colgroup>
|€100
  <thead style="color:green;background-color:yellow;">
|-
    <tr>
|Február
      <th>Hónap</th>
|€80
      <th>Megtakarítás</th>
|-
    </tr>
|Összesen
  </thead>
|€180
  <tbody style="color:blue;">
|}
    <tr>
      <td>Január</td>
      <td>€100</td>
    </tr>
    <tr>
      <td>Február</td>
      <td>€80</td>
    </tr>
  </tbody>
  <tfoot style="color:red;">
    <tr>
      <td>Összesen</td>
      <td>€180</td>
    </tr>
  </tfoot>
</table>
</html>


== Táblázattal kapcsolatos tagek ==
==Táblázattal kapcsolatos tagek==
{| class="wikitable"
{| class="wikitable"
!Tag
!Tag
!Leírás
!Leírás
|-
|-
|<nowiki><table></nowiki>
|[[HTML table tag|<nowiki><table></nowiki>]]
|Táblázat definiálása
|Táblázat definiálása
|-
|-
|<nowiki><th></nowiki>
|[[HTML th tag|<nowiki><th></nowiki>]]
|Fejléc cella definiálása
|Fejléc cella definiálása
|-
|-
|<nowiki><td></nowiki>
|[[HTML td tag|<nowiki><td></nowiki>]]
|Cella definiálása
|Cella definiálása
|-
|-
|<nowiki><tr></nowiki>
|[[HTML tr tag|<nowiki><tr></nowiki>]]
|Sor definiálása
|Sor definiálása
|-
|-
|<nowiki><caption></nowiki>
|[[HTML caption tag|<nowiki><caption></nowiki>]]
|Táblázat címének definiálása
|Táblázat címének definiálása
|-
|-
|<thead>
|[[HTML colgroup tag|<colgroup>]]
|Táblázat oszlop attribútumainak definiálása
|-
|[[HTML col tag|<col>]]
|Táblázat oszlop attribútumainak definiálása
|-
|[[HTML thead tag|<thead>]]
|Fejléc definiálása
|Fejléc definiálása
|-
|-
|<tbody>
|[[HTML tbody tag|<tbody>]]
|Törzs definiálása
|Törzs definiálása
|-
|-
|<tfoot>
|[[HTML tfoot tag|<tfoot>]]
|Lábléc definiálása
|Lábléc definiálása
|}
|}
[[Kategória:HTML]]

A lap jelenlegi, 2020. szeptember 19., 04:56-kori változata

HTML Táblázatok

A táblázatokat a HTML-ben a <table> tag definiálja. A táblázatok sorokból állnak (<tr> tag), a sorok pedig cellákból (<td> tag). A cellák tartalmazhatnak bármilyen HTML elemet.

Szintaktika

<table border="1">
    <tr>
        <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>

Megjelenés a böngészőben

sor 1, cella 1 sor 1, cella 2
sor 2, cella 1 sor 2, cella 2

Táblázatok lehetőségei

A tábázatok egyéb tulajdonságait további tagek definiálják. A táblázat címe: <caption> tag, fejléce: <thead>,<th> tagek, törzse: <tbody> tag és a lábléce: <tfoot> taggal valósítható meg. A <col> és a <colgroup> tagek az oszlopok egyszerű és egységes formázásában nyújtanának segítséget. A táblázatok kifinomultabb megjelenését továbbá CSS táblázatokkal kapcsolatos tulajdonságaival lehet megvalósítani.

<table border="1" cellpadding="3" cellspacing="1">
<caption>Megtakarítások</caption>
<colgroup>
    <col style="background-color:yellow;">
</colgroup>
<thead style="color:green;background-color:yellow;">
    <tr>
        <th>Hónap</th>
        <th>Megtakarítás</th>
    </tr>
</thead>
<tbody style="color:blue;">
    <tr>
        <td>Január</td>
        <td>€100</td>
    </tr>
    <tr>
        <td>Február</td>
        <td>€80</td>
    </tr>
</tbody>
<tfoot style="color:red;">
    <tr>
        <td>Összesen</td>
        <td>€180</td>
    </tr>
</tfoot>
</table>

Megjelenés a böngészőben:

Megtakarítások
Hónap Megtakarítás
Január €100
Február €80
Összesen €180

Táblázattal kapcsolatos tagek

Tag Leírás
<table> Táblázat definiálása
<th> Fejléc cella definiálása
<td> Cella definiálása
<tr> Sor definiálása
<caption> Táblázat címének definiálása
<colgroup> Táblázat oszlop attribútumainak definiálása
<col> Táblázat oszlop attribútumainak definiálása
<thead> Fejléc definiálása
<tbody> Törzs definiálása
<tfoot> Lábléc definiálása
A lap eredeti címe: „https://doc.onlinesoft.org/index.php?title=HTML_Táblázatok&oldid=795”