Tabele în HTML

Tabelele vă permit să aranjați elemente HTML într-o grilă. Exemplele de date tabelare includ calendare, alocații de resurse pentru proiecte, seturi de date științifice și alte tipuri de date care au sens să fie afișate în rânduri și coloane.

Notă: Deoarece tabelele pot aranja elemente HTML într-o grilă, o utilizare evidentă a tabelelor este definirea aspectului unei pagini web. Această tehnică veche de aspect este acum înlocuită de machetele bazate pe CSS. Pentru concizie, acest tutorial se concentrează numai pe tabelele care afișează date tabelare.

Structura tabelului

Chiar și un tabel simplu implică mai multe niveluri de elemente imbricate. Structura de bază a unui tabel este:

Elementul table definește tabelul în sine.
În table se află unul sau mai multe elemente tr care definesc rândurile tabelului.
În cadrul elementelor tr se află unul sau mai multe elemente th sau td . Aceste elemente definesc celulele antetului tabelului și, respectiv, celulele de date ale tabelului.

Iată un exemplu simplu de tabel cu un rând și două coloane. Pentru a ilustra mai bine structura tabelului, am adăugat un fragment de CSS pentru a oferi fiecărei celule de tabel un chenar.

Exemplul 4.1. Tabel 1×2

<html>
<head>
<title>1×2 Table</title>
<style>
td { border: 1px solid #000000; }
</style>
</head>
<body>
<table>
<tr>
<td>California</td>
<td>Michigan</td>
</tr>
</table>
</body>
</html>

Adăugarea de rânduri și coloane

Un element tr reprezintă un rând. Pentru a adăuga un alt rând, adăugați un alt element tr cu același număr de td (coloane) ca și restul tabelului:

Exemplul 4.2. Tabel 2×2

<table>
<tr>
<td>California</td>
<td>Michigan</td>
</tr>
<tr>
<td>Nevada</td>
<td>Ohio</td>
</tr>
</table>

Un td reprezintă o celulă de date de tabel. Pentru a adăuga o altă coloană, adăugați un alt element td la fiecare tr din tabel:

Exemplul 4.3. Tabel 2×3

<table>
<tr>
<td>California</td>
<td>Michigan</td>
<td>Mississippi
</tr>
<tr>
<td>Nevada</td>
<td>Ohio</td>
<td>Alabama</td>
</tr>
</table>

Adăugarea antetelor

Până acum, am văzut rânduri de tabel care conțin elemente td (date de tabel). Cu toate acestea, rândurile pot conține, de asemenea, elementele th (antetul tabelului). Antetele tabelului etichetează un rând sau o coloană. În mod implicit, majoritatea browserelor redau anteturile tabelelor ca aldine.

Exemplul 4.4. Tabel cu anteturi

<table>
<tr>
<th>West</th>
<th>Midwest</th>
<th>South</th>
</tr>
<tr>
<td>California</td>
<td>Michigan</td>
<td>Mississippi
</tr>
<tr>
<td>Nevada</td>
<td>Ohio</td>
<td>Alabama</td>
</tr>
</table>

Tip

If you leave any table data or table header empty (<td></td>), the cell will collapse and look unattractive. To prevent this from happening, you can place a special “non-breaking space” entity,  , in the cell. This inserts an invisible character that forces the browser to draw the borders of the cell.

Sfat: Dacă lăsați orice date de tabel sau antet de tabel goale (<td></td>)), celula se va restrânge și va arăta neatractiv. Pentru a preveni acest lucru, puteți plasa o entitate specială „spațiu care nu se sparge”,  , în celulă. Aceasta inserează un caracter invizibil care forțează browserul să deseneze marginile celulei.

Adăugarea de subtitrări și rezumate

Puteți furniza informații suplimentare despre un tabel dându-i o legendă sau un rezumat.

Atributul summary al elementului table oferă un scurt rezumat text al tabelului. Majoritatea browserelor nu afișează rezumatul direct, dar cititoarele de ecran și browserele numai text pot furniza acest text utilizatorilor lor. Dacă treceți mouse-ul peste tabel, unele browsere vor afișa textul rezumat ca un sfat explicativ.

Elementul caption , care trebuie să urmeze imediat eticheta deschisă <table>, furnizează titlul tabelului. În mod implicit, legenda apare direct deasupra tabelului. Unele browsere afișează legenda centrată deasupra tabelului, altele o afișează aliniată la stânga. Puteți folosi CSS pentru a alinia și a stiliza legenda în consecință.

Rânduri de tabel, celule și anteturi

Odată ce ați plasat <caption> (opțional), este timpul să începeți să construiți tabelul propriu-zis. Tabelele sunt compuse din rânduri de tabel (<tr>). Fiecare împerechere <tr>…</tr> definește un rând.

În fiecare rând de tabel există una sau mai multe celule, care sunt fie date de tabel (<td>), fie anteturi de tabel (<th>). Celulele din antetul tabelului ar trebui să conțină informații despre „antet”, cum ar fi titlul unui rând sau al unei coloane. Celulele de date din tabel ar trebui să conțină datele. Rețineți că dacă lăsați orice celulă din tabel complet goală („<td></td>”), celula va colapsa și va arăta neatractiv. Cel mai bine este să puneți ceva într-o celulă goală, chiar dacă este doar un element <br>.

Să aruncăm o privire la un exemplu care încorporează toate aceste elemente. Tabelul anterior avea un rând și două coloane. Următorul tabel are patru rânduri și patru coloane.

Exemplul 4.5. Tabel 4×4

<table cellpadding=”5″ border=”2″
summary=”All 12 months, organized by season”>
<caption>The Four Seasons</caption>
<tr>
<th>Spring</th>
<th>Summer</th>
<th>Fall</th>
<th>Winter</th>
</tr>
<tr>
<td>March</td>
<td>June</td>
<td>September</td>
<td>December</td>
</tr>
<tr>
<td>April</td>
<td>July</td>
<td>October</td>
<td>January</td>
</tr>
<tr>
<td>May</td>
<td>August</td>
<td>November</td>
<td>February</td>
</tr>
</table>

După cum puteți vedea, chiar și un simplu tabel 4×4 necesită o cantitate destul de mare de codare.

Câteva lucruri de luat în considerare:

Priviți cu atenție înainte și înapoi între cod și rezultate și asigurați-vă că înțelegeți cum se termină fiecare lună în rândul și coloana potrivite. Înțelegeți de ce există un rând de anotimpuri și trei rânduri de luni? Înțelegeți de ce fiecare coloană de luni se aliniază așa cum o face?
Textul <th> este aldin, în timp ce <td> este simplu. Aceasta este greutatea fontului implicit pentru aceste elemente, deși, desigur, puteți modifica acest lucru cu foile de stil.
Atributul rezumat nu apare nicăieri pe ecran. Este într-adevăr destinat browserelor non-grafice, dar vom continua să fim un cetățean bun și vom continua să-l folosim.