Am văzut în articolul anterior cum se defineşte un tabel HTML simplu. Dacă vrem, să zicem, un tabel cu două linii şi două coloane vom avea în elementul <table> două elemente <tr> (câte unul pentru fiecare linie) şi în fiecare din acestea câte două elemente <td>. Dar dacă vrem să definim un tabel cum sunt cele din imaginea de mai jos?

Exemple de tabele cu celule care ocupă mai multe linii sau mai multe coloane.

În aceste cazuri va trebui să folosim atributele colspan şi rowspan ale elementelor <td>. Vă reamintesc, rowspan defineşte câte linii ocupă o celulă, iar colspan câte coloane. De exemplu celula A a tabelului 1 din imaginea de mai sus este pe prima linie şi ocupă două coloane. Celulele B şi C se află pe a doua linie şi ocupă fiecare câte o coloană (sunt celule de dimensiune normală). În tabelul 2 celula A ocupă două linii şi o coloană şi se consideră că se află pe prima linie împreună cu celula B. Celula C, de dimensiune normală, se află pe a doua linie a tabelului. Pentru a decide câte linii şi câte coloane are de fapt un tabel şi câte dintre ele sunt ocupate de fiecare celulă vom prelungi toate liniile orizontale şi verticale din tabel aşa cum se vede în imaginea de mai jos:

Calculul dimensiunilor pentru celulele tabelelor.

Se văd acum clar dimensiunile pe linii şi coloane ale fiecărei celule. Dacă o celulă ocupă mai multe linii se consideră că se află pe linia cea mai de sus pe care o "atinge". Deci celula A din al doilea tabel o vom defini în primul <tr>. Codul HTML pentru definirea celor două tabele va fi:

Codul HTML pentru tabelele de mai sus şi modul de afişare în Mozilla Firefox 3.5.7.
(click pe imagine pentru a vedea exemplul în browserul tău)

În imaginile de mai jos puteţi vedea etapele de definire ale unui tabel mai complex:

Codul HTML şi modul de afişare al tabelului în Mozilla Firefox 3.5.7.
(click pe imagine pentru a vedea exemplul în browserul tău)

Vă reamintesc că &nbsp; înseamnă "un spaţiu" şi se foloseşte atunci când dorim să definim celule fără conţinut. Observaţi în imaginile de mai sus că dimensiunile unui tabel HTML se adaptează automat la dimensiunile conţinutului din celulele sale (dacă nu se precizează reguli CSS care să le fixeze).

În imaginea de mai jos este prezentat un ultim exemplu care foloseşte în acelaşi tabel majoritatea etichetelor prezentate:

Codul HTML şi modul de afişare al tabelului în Mozilla Firefox 3.5.7.
(click pe imagine pentru a vedea exemplul în browserul tău)

Webliografie

• Capitolul "Tables" din standardul W3C HTML 4.01 : http://www.w3.org/TR/html401/struct/tables.html