Tabelele joacă un rol semnificativ atunci când vine vorba de prezentarea datelor într-un format organizat. În acest tutorial vei învăța cum să creezi tabele de bază HTML și să folosești etichetele esențiale pentru layout și structură.
Ghid pas cu pas
Să începem cu crearea primei tale tabele! Mai întâi trebuie să știi că eticheta de bază pentru o tabelă este <table>. Această etichetă înconjoară întreaga tabelă.
Acum adăugăm un rând. Fiecare rând este definit cu eticheta <tr>, care înseamnă „rând de tabel”. În acest rând nu există încă date, așa că rămâne pentru moment gol. Îți poți imagina că fiecare rând poate oferi spațiu pentru mai multe coloane.
Acum este momentul să adăugăm câteva date în tabel. Pentru aceasta folosim eticheta <td> și adăugăm valorile corespunzătoare. Să zicem că primul nume este „Jan”, e-mailul este „support@programmierenlern.info” și data nașterii este 23.06.1982. Rândul tău ar trebui să arate astfel:
Asigură-te că tabelul arată acum mai bine. Poți adăuga la fel de multe rânduri cât dorești, folosind mai multe etichete <tr> și <td>. Hai să adăugăm un alt angajat. Să-l numim „Joe Average” și e-mailul său ar putea fi „joe@average.com”.
Dacă acum reîncărcăm tabelul, vom observa că acesta crește și toate datele introduse sunt vizibile. Structura este importantă, deoarece îți oferă o imagine de ansamblu clară asupra informațiilor.
Ce se întâmplă dacă dorești să adaugi un subsol în partea de jos a tabelului, de exemplu pentru un drept de autor? Aici intervine colspan. Cu colspan poți specifica câte coloane ar trebui să ocupe o celulă. Așadar, pentru a adăuga un drept de autor peste toate cele trei coloane, scrii: Copyright 2015 coding-geeks.de.
După adăugarea acestui subsol, ar trebui să verifici prezentarea. Ideea este că subsolul este poziționat sub coloane și prezintă datele într-un mod clar. În acest caz, subsolul nu are o coloană proprie și ar trebui să fie plasat deasupra celorlalte trei coloane.
Dacă reduci acum colspan-ul la o valoare de două, ai putea adăuga și o a doua notă. Să zicem că vrei să afișezi „Coding Geeks” într-o nouă coloană. Folosește din nou eticheta <td>, aplicând corect colspan.
Dacă ai urmat toți acești pași, ai învățat cum să creezi tabele de bază HTML. Designul vizual ar trebui totuși să fie întotdeauna realizat prin CSS, pentru a îmbunătăți layout-ul și utilizabilitatea. Acest lucru implică separarea conținutului de layout, astfel încât în etapele ulterioare să ai mai multă flexibilitate în designul site-urilor tale web.
Rezumat - Crearea elementelor de bază ale tabelelor HTML
Ai învățat structura și utilizarea tabelelor HTML, începând cu construcția, plasarea datelor și terminând cu subsolurile. Acum poți afișa date tabelare simple pe site-ul tău.
Întrebări frecvente
Care sunt etichetele de bază pentru tabele HTML?Etichetele de bază sunt <table>, <tr>, <th> pentru antete și <td> pentru celulele de date.
Pot crea un număr nelimitat de rânduri și coloane într-o tabelă?Da, teoretic poți adăuga multe rânduri și coloane, dar este important să ții cont de lizibilitate.
Cum ar trebui să îmi stilizez tabelele?Folosește CSS pentru stilizare, în loc de a folosi atribute HTML directe precum border.
Ce înseamnă colspan?Attributul colspan permite unei celule să se întindă pe mai multe coloane.
De ce este CSS mai potrivit pentru layout decât atributele HTML?CSS separă conținutul de stilul său, oferind astfel mai multă flexibilitate și opțiuni pentru design.
