Proiectare tabel HTML cu CSS - SELFHTML-Wiki

Informații despre acest text

tabel

Când vine vorba de aspectul mesei, un lucru este pe primul loc - nu cât de bine arată masa, ci cum rapid și ușor utilizatorul poate capta date în coloanele și rândurile corecte.

Acest capitol vă arată cum puteți utiliza CSS3 pentru a face tabelele mai atractive și în același timp mai ușor de citit.

Cuprins

  • 1 setări de bază CSS
    • 1.1 cadre și chenare
    • 1.2 Titluri
    • 1.3 câmpuri
  • 2 Exemplu de asistență pentru browser
    • 2.1 Grupuri de coloane între celule
    • 2.2 Titlul tabelului
    • 2.3 Informații CSS de bază
    • 2.4 Proiectarea antetului și a celulelor de date
    • 2.5 trecere de zebră
    • 2.6 Anteturi de linie
    • 2.7 Proiectați titlul
    • 2.8 Marcarea liniilor în: hover
  • 3 Exemplu de state federale gri pe gri
  • 4 link-uri web

Setări de bază CSS [editați]

Rame și chenare [editați]

De obicei, SELFHTML vă recomandă să fiți atenți la modificarea setărilor implicite ale browserului. Tabelele sunt o excepție de la aceasta, deoarece în vizualizarea standard fiecare celulă de tabel și tabelul în sine au o linie de margine și o margine exterioară, ceea ce conferă tabelelor un aspect „tehnic”:

Cu border-collapse: restrânge acest lucru poate fi modificat astfel încât tabelul să fie afișat într-o grilă „normală”.

Titluri [editați]

Într-un tabel, celulele th formează titlurile pentru coloane sau rânduri individuale, elementul de subtitrare reprezintă o legendă pentru tabel. În mod normal, (adică în foaia de stil implicită) antetele tabelului sunt afișate cu caractere aldine, subtitrarea este afișată în afară de Masă adăpostită. Acest lucru poate fi schimbat cu CSS:

Câmpuri [editați]

Majoritatea tabelelor conțin serii de numere.

Aici este important să aliniați numerele în mod clar și să marcați sumele în consecință.

Exemplu de asistență pentru browser [editați]

Pentru exemplul nostru, folosim un tabel care prezintă cotele de piață ale browserelor individuale din Germania.

Un element tbody, thead și tfoot a fost introdus în tabel (browserul poate genera el însuși un element tbody). Liniile sunt introduse cu tr.

Antetul tabelului este format din elementele, celulele individuale cu elemente td.

Grupuri de coloane cu celule încrucișate [editați]

Deoarece Internet Explorer, spre deosebire de celelalte browsere, nu primește actualizări automate, este interesant să știm în ce versiuni este distribuită cota de piață:

Antetul tabelului [editați]

Puteți atribui o scurtă explicație sau o rubrică către un tabel cu elementul de subtitrare. Declarația trebuie făcută imediat după eticheta introductivă a tabelului, dar poate fi poziționată și sub tabel folosind CSS.

Fiecare coloană are o celulă de antet (th) în antetul tabelului (thead), care este atribuită coloanei cu scope = "col".

În mod similar, coloana din stânga cu scope = "rând" servește ca antet de tabel pentru rândurile individuale.

Informații CSS de bază [editați]

Cu proprietatea border-collapse puteți determina dacă marginile elementelor de tabel vecine sunt afișate separat (border-collapse: separate;) sau coincidente (border-collapse: colaps;).

Fontul în celulele de antet și de date este afișat în dimensiunea standard a fontului, fontul în celulele de antet este afișat cu aldine.

Proiectarea capului și a celulelor de date [editați]

În setările standard ale browserului, vedeți doar o mizerie constantă de numere. CSS vă permite să proiectați celule de antet și date, astfel încât numerele să fie mai ușor de citit.

Anteturile tabelelor primesc o culoare de fundal și text.
Fontul din celulele de date trebuie să fie cursiv și justificat la dreapta, astfel încât valorile mari să iasă în evidență imediat.

Pentru ca celula de date goală să nu primească o umbră în partea stângă sus, celulele goale sunt adresate cu pseudo-clasa goală și umbra este eliminată din nou.

Trecerea prin zebră [editați]

Mai ales în cazul tabelelor mai mari, este mai ușor să colorați în fiecare a doua linie.

Anteturi [edit]

Vă amintiți celulele de antet din fiecare rând?

Titlu de proiectare [editați]

Legenda conținută în elementul de legenda este acum proiectată cu o panglică:

Un pseudo-element din stânga oferă trupei un aspect tridimensional.

Masa primește acum și o umbră.

Marcarea liniilor în: hover [editați]

Când utilizatorii deplasează mouse-ul peste masă, celula de date respectivă și rândul corespunzător al tabelului sunt evidențiate în culoare:

Exemplu de state federale gri în gri [editați]

În cele ce urmează, statele federale ale Republicii Federale vor fi prezentate într-un al doilea exemplu.