Táblázatok - A <table> tag

A HTML táblázat elemeit (a címet, a sorokat és azok tartalmát, stb.) a <table> és </table> tagok fogják közre. A zárótag használata is kötelező.

A HTML 4-es verziójában a <table> tag sok olyan attribútummal rendelkezett, amelyek a megjelenítést szolgálták. Ezek alkalmazását a CSS szükségtelenné tette, ezért a HTML 5-ben már nem szerepelnek. Ma már a <table> tag legfontosabb attribútumai a class, style, id általános attribútumok.

Leggyakrabban használt stílus tulajdonságok:

• háttér szín (background-color)
• háttér kép (background-image)
• margó (margin)
• keret stílus (border-style)
• keret szélesség (border-width)
• keret szín (border-color)
• keret összevonás (border-collapse): Az egymás melletti cellák keretei összevonásra kerülnek vagy külön megjelenítődnek.
• keret vonalak közötti távolság (border-spacing): Akkor van hatása, ha az egymás melletti cellák keretei külön megjelenítődnek.

Az alábbi példában egy egyszerű 4x4-es táblázat HTML kódját láthatod. Az első cellába azért írtam be az &nbsp; speciális karaktert, mert anélkül hiányozhatna a táblázat bal-felső sarka, ugyanis egy üres adatcellát nem feltétlenül jelenítenek meg a böngészők.

<table>

   <caption>Gyümölcsök szezonjai és árai</caption>

   <tr><th>&nbsp;</th>
      <th>Szüret kezdete</th>
      <th>Szüret vége</th>
      <th>Ár (Ft/kg)</th>
   </tr>

   <tr><th>Meggy</th>
      <td>Június</td>
      <td>Június</td>
      <td>450</td>
   </tr>

   <tr><th>Szilva</th>
      <td>Július</td>
      <td>Augusztus</td>
      <td>300</td>
   </tr>

   <tr><th>Szőlő</th>
      <td>Július</td>
      <td>Október</td>
      <td>370</td>
   </tr>

</table>

Amit a böngésződ az alapbeállításai szerint így szerkeszt meg (ugyanis a kód nem tartalmaz semmilyen megjelenítési információt):

Nem túl látványos, de a következő stílusbeállítások sokat fognak javítani a kinézetén:

table {border-style: solid; border-color: #000000;
   border-width: 3px; margin: auto;
   border-collapse: collapse}

caption {padding: 0px; margin: 5px}

th {border-style: solid; border-color: #000000;
   border-width: 1px; padding: 5px;
   background-color: #eeeeee; text-align: center}

td {border-style: solid; border-color: #000000;
   border-width: 1px; padding: 5px;
   text-align: center}

Aminek hatására már „normálisan” jelenik meg a táblázat:

Táblázat cím. A <caption> tag. »