HTML in CSS za začetnike (del 08): Tabele (02)

Najprej vam želim pokazati, kako lahko celice v vrstici med seboj povežemo stolpcu po stolpcu. S tem dosežete, da se stolpec znotraj dane vrstice raztegne preko več stolpcev.

Primer:

<table border="1">
   <tr>
      <th colspan="2">Datumi</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>

Pred tem nekaj besed o tukaj uporabljenem th-elementu. S tem elementom označite glavne celice. Brskalniki običajno te celice prikažejo v krepkem tisku in na sredini. In tukaj je rezultat v brskalniku:

V zavit th je nastavljeno atribut colspan. Kot vrednost pričakujte število stolpcev, preko katerih naj se trenutna celica razteza. V vsakem primeru bodite pozorni, da se navedeno število stolpcev ujema, saj lahko sicer pride do grdega rezultata. V danem primeru naj bi se glavična vrstica, označena z th, raztegnila preko dveh stolpcev. Znotraj preostalih dveh vrstic sta nato spet v vsaki po dve vrstici.

Ena opomba v zvezi z združevanjem vrstic: Tablicam med razvojem vedno dodelite okvir (border). Tako boste takoj videli, ali se združevanje dejansko izvede kot želeno.

Celice v stolpcu združevati vrstično

Z atributom rowspan lahko več celic v enem stolpcu združite med seboj. Določena celica se bo nato znotraj stolpca raztezala preko več vrstic. Tudi za to znova primer:

<table border="1">
   <tr>
      <th rowspan="2">Barva</th>
      <td>Modra</td>
   </tr>
   <tr>
      <td>Zelena</td>
   </tr>
   <tr>
      <th rowspan="2">Velikost</th>
      <td>1,70</td>
   </tr>
   <tr>
      <td>1,80</td>
   </tr>
</table>

V brskalniku to izgleda tako:





Atributu rowspan dodelite numerično vrednost. Ta na koncu določa število vrstic znotraj enega stolpca, preko katerih naj se celica razteza. Tudi tukaj velja seveda, da se navedeno število vrstic res ujema.

Celice hkrati združiti vrstično in stolpčno

Oba atributa rowspan in colspan se lahko tudi medsebojno kombinirata. Tako lahko določite celice, ki se hkrati raztezajo preko več vrstic in stolpcev. Tudi to se najbolje pokaže s primerom.

<table border="1">
   <tr>
      <th colspan="2" rowspan="2">Stanovanje</th>
      <td>5 sob</td>
   </tr>
   <tr>
      <td>154 m2</td>
   </tr>
   <tr>
      <td>Charlottenburg</td>
      <td>Parkirno mesto</td>
      <td>Talno ogrevanje</td>
   </tr>
</table>

Pogled v brskalnik prinese naslednje rezultate:





Pri kombinaciji obeh atributov je seveda potrebna previdnost, da se na koncu res ujema število celic.

Označevanje tabel

Zelo zanimiva možnost, kako narediti tabele bolj razumljive, ponuja element caption. Prek njega lahko dodate naslov ali legendo k tabeli. Vsebina caption se prikaže izven tabele, čeprav se njeno določanje zgodi znotraj tabele.

Tukaj je tipična uporaba za caption:





Nad tabelo se prikaže naslov tabele. Privzeto je naslov videti na sredini nad tabelo. To seveda lahko nato individualno prilagodite s pomočjo CSS.

Element caption se določi neposredno za uvodnim <table>.

Tukaj je popolna sintaksa prej prikazanega primera:

<table border="1">
   <caption>Podatki o medijih</caption>
   <colgroup><col /><col /><col /><colgroup> 
   <thead>
      <tr>
         <th>Tema</th>
         <th>Ogledi</th>
         <th>Trend</th>
      </tr>
   <thead>
   <tfoot> 
      <tr>
         <td colspan="3">Podatki junij 2014</td>
      </tr>
   <tfoot> 
   <tbody>
      <tr>
         <td>HTML5</td>
         <td>12.245</td>
         <td>+</td>
      </tr>
      <tr>
         <td>CSS3</td>
         <td>12123</td>
         <td>+</td>
      </tr>
      <tr>
         <td>JavaScript</td>
         <td>11.546</td>
         <td>+</td>
      </tr>
   </tbody>
</table>

Oblikovanje tabel

Za oblikovanje tabel je v prejšnjih različicah HTML obstajalo veliko atributov. Tukaj je nekaj primerov stvari, ki so jih bilo mogoče urejati s pomočjo atributov. (Seveda brskalniki še vedno podpirajo te atribute. Vendar jih v HTML5 ne bi smeli več uporabljati).

• Zunanji okvir

• Notranji okvirji tabel

• Širine in višine

• Mrežnice

• Poravnava vsebine celic

• Barve

• Ozadja

Opazite, da se res vse da urejati preko ustrezni HTML atributov. Spodnji primer prikazuje tabelo, kjer so te možnosti obsežno izkoriščene:

<table border="1">
   <tr>
      <td width="200" height="100" bgcolor="#999933">Ena</td>
      <td width="200" bgcolor="#00ffff">Dva</td>
      <td width="200">Tri</td>
   </tr>
   <tr bgcolor="#ff00ff">
      <td height="100">Štiri<</td>
      <td bgcolor="#996666">Pet</td>
      <td bgcolor="#003333">Šest</td>
   </tr>
 </table>

Pogled na rezultat prinese želeni izgled.

Ampak tudi če to izgleda tako, kot bi moralo izgledati, je sintaksa za to zelo neučinkovita. Bolje je, če se lastnosti tabel nadzoruje s CSS-jem. Zahvaljujoč novim lastnostim CSS-ja, se lahko ne samo stare atribute zamenja z moderno sintakso, temveč so mogoče tudi dodatne funkcionalnosti. Na primer, sezname tabel je zdaj zelo enostavno obarvati na izmenično barvo.

V prejšnjih HTML in CSS časih je bilo treba narediti množico kodnih trikov za takšen rezultat. Če se zdaj dosledno zanašamo na možnosti, ki jih ponuja CSS, je nekaj takega zelo enostavno izvedljivo.

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

Kot sem že večkrat omenil, se bom podrobneje osredotočil na CSS v okviru te serije.