Tabele HTML
O sarcină foarte comună în HTML este structurarea datelor tabelare și exista o serie de elemente și atribute doar pentru acest scop. Împreună cu puțin CSS pentru stil, HTML vă permite să afișați tabele cu informații, cum ar fi tabelul de locatari sau orarul la cinematograful local. In aceasta sectiune, vom discuta despre tot ceea ce trebuie să știți legat de structurarea datelor tabelare cu HTML.
Elementele de bază ale tabelelor HTML
Un tabel este un set structurat de date format din rânduri și coloane (date tabelare). Un tabel vă permite să căutați rapid și ușor valori care indică un fel de conexiune între diferite tipuri de date, de exemplu tipul unui curs, durata si pretul acestuia:
Când tabelele sunt făcute corect, chiar și persoanele nevăzătoare pot interpreta datele tabelare dintr-un tabel HTML.
Pentru ca tabelele să fie eficiente pe web, trebuie să furnizam câteva informații de stil cu ajutorul CSS, precum și o structură solidă cu ajutorul HTML. În acest modul ne concentrăm pe partea de HTML.
Când nu ar trebui să folosiți tabele HTML?
Tabelele HTML trebuie utilizate pentru date tabelare - pentru aceasta sunt concepute. Din păcate, mulți dezvoltatori obișnuiau să folosească tabele HTML pentru a crea pagini web, de exemplu un rând pentru antet, un rând care conține coloanele de conținut, un rând pentru subsolul site-ului (footer), etc. Aceasta metoda de lucru a fost utilizata în mod obișnuit, deoarece suportul CSS din browsere obișnuia să fie groaznic, cu mai multi ani in urma.
Pe scurt, utilizarea de tabele pentru crearea unui site, in detrimentul tehnicilor de layout CSS este o idee proastă. Principalele motive sunt următoarele:
- Utilizarea tabelelor pentru layout-ul site-ului reduce accesibilitatea utilizatorilor cu deficiențe de vedere. Cititoarele de ecran utilizate de persoane nevăzătoare, interpretează etichetele care există într-o pagină HTML, citesc și redau conținutul utilizatorului. Deoarece tabelele nu sunt instrumentul potrivit pentru aspect, iar marcarea este mai complexă decât în cazul tehnicilor de dispunere CSS, rezultatele cititoarelor de ecran, vor fi confuze pentru utilizatorii lor.
- Așa cum am menționat mai sus, crearea machetelor, implică în general, structuri de marcare mai complexe comparativ cu tehnicile de machetare CSS. Acest lucru poate duce la un cod greu de scris, întreținut și dezvoltat ulterior.
- Tabelele nu sunt adaptabile in mod automat. Când utilizam containere de dispunere adecvate (cum ar fi header, section, article sau div), lățimea lor este implicită la 100% din elementul părinte. Pe de altă parte, tabelele sunt dimensionate în funcție de conținutul lor în mod implicit, astfel încât sunt necesare măsuri suplimentare pentru ca stilul de dispunere a tabelelor să funcționeze eficient pe o varietate mare de dispozitive.
Crearea unui tabel
Sa construim impreuna un tabel simplu.
Conținutul fiecărui tabel este inclus intre aceste două etichete: <table>...</table>.
Cel mai mic container din interiorul unui tabel este o celulă de tabel, care este creată de elementul <td> (td înseamnă „date de tabel” - table data). Creati un fisier tabel.html si adăugați următoarele linii intre etichetele <body>...</body>:
<table>
<td>Celula 1</td>
</table>Dacă dorim un rând de patru celule, trebuie să copiem prima celula de trei ori. Actualizați conținutul tabelului dvs. pentru a arăta astfel:
<table>
<td>Celula 1</td>
<td>Celula 2</td>
<td>Celula 3</td>
<td>Celula 4</td>
</table>După cum veți vedea, celulele nu sunt plasate una sub alta, ci se aliniază automat unele cu altele pe același rând. Fiecare element td creează o singură celulă și împreună alcătuiesc primul rând. Fiecare celulă pe care o adăugăm face ca rândul să crească mai mult.
Pentru a opri acest rând să crească și să înceapă să plaseze celule ulterioare pe un al doilea rând, trebuie să folosim elementul <tr> (tr înseamnă „rândul tabelului”). Să actualizam tabelul, prin plasarea celor patru celule pe care le-am creat deja, între etichetele tr, astfel:
<table>
<tr>
<td>Celula 1</td>
<td>Celula 2</td>
<td>Celula 3</td>
<td>Celula 4</td>
</tr>
</table>Acum, să facem încă un rând - fiecare rând trebuie să fie învelit într-un element tr suplimentar, cu fiecare celulă cuprinsă într-o eticheta td:
<table>
<tr>
<td>Rândul 1-Celula 1</td>
<td>Rândul 1-Celula 2</td>
<td>Rândul 1-Celula 3</td>
<td>Rândul 1-Celula 4</td>
</tr>
<tr>
<td>Rândul 2-Celula 1</td>
<td>Rândul 2-Celula 2</td>
<td>Rândul 2-Celula 3</td>
<td>Rândul 2-Celula 4</td>
</tr>
</table>Va spuneam mai sus ca avem nevoie de o stilizare minimala cu ajutorul CSS, pentru ca tabelul nostru sa arate mai bine.
Copiati si lipiti codul de mai jos, in sectiunea head a fisierului tabel.html:
<style>
html {
font-family: sans-serif;
}
table {
border-collapse: collapse;
border: 2px solid rgb(200,200,200);
letter-spacing: 1px;
font-size: 0.8rem;
}
td, th {
border: 1px solid rgb(190,190,190);
padding: 10px 20px;
}
th {
background-color: rgb(235,235,235);
}
td {
text-align: center;
}
caption {
padding: 10px;
}
</style>Tabelul nostru ar trebui sa arate ca cel din exemplul urmator:
Adăugarea anteturilor cu ajutorul elementului <th>
Acum să ne îndreptăm atenția către antetele tabelelor - celule speciale care merg la începutul unui rând sau coloane și definesc tipul de date pe care le conține rândul sau coloana respectiva.
Pentru a marca anteturile tabelului, atât vizual, cât și semantic, utilizam elementul <th> (th înseamnă „antet de tabel" - table header). Acesta funcționează în mod similar cu elementul td, cu excepția faptului că genereaza un antet, nu o celulă normală.
Antetele sunt necesare pentru ca este mai ușor să găsim datele pe care le căutam, iar designul arată în general mai bine.
Sa actualizam tabelul nostru astfel:
<table>
<tr>
<td> </td>
<th>Antet vertical</th>
<th>Antet vertical</th>
<th>Antet vertical</th>
<th>Antet vertical</th>
</tr>
<tr>
<th>Antet orizontal</th>
<td>Rândul 1-Celula 1</td>
<td>Rândul 1-Celula 2</td>
<td>Rândul 1-Celula 3</td>
<td>Rândul 1-Celula 4</td>
</tr>
<tr>
<th>Antet orizontal</th>
<td>Rândul 2-Celula 1</td>
<td>Rândul 2-Celula 2</td>
<td>Rândul 2-Celula 3</td>
<td>Rândul 2-Celula 4</td>
</tr>
</table>Tabelul nostru ar trebui sa arate ca cel din imaginea de mai jos:
Extinderea celulelor pe mai multe rânduri și coloane
Uneori dorim ca celulele să se întindă pe mai multe rânduri sau coloane.
Pentru a face acest lucru vom utiliza atributele colspan și rowspan. Ambele acceptă valori fără unitate. De exemplu, colspan = "2", face ca o celulă să se extinda două coloane.
Revenind la tabelul nostru, voi renunta la un antet orizontal si la doua antete verticale, astfel incit cele care ramin sa se poata extinde:
<table>
<tr>
<td> </td>
<th colspan="2">Antet vertical</th>
<th colspan="2">Antet vertical</th>
</tr>
<tr>
<th rowspan="2">Antet orizontal</th>
<td>Rândul 1-Celula 1</td>
<td>Rândul 1-Celula 2</td>
<td>Rândul 1-Celula 3</td>
<td>Rândul 1-Celula 4</td>
</tr>
<tr>
<td>Rândul 2-Celula 1</td>
<td>Rândul 2-Celula 2</td>
<td>Rândul 2-Celula 3</td>span class="col-attr">
<td>Rândul 2-Celula 4</td>
</tr>
</table>Acum, tabelul nostru arata astfel:
Există o ultimă caracteristică despre care vom discuta în acest articol înainte de a continua. HTML are o metodă de definire a informațiilor de stil pentru o întreagă coloană de date - elementele <col> și <colgroup>. Acestea există deoarece poate fi un pic enervant și ineficient să specificam stilul pe coloane - în general, trebuie să specificați informațiile de styling pentru fiecare td sau th din coloană sau să utilizați un selector complex, cum ar fi: nth-child ().
Acum, am sa colorez in mod diferit, primele doua celule din fiecare antet vertical (pe coloana). Pentru acest lucru voi modifica tabelul si voi adauga urmatorul marcaj, imediat sub eticheta de deschidere a tabelului table, astfel:
<table>
<colgroup>
<col>
<col style="background-color: yellow;">
</colgroup>
<colgroup>
<col>
<col style="background-color: skyblue;">
</colgroup>
<tr>
<td> </td>
<th colspan="2">Antet vertical</th>
<th colspan="2">Antet vertical</th>
</tr>
<tr>
<th rowspan="2">Antet orizontal</th>
<td>Rândul 1-Celula 1</td>
<td>Rândul 1-Celula 2</td>
<td>Rândul 1-Celula 3</td>
<td>Rândul 1-Celula 4</td>
</tr>
<tr>
<td>Rândul 2-Celula 1</td>
<td>Rândul 2-Celula 2</td>
<td>Rândul 2-Celula 3</td>
<td>Rândul 2-Celula 4</td>
</tr>
</table>Dupa aceste modificari, tabelul nostru arata astfel:
Putem specifica informațiile o singură dată pe un element col. Elementele col sunt plasate în interiorul unui container colgroup chiar sub eticheta table de deschidere.
În mod efectiv, definim două „coloane de stil”, una specificând informații de stil pentru fiecare coloană. Nu aplicam stilul primei coloane, dar trebuie totuși să includem un element col gol - dacă nu am face acest lucru, stilul va fi aplicat doar la prima coloană.
Dacă am dori să aplicăm informațiile de styling pe ambele coloane, am putea include doar un element col cu un atribut span pe acesta, astfel:
<colgroup>
<col style="background-color: yellow" span="2">
</colgroup>La fel ca rowspan și colspan, span ia o valoare fără unitate, care specifică numărul de coloane la care dorim să se aplice stilul.
Tabele HTML - Funcții avansate și accesibilitate
Sa vedem acum câteva caracteristici mai avansate ale tabelelor HTML - cum ar fi titlurile (captions), rezumatul (summaries) și gruparea rândurilor în secțiuni head, body și footer - precum și accesibilitatea tabelelor pentru utilizatorii cu deficiențe de vedere.
Puteți da tabelului un titlu sau o descriere introducând-o într-un element <caption> chiar sub eticheta <table> de deschidere:
<table>
<caption>Descrierea tabelului meu</caption>
...
</table>După cum puteți deduce din exemplul de mai sus, caption are rolul de a oferi o scurta descriere a conținutului tabelului. Acest lucru este util pentru toți cititorii care doresc să-si facă o idee rapidă, dacă tabelul le este util, pe măsură ce scanează pagina, dar în special pentru utilizatorii nevăzători. În loc să citească tot tabelul, pot citi descrierea, pentru a afla despre ce este vorba in tabel și apoi pot decide dacă citesc sau nu tabelul mai detaliat.
Pe masura ce tabelul devine mai complex în structură, este util să utilizati o definire mai structurală a acestuia. Putem face acest lucru folosind <thead>, <tfoot>, și <tbody>, care vă permit să marcați un antet, un subsol și o secțiune pentru corpul tabelului.
Aceste elemente nu fac ca tabelul să fie mai accesibil pentru utilizatorii de screenreader și nu au ca rezultat o îmbunătățire vizuală. Cu toate acestea, sunt foarte utile pentru designul și aspectul tabelului, pentru ca pot fi targhetate cu CSS.
Aceste elemente structurale se utilizeaza astfel:
- Elementul <thead> trebuie să înfășoare partea din tabel reprezentata de antet (header) - acesta este de obicei, primul rând care conține titlurile coloanelor. Dacă utilizați elementele <col> / <colgroup>, antetul tabelului ar trebui să se afle chiar sub acestea.
- Elementul <tfoot> trebuie să înfășoare partea din tabel care reprezinta subsolul - acesta ar putea fi un rând final cu elemente din rândurile anterioare însumate, de exemplu. Puteți include subsolul tabelului chiar în partea de jos a tabelului așa cum vă așteptați, sau chiar sub antetul tabelului (browserul îl va reda în partea de jos a tabelului).
- Elementul <tbody> trebuie să înfășoare celelalte părți ale conținutului tabelului care nu se află în antetul sau subsolul tabelului. Va apărea sub antetul tabelului sau uneori în subsol, în funcție de modul în care ați decis să îl structurați.
☞ tbody este întotdeauna inclus în fiecare tabel, implicit, chiar dacă nu îl adaugați în cod. Pentru a verifica acest lucru, deschideți exemplul de mai sus și uitați-vă la codul HTML folosind instrumentele de dezvoltare ale browserului si veți vedea că browserul a adăugat această etichetă. Este bine sa o adaugati personal, pentru că vă oferă mai mult control asupra structurii și stilului tabelului.
Inainte de a merge mai departe, sa vedem cum arata acum tabelul nostru, dupa ce am adaugat si elementele structurale, despre care tocmai am discutat:
Tabele imbricate
Este posibil să introducem un tabel în interiorul altui tabel, atât timp cât este inclusa structura completă, inclusiv elementul table. În general, acest lucru nu este recomandat, deoarece face marcarea mai confuză și mai puțin accesibilă pentru utilizatorii de cititoare de ecran și în multe cazuri, puteți insera celule / rânduri / coloane suplimentare în tabelul existent.
In imaginea de mai jos puteti vedea un tabel in interiorul altui tabel:
Tabele pentru utilizatorii cu deficiențe de vedere
Citirea unui text simplu nu este o problemă, dar interpretarea unui tabel poate fi o provocare pentru persoanele cu deficiențe de vedere. Cu toate acestea, cu marcarea corespunzătoare putem înlocui asociațiile vizuale cu cele programatice.
Utilizarea anteturilor de coloană și rând
Cititoarele de ecran vor identifica toate anteturile (th) și le vor folosi pentru a realiza asociații programatice între acele anteturi și celulele la care se raportează. Combinația de antete de coloană și rând va identifica și interpreta datele din fiecare celulă, astfel încât utilizatorii de cititoare de ecran să interpreteze tabelul, în mod similar modului în care un utilizator cu vedere buna o face.
Atributul scope
Acest atribut poate fi adăugat la elementul (th) pentru a transmite catre screenreaders exact pentru care celule este un anumit antet - este un antet pentru rândul în care se află sau pentru coloana, de exemplu? Astfel putem defini fără echivoc anteturile de coloană astfel:
<thead>
<tr>
<th scope="col">Data</th>
<th scope="col">Locatie</th>
<th scope="col">Cost</th>
</tr>
</thead>Și fiecare rând ar putea avea un antet definit astfel (dacă am adăuga anteturi de rând, precum și antete de coloană):
<tr>
<th scope="row">Tunsoare</th>
<td>12/09</td>
<td>21</td>
</tr>Screenreaders va recunoaște marcarea structurată astfel și le va permite utilizatorilor să citească întreaga coloană sau rând.
Atributul scope are alte două valori posibile - colgroup și rowgroup. Acestea sunt utilizate pentru titluri care se așează deasupra mai multor coloane sau rânduri. Dacă ne uitam la tabelul de mai jos, veți vedea că celula „Durata” se află deasupra celulelor „Ziua” și „Seara”. Toate aceste celule ar trebui marcate ca anteturi (th), dar „Durata” este un titlu care se așază deasupra și definește celelalte doua subpoziții. Prin urmare, „Durata” ar trebui să obțină un atribut de tipul colgroup, în timp ce celelalte ar obține un atribut de tip col. De asemenea „HTML/CSS”, ar trebui marcat cu un atribut rowgroup.
🧠 Quiz - HTML: Tabele și structurarea datelor