HTML & CSS algajatele (osa 08): Tabelid (02)

Kõigepealt tahan teile näidata, kuidas lahutatud ridadega lahutatud lahtri sees ühendada. See võimaldab teil kasutada ühte veergu mitme veeru ulatuses, saavutades, et üks veerg vastavas reas ulatuks mitme veeru ulatuses.

Näide:

<table border="1">
   <tr>
      <th colspan="2">Kuupäevad</th>
   </tr>
   <tr>
      <td>11.4.2014</td>
      <td>12.4.2012</td>
   </tr>
   <tr>
      <td>13.4.2014</td>
      <td>14.4.2014</td>
   </tr>
   <tr>
      <td>15.4.2014</td>
      <td>16.4.2014</td>
   </tr>
</table>

Enne kõike sõnast th, mida siinkohal kasutatakse. Selle elemendiga märgistatakse päislahtrid. Brauserid kuvavad neid lahtrid tavaliselt paksult ja keskel. Ja siin on tulemus brauseris:

Sissejuhatavas th-s seatakse atribuut colspan. Väärtusena oodatakse veergude arvu, mille ulatuses praegune lahter peaks ulatuma. Olge kindlasti tähelepanelik, et määratud veergude arv oleks õige, vastasel juhul võivad ilmneda ebasoovitavad tulemused. Antud näites peaks thga märgistatud päiselaius ulatuma üle kahe veeru. Ülejäänud kahe rea sees on jälle vastavalt kaks rida.

Veel üks tähelepanek seotuna ridade ühendamisega. Määrake tabelitele arendusfaasis raam (border). Nii näete alati otse, kas ühendamine toimub tõepoolest soovitud viisil.

Lahtrid veerus ühendada reakaupa

Atribuudi rowspan abil saavad mitu lahtrit veerus omavahel ühendada. See konkreetne lahter ulatub seejärel mitme rida ulatuses veerus. Siin on taas näide:

<table border="1">
   <tr>
      <th rowspan="2">Värv</th>
      <td>Sinine</td>
   </tr>
   <tr>
      <td>Roheline</td>
   </tr>
   <tr>
      <th rowspan="2">Suurus</th>
      <td>1,70</td>
   </tr>
   <tr>
      <td>1,80</td>
   </tr>
</table>

Brauseris näeb see välja järgmiselt:





Atribuudile rowspan omistage numbriline väärtus. See määrab lõppkokkuvõttes veergude arvu veerus, mille ulatuses üks lahter peaks ulatuma. Siingi kehtib loomulikult reaalselt esitatud ridade arvu õigsuse jälgimine.

Lahtrite üheaegne reakaupa ja veergude kaupa ühendamine

Mõlemad atribuudid rowspan ja colspan saab ühendada. Nii saab määrata lahtrid, mis ulatuvad korraga üle mitme rea ja veeru. Ka seda saab jälle kõige paremini näidata näite abil.

<table border="1">
   <tr>
      <th colspan="2" rowspan="2">Korter</th>
      <td>5 tuba</td>
   </tr>
   <tr>
      <td>154 ruutmeetrit</td>
   </tr>
   <tr>
      <td>Charlottenburg</td>
      <td>Parkimiskoht</td>
      <td>Põrandaküte</td>
   </tr>
</table>

Pilguheit brauserisse näitab järgmist tulemust:





Mõlemat atribuuti kombineerides tuleb loomulikult olla ettevaatlik, et lõppkokkuvõttes vastaks lahtrite arv tegelikkusele.

Tabelitele pealkirjade lisamine

Väga huvitav võimalus tabelite selgitamiseks pakub caption-element. Selle abil saab tabelile lisada pealkirja või selgitava teksti. Caption sisu kuvatakse alati väljaspool tabelit, kuigi selle määratlus toimub tabelis.

Siin on tüüpiline kasutus caption jaoks:





Ülevalpool tabelit kuvatakse peatükk. Vaikimisi on peatükk keskel ülaosas, kuid seda saab loomulikult CSS-iga täielikult kohandada.

Caption-element määratakse otse tabeli alguses <table> järel.

Siin on toodud täielik süntaks eelnevalt näidatud näitele:

<table border="1">
   <caption>Meediaandmed</caption>
   <colgroup><col /><col /><col /><colgroup> 
   <thead>
      <tr>
         <th>Teema</th>
         <th>Vaated</th>
         <th>Suundumus</th>
      </tr>
   <thead>
   <tfoot> 
      <tr>
         <td colspan="3">Seisuga juuni 2014</td>
      </tr>
   <tfoot> 
   <tbody>
      <tr>
         <td>HTML5</td>
         <td>12,245</td>
         <td>+</td>
      </tr>
      <tr>
         <td>CSS3</td>
         <td>12,123</td>
         <td>+</td>
      </tr>
      <tr>
         <td>JavaScript</td>
         <td>11,546</td>
         <td>+</td>
      </tr>
   </tbody>
</table>

Tabeli kujundamine

Tabelite kujundamiseks olid varasemates HTML-versioonides mitmed atribuudid. Siin on mõned näited asjadest, mis said atribuutide abil reguleerida. (Muidugi toetavad brauserid neid atribuute ka tänapäeval. HTML5-s ei tohiks neid siiski enam kasutada).

• Välimine raam

• Sisemine tabeliraam

• Laius- ja kõrgusmõõdud

• Võrguliinid

• Lahtrisisu joondamine

• Värvid

• Taustapildid

Näete, et kõike saab tõepoolest juhtida vastavate HTML-atribuutide abil. Järgmine näide näitab tabelit, kus neid võimalusi on rohkesti kasutatud:

<table border="1">
   <tr>
      <td width="200" height="100" bgcolor="#999933">Üks</td>
      <td width="200" bgcolor="#00ffff">Kaks</td>
      <td width="200">Kolm</td>
   </tr>
   <tr bgcolor="#ff00ff">
      <td height="100">Neli<</td>
      <td bgcolor="#996666">Viis</td>
      <td bgcolor="#003333">Kuus</td>
   </tr>
 </table>

Vaade tulemusele annab soovitud tulemuse.

Kuigi see võib välja näha nii, nagu peaks, on selle taga olev süntaks kõike muud kui efektiivne. Paremini on juhtida tabeliomadusi CSS-i abil. Tänu uutele CSS-i omadustele saab vanad atribuudid muuta kaasaegseks süntaksiks. Lisaks on võimalik rakendada täiendavaid funktsionaalsusi. Näiteks saab praegu lihtsustada tabeliridade vahelduvat värvimist.

Varasemate HTML-i ja CSS-i aegadel pidi sellise tulemuse saavutamiseks osaliselt tegema tohutuid koodi vigu. Kui keskenduda järjekindlalt võimalustele, mida CSS nüüd pakub, on selline asi väga lihtsalt teostatav.

tr:nth-child(even) {
   background-color: #fd9d5d;
}
 tr:nth-child(odd) {
   background-color: #c0f390;
}
 table {
   border-spacing: 0px;
}

Nagu juba mitu korda mainitud, käsitletakse CSS-i põhjalikumalt selle sarja raames.