HTML in CSS za začetnike (del 07): Tabele (01)

Tabele so sestavljajo zaporedja vrstic in stolpcev. Zunanjo strukturo tabel vedno tvori element table.

<table>
…
</table>

V tem elementu se izvede dejanska definicija tabele. Priporočljivo je, da med ustvarjanjem tabele v HTML dodelite njeni okvir. Tako lahko bolje razumete, kako točno potekajo vrstice in stolpci. Za to dodelite začetnemu <table> kombinacijo atribut-vrednost border="1". (Opomba, da atributa border v HTML ne smete uporabljati. Namesto tega se uporabljajo ustrezne lastnosti CSS. O tem pa več kasneje).

<table border="1">
…
</table>

Nadaljujemo z določanjem vrstic v tabeli. To se izvede prek elementa tr.

<table border="1">
   <tr></tr>
</table>

Toda to še ne vodi do želenega rezultata. Naslednji korak je določanje stolpcev. To se ponovno izvede prek elementa td.

<table border="1">
   <tr>
      <td></td>
   </tr>
</table>

Zdaj lahko določite vsebino prve tabele. To se določi med <td> in </td>.

<table border="1">
   <tr>
      <td>Vsebina 1</td>
   </tr>
</table>

Šele zdaj je smiselno pogledati rezultat v brskalniku.

V tem trenutku tabela seveda še ni posebej spektakularna, saj vsebuje trenutno samo eno celico. Lahko dodate še en stolpec. To se izvede ponovno prek elementa td. Pazite, da to določite znotraj elementa tr.

<table border="1">
   <tr>
      <td>Vsebina 1</td>
      <td>Vsebina 2</td>
   </tr>
</table>

Tudi tukaj si oglejte rezultat.

Za dodajanje dodatnih vrstic v tabelo preprosto dodate še en element tr, v katerem nato določite želene elemente td.

Tudi za to imamo spet primer:

<table border="1">
   <tr>
      <td>Vsebina 1</td>
      <td>Vsebina 2</td>
   </tr>
   <tr>
      <td>Vsebina 3</td>
      <td>Vsebina 4</td>
   </tr>
</table>

Ogled rezultata v brskalniku prinese naslednji rezultat:





Na ta način lahko ustvarite tudi obsežne tabele.

Opredelitev glave, telesa in noge

Tabele se lahko razdelijo na logična področja. To vključuje glavo, enega ali več območij podatkov in območje noge. Spodnji primer prikazuje, kako bi lahko kaj takega izgledalo:

<table border="1">
  <thead>
    <tr>
      <th>Odhod</th>
      <th>Prihod</th>
      <th>Peron</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Berlin</td>
      <td>Stralsund</td>
      <td>5</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Berlin</td>
      <td>Hamburg</td>
      <td>1</td>
    </tr>
    <tr>
      <td>München</td>
      <td>Berlin</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

In tu je pogled na rezultat v brskalniku:





Razdelitev na navedena področja očitno ne prinese vizualnega učinka. Seveda se postavi vprašanje: Zakaj si torej vzeti trud in opredeliti ta področja? Obstajata dva dobrih razloga:

• Z CSS lahko področja po želji oblikujemo drugače.

• Brskalniki lahko med tiskanjem dolgih tabel na vsaki strani ponovijo tabelno glavo in tabelni nogo.

Tabelno glavo uvedete z thead. Sledijo vrstice tabele, ki pripadajo glavnemu območju. Ne pozabite zaključiti glavnega območja z </thead>.

Če naj tabela dobi tabelno nogo, se ta nujno določi pred telesom tabele. Nogo uvedete z <tfoot>. Sledijo mu lahko ena ali več vrstic, ki pripadajo nogo območju. Z </tfoot> zaključite tabelno nogo.

Dejansko telo tabele definirate znotraj elementa tbody. Ta tbody se lahko ponovi večkrat. Zaključek telesa tabele je vedno z </tbody>.

Zakaj bi, na primer, v tabeli uporabili več tbody elementov? Lep primer za to bi bila tabela nemške nogometne lige. V takšni tabeli običajno obstaja več območij.

• Prvak

• Udeleženci Lige prvakov

• Kvalifikanti za Ligo prvakov

• Udeleženci Evropske lige

• Siva sredina

• Relegacijsko mesto

• Izpadnik

Če bi vsako od teh področij postavili v svoj tbody element, jih lahko oblikujete na različne načine s CSS.

Preddefiniranje stolpcev

Kako bo tabela prikazana v brskalnikih, je seveda odvisno predvsem od števila vrstic in stolpcev. Postopek prikaza tabele za brskalnik ni povsem preprost. Dejstvo je, da mora brskalnik vedno najprej prebrati celotno tabelo, preden jo lahko prikaže. Še posebej pri zelo obširnih tabelah lahko to vzame nekaj časa. To težavo lahko obidemo, če brskalniku neposredno sporočimo, iz koliko stolpcev tabela dejansko sestoji.

<table>
   <colgroup span="2"></colgroup>
   <tr>
     <th>ISBN</th>
     <th>Naslov</th>
     <th>Cena</th>
   </tr>
   <tr>
     <td>23223423434</td>
     <td>Kratek zgodovinski pregled vsega</td>
     <td>29,95 evrov</td>
   </tr>
 </table>

Z colgroup se začne predhodna določitev stolpcev. Upoštevajte, da večina atributov za colgroup, ki so bili na voljo v prejšnjih različicah HTML, ni več dovoljena v HTML5. Sedaj je dovoljen le atribut span. Ta atribut zahteva število stolpcev v tabeli.

Element colgroup je neposredno začetek začetnega <table>. Stolpci sami so potem določeni z posameznimi elementi col.

Pri uporabi colgroup obstajata načeloma dve možnosti:

• Z atributom span

• Brez atributa span

Če ni uporabljen atribut span, je treba znotraj elementa colgroup za vsak stolpec, ki ga skupina stolpcev zajema, določiti posamezen element col. Upoštevajte, da je col samostojen element.

<table>
   <colgroup>
   <col />
   <col />
 </colgroup>
   <tr>
     <th>ISBN</th>
     <th>Naslov</th>
     <th>Cena</th>
   </tr>
   <tr>
     <td>23223423434</td>
     <td>Kratek zgodovinski pregled vsega</td>
     <td>29,95 evrov</td>
   </tr>
 </table>

Obstoja tudi mešana oblika.

<table>
 <colgroup>
 <col>
 </colgroup>
 <colgroup span="2"></colgroup>
 …

To je vedno uporabno, kadar je treba ločeno predhodno določiti en stolpec, druge pa združiti v skupino.