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

Veți întâlni multe atribute și etichete atunci când aveți de-a face cu HTML (Hypertext Markup Language) și alte limbaje de marcare, cum ar fi XML. Tabelele sunt atribute pe care ar trebui să le utilizați întotdeauna pentru a le facilita utilizatorilor să scaneze, să compare și să analizeze cantități mari de date.

Cu ajutorul tabelelor, utilizatorii pot vedea punctele cheie, concluziile sau rezultatele dintr-o privire, chiar și fără a citi întregul articol. Puteți folosi CSS pentru a stila și a schimba aspectul tabelelor.

Acestea sunt câteva dintre motivele pentru care poate fi necesar să stilați un tabel în aplicația dvs.;

Îmbunătățiți aspectul vizual: mesele obișnuite pot fi plictisitoare și simple. Stilizarea unor astfel de mese le va îmbunătăți aspectul și le va face atractive pentru utilizatori.
Îmbunătățiți accesibilitatea: mesele de stil le pot face accesibile chiar și celor cu dizabilități.
Îmbunătățiți lizibilitatea: puteți utiliza diferite tehnici de stilare pentru a facilita scanarea utilizatorilor prin datele prezentate în tabelele dvs.
Branding: vă puteți consolida identitatea mărcii atunci când aplicați fonturi și culori consecvente pe tabelele din aplicația dvs.
Bun pentru motoarele de căutare: organizarea datelor dvs. în formate tabelare va fi utilă dacă doriți să vă clasați site-ul pe locul înalt în motoarele de căutare.

Cuprins

Creați un tabel de bază cu HTML

Pentru a demonstra cum funcționează un tabel în HTML, vom crea un folder de proiect, vom naviga în folder și vom crea două fișiere; index.html, care va conține codul nostru HTML și styles.css, care conține codul nostru CSS (styling).

Dacă doriți să urmați, utilizați aceste comenzi pentru a începe;

mkdir Stil-HTML-Tabele

cd Styling-HTML-Tables

atingeți Stil-HTML-Tabele

Acum aveți folderul de bază al proiectului pentru a vă ajuta să creați tabele HTML. Vreau să prezint diferite limbaje de programare, cazurile lor de utilizare și exemple de companii care folosesc aceste limbaje.

Pentru a crea un tabel HTML, toate datele ar trebui să fie incluse în eticheta

…

În fișierul HTML, generați structura de bază a unui document HTML. Adăugați acest cod în eticheta .

<table>

        <tr>

          <th>Language</th>

          <th>Common Uses</th>

          <th>Companies Using</th>

        </tr>

        <tr>

          <td>Java</td>

          <td>Web apps, Android apps, enterprise applications</td>

          <td>Google, Amazon, LinkedIn</td>

        </tr>

        <tr>

          <td>Python</td>

          <td>Data science, web dev, automation</td>

          <td>Google, Dropbox,Spotify</td>

        </tr>

        <tr>

          <td>JavaScript</td>

          <td>Web dev, front-end dev, browser scripting</td>

          <td>PayPal, Facebook, Netflix</td>

        </tr>

        <tr>

          <td>C++</td>

          <td>Game dev, systems programming, embedded systems</td>

          <td>Tesla, Microsoft, Adobe</td>

        </tr>

        <tr>

          <td>Swift</td>

          <td>iOS development, macOS development</td>

          <td>Apple</td>

        </tr>

        <tr>

          <td>PHP</td>

          <td>Web dev, server-side scripting, CMSs</td>

          <td>WordPress, Wikipedia, Yahoo</td>

        </tr>

      </table>

Dacă aruncați o privire atentă la acest tabel, veți observa alte câteva etichete incluse în eticheta

4 moduri de a crea rapid o notă pe iPhone sau iPad

;

, rând de tabel, este inclus în elementul

și	. Aceste etichete fac următoarele;

. Eticheta

poate cuprinde unul sau mai multe elemente

. În mod implicit, conținutul său este îngroșat.

și

, antetul tabelului, este conținut în eticheta

, date de tabel, descrie conținutul datelor din celulele tabelului.

Când redați codul pe care l-am scris mai sus, îl vom avea în browser;

Proprietăți CSS utilizate pentru tabelele de stil

Tabelul pe care l-am creat mai sus este complet funcțional. Cu toate acestea, lasă de dorit, deoarece nu este bine coafată. Pentru a obține stilurile dorite și pentru a face tabelul atrăgător din punct de vedere vizual, vom folosi CSS.

Vă amintiți fișierul CSS pe care l-am creat? Acum este timpul să-l folosești. Cu toate acestea, mai întâi trebuie să importați fișierul CSS în fișierul HTML pentru ca stilul să funcționeze. Am numit fișierul nostru CSS styles.css. În secțiunea a documentului HTML, adăugați următoarele;

Acum suntem gata să ne modelăm masa. Îl putem stila după cum urmează;

#1. Frontieră

Putem adăuga un chenar în jurul celulelor din tabelul nostru. Pentru a realiza acest lucru, vom defini o proprietate de margine pe elementele

și

. Putem seta chenarul la 2px.

th, td {

    border: 2px solid orange;

  }

Am setat valoarea chenarului la 2 și am adăugat portocaliu ca culoare.

Când randați noua pagină, veți vedea următoarele;

#2. Prăbușirea frontierei

Dacă examinați captura de ecran de mai sus, veți observa că există spații între marginile fiecărei celule. Proprietatea border-collapse determină dacă celulele adiacente dintr-un tabel ar trebui să împartă o chenar.

Dacă doriți ca celulele să partajeze un chenar, adăugați acest cod în fișierul dvs. CSS;

table {

  border-collapse: collapse;

}

Când randați pagina dvs., puteți vedea că celulele împart margini după cum urmează;

Dacă doriți ca celulele să aibă margini diferite, adăugați acest lucru în fișierul dvs. CSS;

table {

  border-collapse: separate;

}

Pagina redată va apărea după cum urmează;

#3. Spațierea granițelor

Folosind proprietatea border-space, putem crea un spațiu mic între celulele din tabelul nostru. Am stabilit regula în interiorul clasei de tabel în fișierul nostru CSS.

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

Putem avea clasa noastră de tabel după cum urmează;

table {

    border-collapse: separate;

    border-spacing: 3px;

  }

Marginile celulelor au un spațiu de 3px.

Când randați tabelul, acesta va apărea după cum urmează;

#4. Aspect de masă

Proprietatea Table-layout determină natura tabelului. Puteți avea mese care au întotdeauna aceeași lungime. Pe de altă parte, puteți crea și tabele care se modifică în funcție de conținut.

Dacă dorim să avem celule care au dimensiuni similare, putem seta proprietatea table-layout ca fixă.

tabel-aspect: fix;

Codul nostru final pe clasa de masă va fi;

table {

    border-collapse: collapse;

    border-spacing: 3px;

    table-layout: fixed;

  }

Dacă dorim celule care se modifică în funcție de conținut, putem schimba proprietatea table-layout la automat.

table-layout: auto;

Clasa tabelului final din codul nostru CSS va fi;

Verificați ultima celulă de pe tabel și rețineți că am adăugat aceste cuvinte; MailChimp și multe altele.

Acum puteți vedea că celulele din ultimul rând sunt mai mari decât restul, deoarece aspectul tabelului este flexibil în funcție de conținut.

Styling-ul pe care l-am acoperit până acum s-a concentrat pe întreaga masă. Acum ne putem concentra asupra claselor individuale schimbâ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. Culoare de fundal

Putem schimba fundalul rândului nostru de sus în galben-verde. Putem folosi selectorul de pseudo-clasă :first-child pentru a ne atinge obiectivele.

Adăugați acest cod la codul dvs. CSS;

tr:first-child {

    background-color: yellowgreen;

  }

Codul final afișat va apărea după cum urmează;

#6. Font

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

Vom viza conținutul ultimei coloane din pagina noastră (Companii care folosesc) pentru a schimba stilul fontului.

Vom pune în italice tot conținutul din această coloană țintind selectorul de clasă td:last-child. Puteți adăuga următorul cod la fișierul dvs. CSS;

td:last-child {

  font-style: italic;

}

Rezultatul final va fi după cum urmează când reîncărcați pagina redată;

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

Adăugați următorul cod în fișierul dvs. CSS;

tr td:first-child {

    color: red;

    font-size: x-large;

    font-weight: bolder;

  }

Când vă redați pagina, veți observa următoarele; conținutul din prima coloană (Limba) are o dimensiune mai mare a fontului, este roșu și este mai îndrăzneț.

Cum să faci tabelul receptiv

Este posibil ca tabelul creat de noi să nu răspundă la ecranele mici. Puteți folosi Instrumentele pentru dezvoltatori Chrome sau un instrument extern ca acesta pentru a testa dacă codul dvs. răspunde.

Există mai multe abordări pe care le puteți lua, dar veți acoperi doar una.

Urmați acești pași;

Setați lățimea elementului
în codul dvs.;

table {

  width: 100%;

  border-collapse: collapse;

  table-layout: fixed;

}

Setați ruptura de cuvinte pe td și th pentru a crea cuvinte lungi în celulă.

th, td {

    border: 2px solid orange;

    word-break: break-word;

  }

Cele mai bune practici pentru mesele de stil

CSS poate fi distractiv o dată, mai ales când îl știi. Acestea sunt câteva dintre cele mai bune practici pentru a vă asigura că obțineți tot ce este mai bun atunci când vă stilizați mesele;

Utilizați o foaie de stil externă: am avut opțiunea de a folosi stilul inline, dar am ales o foaie externă. Am reușit să ne refolosim stilul pe diferite mese, reducând timpul de dezvoltare.
Păstrați-o simplu: puteți să vă lăsați duși de cap și să vă aranjați în exces mesele. Cu toate acestea, mențineți întotdeauna un design simplu și faceți ca tabelele să fie scanate și lizibile.
Adăugați chenaruri la tabelele dvs.: un chenar face un tabel ușor de citit și scanat.
Utilizați culori consistente: dacă aveți mai multe tabele pe paginile dvs. web, asigurați-vă că utilizați culori și fonturi consecvente. Utilizarea culorilor mărcii dvs. vă poate îmbunătăți vizibilitatea mărcii.
Faceți tabelele receptive: este posibil să nu cunoașteți niciodată dimensiunea ecranului dispozitivelor utilizatorilor finali.
Utilizați legendele pentru a vă descrie tabelele: legendă descrie pe scurt despre ce este vorba în tabel.
Folosiți spații albe pentru a vă separa tabelele: dacă mai multe tabele se succed, adăugați niște spații albe și legendă-le în consecință.

Concluzie

Cred că acum puteți crea și stila un tabel HTML de bază. Este posibil să nu fi acoperit totul, deoarece HTML și CSS sunt largi. Puteți crea tabele mai mici sau mai mari, în funcție de natura datelor pe care doriți să le capturați.

Consultați cheat sheets CSS dacă doriți să aflați mai multe despre CSS și despre cum să îl utilizați pentru a vă îmbunătăți interfața de utilizare.