Home » Articole » Articole » Calculatoare » Dezvoltarea web » HTML » Tabele în HTML

Tabele în HTML

postat în: HTML 0

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

  1. <html>
  2. <head>
  3.   <title>1×2 Table</title>
  4.   <style>
  5.     td { border: 1px solid #000000; }
  6.   </style>
  7. </head>
  8. <body>
  9.   <table>
  10.     <tr>
  11.       <td>California</td>
  12.       <td>Michigan</td>
  13.     </tr>
  14.   </table>
  15. </body>
  16. </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

  1. <table>
  2. <tr>
  3. <td>California</td>
  4. <td>Michigan</td>
  5. </tr>
  6. <tr>
  7. <td>Nevada</td>
  8. <td>Ohio</td>
  9. </tr>
  10. </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

  1. <table>
  2.   <tr>
  3.     <td>California</td>
  4.     <td>Michigan</td>
  5.     <td>Mississippi
  6.   </tr>
  7.   <tr>
  8.     <td>Nevada</td>
  9.     <td>Ohio</td>
  10.     <td>Alabama</td>
  11.   </tr>
  12. </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

  1. <table>
  2. <tr>
  3.     <th>West</th>
  4.     <th>Midwest</th>
  5.     <th>South</th>
  6.   </tr>
  7.   <tr>
  8.     <td>California</td>
  9.     <td>Michigan</td>
  10.     <td>Mississippi
  11.   </tr>
  12.   <tr>
  13.     <td>Nevada</td>
  14.     <td>Ohio</td>
  15.     <td>Alabama</td>
  16.   </tr>
  17. </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, &nbsp;, 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”, &nbsp;, î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

  1. <table cellpadding=”5″ border=”2″
  2. summary=”All 12 months, organized by season”>
  3.   <caption>The Four Seasons</caption>
  4.   <tr>
  5.     <th>Spring</th>
  6.     <th>Summer</th>
  7.     <th>Fall</th>
  8.     <th>Winter</th>
  9.   </tr>
  10.   <tr>
  11.     <td>March</td>
  12.     <td>June</td>
  13.     <td>September</td>
  14.     <td>December</td>
  15.   </tr>
  16.   <tr>
  17.     <td>April</td>
  18.     <td>July</td>
  19.     <td>October</td>
  20.     <td>January</td>
  21.   </tr>
  22.   <tr>
  23.     <td>May</td>
  24.     <td>August</td>
  25.     <td>November</td>
  26.     <td>February</td>
  27.   </tr>
  28. </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.

Sursa:  “The Pocket HTML Tutorial” Copyright 2022 de Evan Goer, licența CC BY 3.0. Traducere și adaptare de © 2023 Nicolae Sfetcu

Ghid WordPress pentru dezvoltatori
Ghid WordPress pentru dezvoltatori

WordPress este o platformă pentru site-uri web rapidă, fiabilă, cu facilități multiple pentru dezvoltatori și ușor de utilizat. Totusi, dezvoltatorii și beneficiarii au de multe ori nevoie să adauge funcționalități suplimentare pentru a răspunde nevoilor lor. Acest ghid oferă unele … Citeşte mai mult

Nu a fost votat $3.99 Selectează opțiunile
Ghid WordPress pentru începători
Ghid WordPress pentru începători

WordPress combină simplitatea pentru utilizatorii şi editori cu complexitate suportului software pentru dezvoltatori. Acest lucru îl face mai flexibil, fiind în acelaşi timp uşor de utilizat. Simplitatea sa face posibilă instalarea şi publicarea online rapid. Nimic nu ar trebui să … Citeşte mai mult

Nu a fost votat $2.99$4.77 Selectează opțiunile
Proiectarea, dezvoltarea şi întreţinerea siturilor web
Proiectarea, dezvoltarea şi întreţinerea siturilor web

Un ghid pentru dezvoltatorii web, cu accent pe HTML, XML, JavaScript, SQL, tehnologii web, software web, software pentru dezvoltare web, aplicaţii web, şabloane pentru aplicaţii web, AJAX, servicii web, sindicalizarea web, web design, situri web, găzduirea web, analiza siturilor web, … Citeşte mai mult

Nu a fost votat $2.99$11.97 Selectează opțiunile

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *