Táblázatok - Táblázat sor. A <tr> tag.

A táblázat egy sorát, amely az adatcellákat tartalmazza, a <tr> és a </tr> (table row) tagok fogják közre. A zárótag elhagyható.

Legfontosabb attribútumai az id, class, style általános attribútumok.

Leggyakrabban használt stílus tulajdonságok:

• háttérszín (background-color)
• keret tulajdonságai (border-style, border-width, border-color) A sorok keret tulajdonságait a régebbi böngészők egy része sajnos nem kezeli megfelelően.

A <tr> tag tulajdonságainak megadásával viszonylag egyszerűen lehet zebracsíkos táblázatot létrehozni. Persze az itt látható példa esetében nincs sok értelme az egymást követő sorokat eltérő színekkel megkülönböztetni, de egy terjedelmesebb táblázat átnézését megkönnyíti egy ilyen kialakítás.

A táblázat HTML kódja:

<table>

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

   <tr class="paratlansor">
      <th>Meggy</th>
      <td>Június</td>
      <td>Június</td>
      <td>440</td>
   </tr>

   <tr class="parossor">
      <th>Szilva</th>
      <td>Július</td>
      <td>Augusztus</td>
      <td>300</td>
   </tr>

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

</table>

És a megjelenítést definiáló stílusok:

tr.fejlec {background-color: #cccccc}
tr.paratlansor {background-color: #eeffff}
tr.parossor {background-color: #ffffee}

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

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

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

Táblázat cellák. A <th>, <td> tagok. »