Deci credeţi că ştiţi cum să faceţi un tabel! Sigur, stii despre tag-urile table, tr, td şi th, mai ales având şi atributele colspan şi rowspan în buzunar. Puteţi face o mică, chiar dragută placă pentru cafea, dar nu aţi vrea să ştiţi cum să faceţi una dintre cele super bune din lemn masiv, mese de mic dejun din sticlă care pot ţine pe ele creutatea unui elefant?
Da? O bucurie.
Coloanele revin în forţă
Rândurile tabelului fac coloanele tabelului să arate destul de stupid. Ele fac toată treaba, deoarece tabelul este construit rând pe rând, lăsând coloanelor senzaţia că sunt neinteresante.
Din fericire pentru cei dornici de coloane, tag-urile colgroup şi col sunt etichetele lor ce îi salvează.
Aceste tag-urile vă permit să se definească capetele de tabel şi stilul, aşa cum se doreşte, ceea ce este deosebit de util dacă doriţi anumite coloane aliniate sau colorate diferit, fără acest lucru, va trebui să aplicaţi individual stilurile fiecărei celule.
Aici este un exemplu de utilizare a acestor tag-uri:
<table>
<colgroup>
<col/> <col class=”alternate” />
<col/> </colgroup>
<tr> <td>
Acesta </td>
<td> Aceasta </td>
<td> Altele </td>
</tr>
<tr> <td> Pronunţie </td>
<td> Lăcusta </td>
<td> Pranz </td>
</tr>
</table>
Stilurile acestei clasificări “alternative” vor fi aplicate la cea de-a doua coloană sau a doua celulă din fiecare rând.
Puteţi utiliza, de asemenea, atributul span pentru colgroup sau col, în mod similar pentru colspan şi rowspan.
Lucrul cu tag-ul colgroup va defini numărul de rânduri ale coloanelor ce-i aparţin, de exemplu <colgroup span="2"> </ colgroup> ar grupa primele două coloane. Când span este folosit în colgroup, nu trebuie să utilizaţi şi tag-urile col.
Using span in the col tag is more sensible, and could, for example, be applied to the above example like this: Folosirea lui span în tag-ul col este mai sensibil, şi ar putea, de exemplu, să fie aplicată la exemplul de mai sus astfel:
<table> <colgroup> <col /> <col span=”2″ class=”alternate” /> </ colgroup> …
Acest lucru ar aplica “alternativa” pentru ultimele două coloane.
Oh, dar ar trebui să fie şi o scăpare, nu-i asa? Iat-o: stilurile pe care le puteţi aplica la coloane sunt borders , backgrounds , width şi visibility .
Internet Explorer pare să se comporte mult mai bine decât alte browsere, deoarece are la bord cam orice proprietate CSS, cum ar fi color ,dar după cum se dovedeşte, aceasta este doar pentru că acţionează într-un mod mai nebunesc. Pentru o explicaţie detaliată a acestei deosebite anomalii, îl lăsăm să explice pe Hixie.
Sumar şi Legendă
O scurtă şi uşoară accesibilitate este întotdeauna de luat în considerare, aplicând un rezumat şi o legendă a tabelului.
Un rezumat poate fi aplicat la un tabel, folosind atributul summary în deschiderea tag-ului table. Acest lucru nu va fi afişat, dar poate de ajutor într-o non-reprezentare vizuală a unui tabel.
Tag-ul caption defineşte legenda, aplicândul imediat după deschiderea tag-ului table. Acesta va apărea în partea de sus a tabelului, în mod implicit, dar poat fi plasat sus, dreapta, jos sau în stânga cu proprietatea CSS caption-side, deşi Internet Explorer nu va relata nici o modificare făcută în acest mod.
<table summary=”Obiceiurile de împerechere la lăcuste, arată cât de mult utilizează protecţia şi câte ţigări fumează după”> <caption> Obiceiurile de împierechere la lăcuste</ caption> …
Head-eruri, Footer-uri şi cereri pentru scroll
thead, tfoot şi tbody vă permit să separaţi tabelul de antet,subsol şi partea centrală.Acest lucru este deosebit de util pentru tabele mari şi, atunci când tipăriţi, de exemplu, liniile de antet şi subsol ar trebui să apară pe fiecare pagină.
Aceste elemente trebuie să fie definite în ordinea asta thead - tfoot - tbody şi ar arata astfel:
<table>
<thead>
<tr>
<td> Header 1 </td>
<td> Header 2 </td>
<td> Header 3 </td>
</tr>
</thead>
<tfoot>
<tr>
<td> subsol 1 </td>
<td> subsol 2 </td>
<td> subsol 3 </td>
</tr>
</tfoot>
<tbody>
<tr>
<td> Celula 1 </td>
<td> Celula 2 </td>
<td> Celula 3 </td>
</tr>
...
</tbody>
</table>
Puteţi face elementul tbody să fie pentru scroll în Mozilla, prin aplicarea stilului overflow: auto; max-height: [orice] la acesta. Apoi vei vedea antetul şi subsolul ţinute în loc şi un vertical scroll bar la dreapta corpului principal. Ar trebui să foloseşti proprietate max-height, deoarece Internet Explorer nu-l recunoaşte şi astfel este mai sigur decât dacă foloseşti proprietate height, ceea ce IE va aplica la fiecare rând.
Notă: Înapoi la diferenţele normal în browsere, de data aceasta IE nu are un indiciu, atunci când este vorba de antete şi subsoluri, şi deşi acesta le face în tabel, acestea nu vor apărea în partea superioară şi inferioară a fiecărei pagini imprimate, te lasă să derulezi singur tabelul.
Fii un derulator de tabele.Deşi servesc unui scop foarte util, majoritatea utilizatorilor nu le folosesc şi ei mai cred şi că datele prezentate mai sus de linie sunt doar date disponibile.
