Kodulehe loomine, 8. kord

Tabel

Mõnikord on vaja andmeid esitada tabelina. Selleks tuleb kasutada märgendit <table> ja </table>.

Tabeli rea jaoks tuleb kasutada märgendeid <tr> ja </tr>

Tabeli päise üksiku kasti jaoks märgendeid <th> ja </th>

Tabeli sisu üksiku kasti jaoks märgendeid <td> ja </td>

Tabeli, millel on päise rida ja kaks rida sisuandmeid, näidiskood on seesugune:

<table>
  <tr>
    <th>Riik</th>
    <th>Pealinn</th> 
    <th>Elanike arv</th>
  </tr>
  <tr>
    <td>Eesti</td>
    <td>Tallinn</td> 
    <td>1,331 miljonit</td>
  </tr>
  <tr>
    <td>Läti</td>
    <td>Riia</td> 
    <td>1,902 miljonit</td>
  </tr>
</table>

Antud koodi tulemusena tekib selline tabel:

Mõnikord on aga tabelis vaja lahtreid ühendada, selleks on vastavalt vajadusele võimalik kasutada omadusi colspan või rowspan

Nt on näitetabelis kasutatud mõlemat variant – päises on ühendatud kaks lahtrit, kasutades omadust colspan=”2″ ja sisuosas kaht üksteise all olevat lahtrit, kasutades omadust rowspan=”2″. NB! Neid omadusi kasutades tuleb arvestada sellega, et kui lahtreid liidetakse, siis vastavast reast või veerust kaob määratud arv lahtreid ära! A

<table>
  <tr>
    <th colspan="2">Nimi</th>
    <th>Vanus</th>
  </tr>
  <tr>
    <td>Jaan</td>
    <td>Tamm</td>
    <td rowspan="2">50</td>
  </tr>
  <tr>
    <td>Jüri</td>
    <td>Kask</td>
  </tr>
</table>

Eelnev tabel näeb siis välja seesugune:

Tabeli stiili kohandamine käib sarnaselt teistele elementidele, nt kui lisada kastidele veidi ruumi sisu ja joone vahele ja muuta taustavärvi:

th, td
{
 padding: 10px;
 background-color: chartreuse;
}

Sellise kujunduse tulemusena näeb tabel välja selline: