Cum să stilați tabelul cu CSS pentru un impact maxim și să fiți observat

Cuprins

În interacțiunea cu limbajele HTML (Hypertext Markup Language) și alte limbaje de marcare, cum ar fi XML, veți întâlni o varietate de atribute și etichete. Tabelele reprezintă un instrument esențial, facilitând utilizatorilor scanarea, compararea și analiza unor volume mari de date.

Prin intermediul tabelelor, informațiile cheie, concluziile sau rezultatele devin vizibile dintr-o singură privire, fără a necesita parcurgerea întregului conținut. Aspectul tabelelor poate fi personalizat și modificat folosind CSS (Cascading Style Sheets).

Iată câteva motive pentru care stilizarea tabelelor în aplicația dvs. este importantă:

Îmbunătățirea aspectului vizual: Tabelele standard pot părea monotone și neinteresante. Stilarea lor le conferă un aspect mai atrăgător și plăcut pentru utilizatori.
Sporirea accesibilității: Tabelele stilizate pot fi adaptate și pentru persoanele cu dizabilități, făcând informația mai accesibilă.
Creșterea lizibilității: Prin utilizarea diferitelor tehnici de stilizare, datele din tabele devin mai ușor de scanat și înțeles.
Branding: Utilizarea constantă a anumitor fonturi și culori în tabelele aplicației dvs. vă ajută la consolidarea identității de marcă.
Optimizare pentru motoarele de căutare: Structurarea datelor în formate tabelare poate contribui la o clasare mai bună a site-ului dvs. în rezultatele motoarelor de căutare.

Crearea unui tabel de bază cu HTML

Pentru a ilustra modul în care funcționează tabelele în HTML, vom crea un director de proiect, ne vom deplasa în interiorul său și vom genera două fișiere: `index.html`, unde vom scrie codul HTML, și `styles.css`, care va include codul CSS pentru stilizare.

Dacă doriți să reproduceți acest exemplu, utilizați următoarele comenzi:

mkdir Stil-HTML-Tabele

cd Stil-HTML-Tabele

touch index.html styles.css

Acum aveți structura de bază a proiectului pentru a crea tabele HTML. În acest exemplu, vom prezenta diferite limbaje de programare, domeniile lor de aplicabilitate și exemple de companii care le utilizează.

Pentru a defini un tabel HTML, toate datele trebuie să fie incluse în interiorul etichetei <table>...</table>.

În fișierul HTML, construiți structura de bază a unui document HTML. Apoi, adăugați următorul cod în interiorul etichetei <body>:

<table>
    <tr>
        <th>Limbaj</th>
        <th>Utilizări Comune</th>
        <th>Companii Utlizatoare</th>
    </tr>
    <tr>
        <td>Java</td>
        <td>Aplicații web, aplicații Android, aplicații enterprise</td>
        <td>Google, Amazon, LinkedIn</td>
    </tr>
    <tr>
        <td>Python</td>
        <td>Data science, dezvoltare web, automatizare</td>
        <td>Google, Dropbox, Spotify</td>
    </tr>
     <tr>
        <td>JavaScript</td>
        <td>Dezvoltare web, dezvoltare front-end, scripting în browser</td>
        <td>PayPal, Facebook, Netflix</td>
    </tr>
    <tr>
        <td>C++</td>
        <td>Dezvoltare de jocuri, programare de sisteme, sisteme încorporate</td>
        <td>Tesla, Microsoft, Adobe</td>
    </tr>
      <tr>
        <td>Swift</td>
        <td>Dezvoltare iOS, dezvoltare macOS</td>
        <td>Apple</td>
    </tr>
      <tr>
        <td>PHP</td>
        <td>Dezvoltare web, scripting server-side, CMS-uri</td>
        <td>WordPress, Wikipedia, Yahoo</td>
    </tr>
</table>

Analizând structura tabelului de mai sus, veți observa prezența altor etichete în cadrul etichetei <table>, și anume: <tr>, <th> și <td>.

Aceste etichete au următoarele roluri:

<tr>, care reprezintă un rând al tabelului, este inclus în elementul <table>. Eticheta <tr> poate conține unul sau mai multe elemente <th> sau <td>.
<th>, care desemnează un antet al tabelului, este conținută în interiorul etichetei <tr>. În mod implicit, conținutul său este afișat cu fontul îngroșat.
<td>, care reprezintă datele dintr-o celulă a tabelului, descrie conținutul specific al fiecărei celule.

Dacă vizualizați codul de mai sus într-un browser, veți vedea o reprezentare tabelară a datelor.

Proprietăți CSS pentru stilizarea tabelelor

Tabelul creat este funcțional, dar aspectul său este destul de simplu și neatrăgător. Pentru a obține un aspect stilizat și vizual plăcut, vom utiliza CSS.

Vă amintiți de fișierul CSS pe care l-am creat? Acum este momentul să-l utilizăm. Însă, înainte de aceasta, trebuie să importăm fișierul CSS în fișierul HTML pentru ca stilizarea să funcționeze. Fișierul nostru CSS se numește `styles.css`. În secțiunea <head> a documentului HTML, adăugați următorul cod:

Acum suntem pregătiți să începem stilizarea tabelului. Iată câteva proprietăți CSS pe care le putem folosi:

#1. Bordură

Putem adăuga o bordură în jurul celulelor tabelului. Pentru a realiza acest lucru, vom defini o proprietate de bordură pe elementele <th> și <td>. Vom seta grosimea bordurii la 2 pixeli.

th, td {
    border: 2px solid orange;
}

Am setat valoarea bordurii la 2 pixeli și culoarea acesteia la portocaliu.

La vizualizarea paginii, veți observa apariția bordurilor în jurul celulelor tabelului.

#2. Combinarea bordurilor

Dacă examinați imaginea de mai sus, veți vedea că există spații între bordurile fiecărei celule. Proprietatea border-collapse determină dacă celulele adiacente din tabel ar trebui să partajeze o singură bordură.

Pentru ca celulele să partajeze aceeași bordură, adăugați acest cod în fișierul CSS:

table {
    border-collapse: collapse;
}

Acum, la vizualizarea paginii, veți observa că celulele împart aceeași bordură.

Dacă doriți ca fiecare celulă să aibă propria bordură, adăugați următorul cod în fișierul CSS:

table {
  border-collapse: separate;
}

Rezultatul vizual va fi diferit, fiecare celulă având propria bordură.

#3. Spațierea bordurilor

Prin utilizarea proprietății border-spacing, putem crea un spațiu între celulele tabelului. Am stabilit această regulă în interiorul selectorului table din fișierul CSS.

Pentru ca această proprietate să funcționeze, trebuie să folosim border-collapse: separate;.

Selectorul nostru pentru tabel va arăta astfel:

table {
    border-collapse: separate;
    border-spacing: 3px;
}

Marginile celulelor vor avea un spațiu de 3 pixeli între ele.

La vizualizarea tabelului, acesta va avea aspectul de mai jos:

#4. Aspectul tabelului

Proprietatea table-layout determină modul în care se comportă tabelul. Puteți crea tabele cu o lățime fixă sau tabele care se adaptează la conținutul lor.

Pentru a avea celule cu dimensiuni similare, putem seta proprietatea table-layout la fixed.

table-layout: fixed;

Codul final pentru selectorul table va fi:

table {
    border-collapse: collapse;
    border-spacing: 3px;
    table-layout: fixed;
}

Dacă dorim ca dimensiunea celulelor să se modifice în funcție de conținutul lor, putem seta proprietatea table-layout la auto.

table-layout: auto;

Selectorul table final din codul nostru CSS va arăta astfel:

Observați ultima celulă din tabel și rețineți că am adăugat cuvintele: „MailChimp și multe altele”.

Acum, puteți observa că celulele din ultimul rând sunt mai mari decât restul, deoarece aspectul tabelului este flexibil, adaptându-se la conținut.

Stilizarea pe care am acoperit-o până acum s-a concentrat pe întregul tabel. Acum ne putem concentra pe clasele individuale, modificând culoarea de fundal, fontul și proprietățile de aliniere a textului pentru rânduri, celule sau anteturi.

Putem stila aceste proprietăți după cum urmează:

#5. Culoarea de fundal

Putem schimba fundalul primului rând în verde-gălbui. Putem folosi pseudo-clasa :first-child pentru a atinge acest obiectiv.

Adăugați acest cod în fișierul CSS:

tr:first-child {
    background-color: yellowgreen;
}

Codul rezultat va arăta astfel:

#6. Font

Putem schimba stilul fontului sau dimensiunea fontului pentru anumite rânduri, coloane sau celule ale tabelului nostru.

Ne vom concentra asupra conținutului ultimei coloane din tabel (Companii Utilizatoare) pentru a schimba stilul fontului.

Vom transforma în italic tot conținutul din această coloană, folosind selectorul de clasă td:last-child. Adăugați următorul cod în fișierul CSS:

td:last-child {
    font-style: italic;
}

Rezultatul final va fi următorul, la reîncărcarea paginii:

De asemenea, putem schimba culoarea și dimensiunea fontului primei coloane pentru a o face mai specială.

Adăugați următorul cod în fișierul CSS:

tr td:first-child {
    color: red;
    font-size: x-large;
    font-weight: bolder;
}

La vizualizarea paginii, veți observa că: conținutul din prima coloană (Limbaj) are o dimensiune mai mare a fontului, este afișat cu culoarea roșie și este îngroșat.

Cum să facem tabelul responsiv

Tabelul creat de noi s-ar putea să nu se adapteze corect pe ecranele mici. Puteți utiliza instrumentele pentru dezvoltatori din Chrome sau un alt instrument similar pentru a verifica dacă codul dvs. este responsiv.

Există mai multe abordări posibile, dar vom acoperi doar una dintre ele.

Urmați acești pași:

Setați lățimea elementului <table> în codul dvs.

table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

Setați proprietatea word-break pe td și th, astfel încât cuvintele lungi din celule să fie împărțite corect.

th, td {
    border: 2px solid orange;
    word-break: break-word;
}

Cele mai bune practici pentru stilizarea tabelelor

Stilizarea cu CSS poate fi o activitate plăcută, mai ales când o stăpâniți. Iată câteva dintre cele mai bune practici pentru a vă asigura că obțineți cele mai bune rezultate atunci când stilizați tabele:

Utilizați o foaie de stil externă: deși aveam opțiunea de a utiliza stiluri inline, am preferat o foaie de stil externă. Această abordare ne-a permis să reutilizăm stilul pe diferite tabele, economisind timp de dezvoltare.
Mențineți simplitatea: este ușor să exagerați cu stilizarea tabelelor. Însă, păstrați un design simplu și asigurați-vă că tabelele sunt ușor de scanat și lizibile.
Adăugați borduri tabelelor: o bordură clară face ca un tabel să fie mai ușor de citit și scanat.
Utilizați culori consecvente: dacă aveți mai multe tabele pe paginile dvs. web, asigurați-vă că folosiți aceleași culori și fonturi. Utilizarea culorilor brandului dvs. poate îmbunătăți vizibilitatea acestuia.
Faceți tabelele responsive: nu puteți cunoaște dimensiunea ecranului dispozitivelor utilizatorilor finali. Asigurați-vă că tabelele se adaptează la diferite dimensiuni de ecran.
Utilizați legende pentru a descrie tabelele: legenda oferă o scurtă descriere a conținutului tabelului.
Folosiți spații albe pentru a separa tabelele: dacă mai multe tabele se succed, adăugați spații albe între ele și etichetați-le corespunzător.

Concluzie

Sper că acum sunteți capabili să creați și să stilizați un tabel HTML de bază. Este posibil să nu fi acoperit toate aspectele, deoarece HTML și CSS sunt vaste. Puteți crea tabele mai mici sau mai mari, în funcție de natura datelor pe care doriți să le afișați.

Consultați „cheat sheet”-urile CSS dacă doriți să aflați mai multe despre CSS și cum să-l utilizați pentru a îmbunătăți interfața cu utilizatorul.