În acest articol îți vom arăta cum să creezi tabele HTML într-o pagină web și cum să le stilizezi cu puțin CSS. Iată cum va arăta tabelul terminat la sfârșitul acestui articol:
UEFA Champions League – Most Titles | |||
Position |
Club |
Country |
Titles |
1 |
Real Madrid |
Spain |
13 |
2 |
Milan |
Italy |
7 |
3 |
Liverpool |
England |
6 |
În următorul video de programare CodeBerry vei vedea întregul proces prin care poți să creezi tabele HTML atrăgătoare pe website-ul tău.
Iar dacă vrei să încerci pe cont propriu, poți găsi codurile mai jos, ca să vezi cum funcționează tabelele în HTML și CSS.
Creează boilerplate-ul HTML
Scheletul unei pagini web conține elementele HTML de bază care definesc structura oricărei pagini web.
În partea de sus a acestui cod e tag-ul DOCTYPE, care îi spune browserului că intenționăm să construim un document HTML. Acesta e urmat de tag-ul <html>, care încapsulează tot conținutul paginii web. Secțiunea head conține alte tag-uri care sunt esențiale pentru a determina cum va fi afișată pagina web și acestea includ:
Tag-ul <title> definește numele paginii web, care apare în fila browserului, în timp ce <link> arată calea care leagă o foaie de stil externă (style.css) la pagina principală. Conține fișiere CSS necesare pentru stilizarea paginii web.
Crearea unor tabele HTML
Descrierea tag-urilor folositoare
Secțiunea head e una dintre cele mai importante secțiuni ale paginii web și conține majoritatea lucrurilor afișate pe pagină. Aceasta e secțiunea unde scriem codul care creează tabelul.
Există trei tag-uri importante când construim un tabel HTML: tag-ul <table> e folosit pentru a defini un tabel HTML și indică începutul tabelului, tag-ul <tr> vine de la „table row” (rând tabel) și e folosit pentru a crea un rând în orice tabel. Pe de altă parte, <td> vine de la „table data” (date tabel) și e folositor pentru a popula celulele unui tabel cu datele pe care le dorim afișate în tabel.
Crearea tabelului
Procesul de creare a unui tabel HTML e simplu și direct. Între tag-urile body de deschidere și de închidere creează tag-urile de tabel <table> </table>. Orice tabel trebuie să aibă un titlu care descrie tabelul, iar pentru a face asta creează primul rând între tag-urile tabelului folosind tag-urile pentru rând <tr></tr>. Folosind tag-urile pentru date de tabel <td></td>, populează acest prim rând cu titlul pe care îl vrei pentru tabel, în acest caz „UEFA Champions League – Most Titles”.
În acest punct tabelul conține doar un rând. Pentru a adăuga un alt rând, adaugă un alt tag pentru rând adiacent cu primul. Pentru a popula coloanele corespunzătoare acestui rând, folosește patru tag-uri <td> împreună cu datele care trebuie afișate între tag-urile de închidere și deschidere.
Tabelul pe care vrem să-l construim conține cinci rânduri și patru coloane. Asta înseamnă că trebuie să adăugăm încă patru tag-uri „<tr></tr>”, fiecare cu patru tag-uri „<td></td>”, precum în codul de mai jos.
După ce scrii următorul cod în editorul la alegere, salvează fișierul cu o extensie .html, adică tabel.html.
Navighează până la locația unde ai salvat fișierul și dă dublu clic pe fișier pentru a-l deschide. Acesta se deschide în browserul implicit al sistemului, iar rezultatul poate fi văzut mai jos.
UEFA Champions League – Most Titles | |||
Position |
Club |
Country |
Titles |
1 |
Real Madrid |
Spain |
13 |
2 |
Milan |
Italy |
7 |
3 |
Liverpool |
England |
6 |
Pentru a extinde titlul pe toate coloanele, am adăugat colspan=”4″ în primul tag <tr>.
Stilizarea tabelului HTML
Secțiunea finală necesită niște stilizare pentru tabel pentru a face pagina să arate mai bine. Cascading Style Sheets, abreviat ca CSS, oferă instrumentele necesare pentru a stiliza orice pagină web. În secțiunea head am definit un link care conectează pagina web la fișierul care conține fișierele necesare pentru stilizarea paginii noastre.
Pentru a stiliza pagina web, creează un fișier extern numit ‘style.css’ în același folder ca fișierul html și adaugă următorul cod în fișier:
Acum deschide fișierul html pentru a obține următorul rezultat în browser:
UEFA Champions League – Most Titles | |||
Position |
Club |
Country |
Titles |
1 |
Real Madrid |
Spain |
13 |
2 |
Milan |
Italy |
7 |
3 |
Liverpool |
England |
6 |
Sper că acest articol ți-a fost de folos. Dacă vrei mai multe tutoriale de felul acesta, le poți găsi pe acest blog, pe canalul nostru de YouTube sau pe site-ul nostru oficial.
