Continuam tutorialul despre tabelele in HTML. Dupa ce in lectia anterioara am invatat despre cum se realizeaza un tabel in HTML si elementele unui tabel, acum vom extinde cunostintele cu alte posibilitati de extindere a acestor tabele.
Concatenarea celulelor unei tabele
La fel ca in orice program de calcul tabelar si in HTML pot fi concatenate celulele unui tabel. Cu alte cuvinte, daca avem aceeasi valoare pentru doua sau mai multe celule vecine, celulele pot fi unite pentru o mai usoara intelegere a tabelului.
Spre exemplu, daca vrem ca o celula sa se extinda peste doua celule din dreapta ei ne vom folosi de atributul “colspan” (extindere pe coloane) si vom scrie:
<td colspan="3">Celula extinsa</td>
Daca vrem ca celula sa se extinda peste celulele aflate in aceeasi coloana, ne vom folosi de atributul “rowspan” (extindere pe randuri) dand ca valoare numarul de celule de pe coloana peste care se va extinde celula respectiva.
<td rowspan="2">Celula extinsa</td>
Continuand cu tabelul pe care l-am facut in lectia anterioara, vom avea:
<table border="1">
<caption>Unde au ajuns merele din padure</caption>
<thead>
<tr>
<th scope="col" rowspan="2">Prenume</th>
<th scope="col" rowspan="2">Nume</th>
<th scope="col" rowspan="2">Oras</th>
<th scope="col" rowspan="2">Mere</th>
<th scope="colgroup" colspan="3">S-a intalnit cu</th>
</tr>
<tr>
<th scope="col">Ursul</th>
<th scope="col">Vulpea</th>
<th scope="col">Lupul</th>
</tr>
</thead>
<tbody>
<tr>
<td>Oana</td>
<td>Vasilache</td>
<td>Bucuresti</td>
<td>3</td>
<td colspan="2">da</td>
<td>nu</td>
</tr>
<tr>
<td>Marius</td><td>Coltescu</td>
<td>Cluj</td>
<td>12</td>
<td>nu</td>
<td colspan="2">da</td>
</tr>
<tr>
<td>Ion</td>
<td>Popescu</td>
<td>Buzau</td>
<td>2</td>
<td rowspan="2">da</td>
<td>nu</td>
<td>da</td>
</tr>
<tr>
<td>Lita</td>
<td>Chitalau</td>
<td>Iasi</td>
<td>6</td>
<td>da</td>
<td>nu</td>
</tr>
<tr>
<td>Marghioala</td>
<td>Nastase</td>
<td>Galati</td>
<td>7</td>
<td colspan="3">da</td>
</tr>
</tbody>
</table>
Acest cod va fi afisat astfel:
Atentie:
Fii atent atunci cand folosesti rowspan si colspan, pentru ca celulele peste care s-a extins celula cu aceste atribute nu mai trebuie luate in considerare in realizarea tabelei. Astfel daca un tabel are 7 coloane, iar pe un rand ai o celula extinsa pe coloana (vezi in tabel pe Ion si Lita, care s-au intalnit cu ursul), in randul urmator ar trebui sa definesti doar sase celule pentru ca o celula este deja definita prin rowspan-ul din randul anterior (te-am ametit destul?).
Stilizarea coloanelor de tabel…
Desi aceasta parte din tutorial tine de design si nu de transmiterea de informatii prin html, voi face o mica disgresiune pentru a explica doua elemente specifice tabelelor: <colgroup></colgroup> si <col></col>. Aceste elemente pot fi folosite pentru stilizarea coloanelor dintr-un tabel.
Astfel, daca vom modifica tabelul de sus in felul urmator:
<table border="1">
<caption>Unde au ajuns merele din padure</caption>
<colgroup>
<col style="background-color:#088344;">
<col style="background-color:#3cb878;">
<col style="background-color:#826610;">
<col style="background-color:#826610;">
<col style="background-color:#0054a6;">
<col style="background-color:#f26c4f;">
<col style="background-color:#4b0049;;">
</colgroup>
<thead>
<tr>
<th scope="col" rowspan="2">Prenume</th>
<th scope="col" rowspan="2">Nume</th>
<th scope="col" rowspan="2">Oras</th>
<th scope="col" rowspan="2">Mere</th>
<th scope="colgroup" colspan="3">S-a intalnit cu</th>
</tr>
<tr>
<th scope="col">Ursul</th>
<th scope="col">Vulpea</th>
<th scope="col">Lupul</th>
</tr>
</thead>
<tbody>
<tr>
<td>Oana</td>
<td>Vasilache</td>
<td>Bucuresti</td>
<td>3</td>
<td colspan="2">da</td>
<td>nu</td>
</tr>
<tr>
<td>Marius</td><td>Coltescu</td>
<td>Cluj</td>
<td>12</td>
<td>nu</td>
<td colspan="2">da</td>
</tr>
<tr>
<td>Ion</td>
<td>Popescu</td>
<td>Buzau</td>
<td>2</td>
<td rowspan="2">da</td>
<td>nu</td>
<td>da</td>
</tr>
<tr>
<td>Lita</td>
<td>Chitalau</td>
<td>Iasi</td>
<td>6</td>
<td>da</td>
<td>nu</td>
</tr>
<tr>
<td>Marghioala</td>
<td>Nastase</td>
<td>Galati</td>
<td>7</td>
<td colspan="3">da</td>
</tr>
</tbody>
</table>
Acesta va arata astfel:
Nota: sper sa nu supar pe nimeni pentru faptul ca m-am folosit aici de CSS, dar era important pentru a exemplifica rostul acestor elemente.
Footer-ul unui tabel
Va mai amintiti de capul si corpul tabelelor? Acum sa vorbim si de “picioarele” tabelului. Desi nu am folosit decat foarte rar elementul <tfoot></tfoot>, trebuie sa vorbesc si despre el. Acesta se adauga la coada tabelului, in principiu pentru totaluri de coloane sau chiar pentru a reexplica ce reprezinta fiecare coloana, in cazul in care tabelul este foarte mare.
Asadar, adaugand footer la tabelul nostru perfect:
<table border="1">
<caption>Unde au ajuns merele din padure</caption>
<thead>
<tr>
<th scope="col" rowspan="2">Prenume</th>
<th scope="col" rowspan="2">Nume</th>
<th scope="col" rowspan="2">Oras</th>
<th scope="col" rowspan="2">Mere</th>
<th scope="colgroup" colspan="3">S-a intalnit cu</th>
</tr>
<tr>
<th scope="col">Ursul</th>
<th scope="col">Vulpea</th>
<th scope="col">Lupul</th>
</tr>
</thead>
<tbody>
<tr>
<td>Oana</td>
<td>Vasilache</td>
<td>Bucuresti</td>
<td>3</td>
<td colspan="2">da</td>
<td>nu</td>
</tr>
<tr>
<td>Marius</td><td>Coltescu</td>
<td>Cluj</td>
<td>12</td>
<td>nu</td>
<td colspan="2">da</td>
</tr>
<tr>
<td>Ion</td>
<td>Popescu</td>
<td>Buzau</td>
<td>2</td>
<td rowspan="2">da</td>
<td>nu</td>
<td>da</td>
</tr>
<tr>
<td>Lita</td>
<td>Chitalau</td>
<td>Iasi</td>
<td>6</td>
<td>da</td>
<td>nu</td>
</tr>
<tr>
<td>Marghioala</td>
<td>Nastase</td>
<td>Galati</td>
<td>7</td>
<td colspan="3">da</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total mere:</td>
<td colspan="4">26</td>
</tr>
</tfoot>
</table>
…acesta va arata in felul urmator.
Sper ca nu te-am pierdut prin aceste doua tutoriale. Daca insa se intampla sa nu intelegi ceva, astept sa imi scrii in rubrica de comentarii.
