HTML Táblázatok forrásának megtekintése

==HTML Táblázatok==
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">
<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>
</syntaxhighlight>Megjelenés a böngészőben
<html>
<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>
</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">
<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>
</syntaxhighlight>Megjelenés a böngészőben:
<html>
<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>
</html>

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