HTML un CSS iesācējiem (daļa 07): Tabulas (01)

Tabulas ir diezgan sarežģītas struktūras, kas sastāv no rindām un kolonnām. Tabulu ārējo pamatu vienmēr veido table-elements.

<table>
…
</table>

Šajā elementā norisinās pati tabulas definīcija. Starp citu, ieteicams HTML tabulai piešķirt rāmi laikā, kad to izveidojat. Tādējādi jūs labāk varēsit saprast, kā tieši iet kopā rindas un kolonnas. Lai to paveiktu, ievietojiet sākuma <table> atslēgas-vērtības pārus border="1". (Ņemiet vērā, ka HTML nav jāizmanto border atribūts. Šajā gadījumā jāizmanto atbilstošās CSS īpašības. Par to vēl vairāk vēlāk).

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

Tālāk seko tabulu rindu definēšana. To var izdarīt, izmantojot tr elementu.

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

Tomēr tas vēl neproducē vēlamo rezultātu. Nākamais solis ir faktiski kolonnu definīcija. To var izdarīt, atkal izmantojot td elementu.

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

Tagad jūs varat definēt pirmo tabulas saturu. To var izdarīt starp <td> un </td>.

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

Tikai tagad ir vērts apskatīt rezultātu pārlūkā.

td elementu. Pārliecinieties, ka to definējat iekš tr elementa.

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

Šeit atkal iespējams aplūkot rezultātu.

Lai pievienotu papildu rindas tabulā, vienkārši izveidojiet vēl vienu tr elementu, kurā atkārtoti definējiet vēlamos td elementus.

Arī šim mērķim ir piemērs:

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

Pārlūkot rezultātu pārlūkā sniegs šādu rezultātu:





Tādējādi jūs varat izveidot arī apjomīgas tabulas.

Galvas, ķermeņa un apakša definēšana

Tabulas var iedalīt loģiskos apgabalos. Šie apgabali ietver galvu, vienu vai vairākus datu apgabalus un apakšapgabalu. Nākamais piemērs parāda, kā tas var izskatīties:

<table border="1">
  <thead>
    <tr>
      <th>Izbraukšana</th>
      <th>Ierašanās</th>
      <th>Perons</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Berlīne</td>
      <td>Stralsunda</td>
      <td>5</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Berlīne</td>
      <td>Hamburga</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Minhene</td>
      <td>Berlīne</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

Šeit ir skats uz rezultātu pārlūkā:





Šādu sadalījumu redzamiem apgabaliem nav redzams. Protams, rodas jautājums: Kāpēc tad jāpieņem sīva darīšanās un definēt šos apgabalus? Tam ir divi labi iemesli:

• Pēc vēlēšanās ar CSS var atšķirt apgabalus.

• Pārlūki, drukājot garas tabulas, var atkārtot tabulas galvu un apakšu katrā lapā.

Tabulas galvu ievada ar thead. Pēc tam seko tabulas rindiņas, kas pieder galva apgabalam. Neaizmirstiet aizvērt galvas apgabalu </thead>.

Lai tabulai pievienotu apakšu, tas stingri jādefinē pirms tabulas ķermeņa. Apakšu ievada ar <tfoot>. Tad var sekojam viena vai vairākas rindiņas, kas pieder apakša apgabalam. Ar </tfoot> apakšu var aizvērt.

Īsto tabulas ķermeni definē iekš tbody elementa. Šī tbody var būt vairākas reizes. Katru tabulas ķermeni aizver ar </tbody>.

Kāpēc piemēram tabulā varētu izmantot vairākus tbody elementus? Laba piemēra varētu būt Vācijas futbola Bundesliga tabula. Tādā tabulā parasti ir vairāki apgabali.

• Čempioni

• Čempionu līgas dalībnieki

• Čempionu līgas kvalifikanti

• Eiropas līgas dalībnieki

• Pelēkais vidus lauks

• Izlecējs

• Izstācējs

Šos apgabalus varat ievietot savās tabulās, izmantojot atsevišķus tbody elementus un pēc tam šos apgabalus stilizēt ar CSS.

Definēt kolonnas iepriekš

Kā tabula tiek attēlota pārlūkprogrammā, galvenokārt ir atkarīgs no rindu un kolonnu skaita. Tomēr tabulas attēlošanas process pārlūkprogrammai nav tik vienkāršs. Patiesībā pārlūkprogrammai vienmēr vispirms ir jāizlasa visa tabula, pirms to var attēlot. Īpaši lielām tabulām tas var prasīt noteiktu laiku. Šo problēmu var novērst, informējot pārlūkprogrammu par to, cik daudzām kolonnām tabulā patiešām ir jābūt.

<table>
   <colgroup span="2"></colgroup>
   <tr>
     <th>ISBN</th>
     <th>Virsraksts</th>
     <th>Cena</th>
   </tr>
   <tr>
     <td>23223423434</td>
     <td>Īss stāsts par gandrīz visu</td>
     <td>29,95 eiro</td>
   </tr>
 </table>

Ar colgroup tiek sākta kolonnu noteikšana. Ņemiet vērā, ka vairums atribūtu, kas bija pieejami agrākās HTML versijās colgroup tagam, HTML5 vairs nav atļauti. Tagad vienīgi atļauts ir span atribūts. Šis atribūts sagaida skaitli, kas atbilst kolonnu skaitam tabulā.

colgroup elements tiek novietots tieši aiz atvēršanas <table> taga. Pašas kolonnas tiek definētas ar atsevišķiem col elementiem.

Izmantojot colgroup, pamatā ir divas iespējas:

• Ar span atribūtu

• Bez span atribūta

Ja netiek izmantots span atribūts, katrai kolonnai, ko vēlaties grupēt, jābūt savam col elementam iekšā colgroup elementā. Ņemiet vērā, ka col ir atsevišķs elements.

<table>
   <colgroup>
   <col />
   <col />
 </colgroup>
   <tr>
     <th>ISBN</th>
     <th>Virsraksts</th>
     <th>Cena</th>
   </tr>
   <tr>
     <td>23223423434</td>
     <td>Īss stāsts par gandrīz visu</td>
     <td>29,95 eiro</td>
   </tr>
 </table>

Eksistē arī jauka starpposma forma.

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

Tas vienmēr noder, ja vienu kolonnu vēlaties iepriekš definēt atsevišķi, bet citas grupēt kopā.