HTML & CSS pentru începători (Partea 07): Tabele (01)

Tabelele sunt entități destul de complexe, compuse din rânduri și coloane. Structura de bază a unei tabele este întotdeauna elementul table.

<table>
…
</table>

În cadrul acestui element se face definiția efectivă a tabelei. Se recomandă să se acorde un contur tablei în HTML în timpul implementării. Astfel, se poate înțelege mai bine cum se aliniază rândurile și coloanele. Pentru aceasta, elementul deschizător <table> primește combinația de atribut-valoare border="1". (Luați în considerare faptul că atributul border nu ar trebui utilizat în HTML. În schimb, se recurge la proprietățile CSS corespunzătoare. Despre acest lucru vom vorbi mai târziu).

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

Următorul pas constă în definirea rândurilor tabelei. Aceasta se realizează prin elementul tr.

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

Însă aceasta nu duce încă la afișarea dorită. Următorul pas este să se definească coloanele. Aceasta se face din nou prin elementul td.

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

Acum puteți defini conținutul primei celule a tabelului. Acesta se definește între <td> și </td>.

<table border="1">
   <tr>
      <td>Conținut 1</td>
   </tr>
</table>

Abia acum merită să aruncați o privire asupra rezultatului în browser.

Nu este prea spectaculos momentan, deoarece tabelul constă doar dintr-o singură celulă a tabelei. Puteți adăuga acum o altă coloană. Aceasta se face din nou prin intermediul unui element td. Asigurați-vă că îl definiți în interiorul elementului tr.

<table border="1">
   <tr>
      <td>Conținut 1</td>
      <td>Conținut 2</td>
   </tr>
</table>

Iată cum arată rezultatul:

Pentru a adăuga rânduri suplimentare în tabel, pur și simplu adăugați un alt element tr, în care sunt ulterior definite elementele td dorite.

Iată un exemplu:

<table border="1">
   <tr>
      <td>Conținut 1</td>
      <td>Conținut 2</td>
   </tr>
   <tr>
      <td>Conținut 3</td>
      <td>Conținut 4</td>
   </tr>
</table>

În continuare, verificați rezultatul în browser:





În acest fel, puteți crea și tabele extinse.

Stabiliți antetul, corpul și subsolul

Tabelele pot fi împărțite în secțiuni logice. Acestea includ o secțiune de antet, una sau mai multe secțiuni de date și o secțiune de subsol. Exemplul următor arată cum ar putea arăta acest lucru:

<table border="1">
  <thead>
    <tr>
      <th>Plecare</th>
      <th>Sosire</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>

Și iată rezultatul în browser:





Divizarea în aceste secțiuni nu are un efect vizual evident. Deci, apare o întrebare firească: De ce să ne obosim și să definim aceste secțiuni? Există două motive bune în acest sens:

• Cu ajutorul CSS, secțiunile pot fi formate diferit la cerere.

• Browser-ele pot repeta antetul și subsolul tabelului pe fiecare pagină la tipărire a tabelelor lungi.

Antetul tabelei este inițiat cu thead. Urmează rândurile tabelului care aparțin antetului. Nu uitați să închideți antetul </thead&.

Definire coloane în avans

Cum este afișată tabela de către browsere depinde în primul rând de numărul de rânduri și coloane disponibile. Procesul de afișare a unei tabele nu este deloc simplu pentru browser. De fapt, un browser trebuie întotdeauna să citească întreaga tabelă înainte de a o putea afișa. În special în cazul tabelelor foarte extinse, acest lucru poate dura un anumit timp. Această problemă poate fi evitată prin comunicarea directă către browser despre numărul real de coloane din tabela.

<table>
   <colgroup span="2"></colgroup>
   <tr>
     <th>ISBN</th>
     <th>Titlu</th>
     <th>Preț</th>
   </tr>
   <tr>
     <td>23223423434</td>
     <td>O scurtă istorie a aproape totului</td>
     <td>29,95 euro</td>
   </tr>
 </table>

Prin colgroup se inițiază definiția preliminară a coloanelor. Rețineți că majoritatea atributelor disponibile în versiunile anterioare de HTML pentru colgroup nu mai sunt permise în HTML5. Acum, singurul atribut permis este span. Acesta așteaptă de la span valoarea care reprezintă numărul de coloane din tabela respectivă.

Elementul colgroup este plasat imediat după deschiderea <table>. Coloanele sunt definite apoi prin elementele individuale col.

La utilizarea colgroup există două posibilități principale:

• Cu atributul span

• Fără atributul span

Dacă nu se utilizează atributul span, pentru fiecare coloană care face parte din grupul de coloane care se întinde, va trebui definit un element col separat în cadrul elementului colgroup. Rețineți că elementul col este un element independent.

<table>
   <colgroup>
   <col />
   <col />
 </colgroup>
   <tr>
     <th>ISBN</th>
     <th>Titlu</th>
     <th>Preț</th>
   </tr>
   <tr>
     <td>23223423434</td>
     <td>O scurtă istorie a aproape totului</td>
     <td>29,95 euro</td>
   </tr>
 </table>

Există, de asemenea, o formă hibridă.

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

Aceasta este întotdeauna utilă atunci când o coloană trebuie definită separat, dar celelalte coloane ar trebui grupate împreună.