Introducere pe Styling Table CSS
De ce folosim CSS, deși putem folosi tabele HTML, se datorează faptului că, în tabelul HTML, un layout de pagină bazat pe tabele de multe ori se redă mai lent decât un aspect echivalent bazat pe CSS; acest lucru este valabil mai ales în cazul paginilor care au mult conținut. Tabelele nu trebuie utilizate ca instrumente de aranjare. Și dacă construim tabele HTML fără stiluri sau atribute în browser, acesta va fi afișat fără nicio margine. Stilarea unei mese cu CSS poate îmbunătăți aspectul acesteia.
Tabelele CSS sunt destul de simple de înțeles și de utilizat. Este doar o problemă să vă amintiți valorile proprietății de afișare CSS corespunzătoare pentru elementele de bază ale tabelului HTML. Cu ajutorul CSS, suntem capabili să realizăm câteva mese elegante.
Ce este CSS Table Styling?
Un tabel CSS (stiluri în cascadă) descrie modul în care se prezintă un set de elemente în rânduri și coloane. CSS implicit aplicat unei tabele HTML este un tabel CSS.
- CSS a conceput și a proiectat flexibilitatea.
- Înseamnă că un aspect bazat pe CSS vă asigură că plasați toate stilurile (adică de la mici modificări la regulile majore) într-o singură locație.
- Modificând regulile de aspect setate în acea foaie de stil și afectează fiecare pagină care se referă la ea.
- Aspectul paginii bazate pe CSS va apărea de obicei mai rapid pe ecran și chiar descărcarea va fi mai rapidă decât aspectul bazat pe tabelă.
Proprietățile stilului tabel CSS
Mai jos sunt diferite proprietăți ale stilurilor de tabel CSS:
1. Prabusirea frontierei
Este utilizat pentru a indica dacă granițele din jurul celulelor unui tabel trebuie separate sau prăbușite.
Sintaxa: border-collapse: separate|collapse|initial|inherit;
- Prabusirea frontierei: separată: se folosește astfel încât celulele adiacente să aibă propriile lor și independente granițe care nu sunt partajate.
Sintaxă
border-collapse: separate;
Valoarea implicită care este setată la proprietatea de reducere a frontierei este separată. Când sunt separate, browserele pun un spațiu de câțiva pixeli între fiecare celulă folosind proprietatea de spațiere a marginilor.
Cod
ieşire:
- Colaps de bord: colaps: ori de câte ori setăm proprietatea border-collapse pentru a se prăbuși, acesta elimină spațiul dintre celule.
Sintaxă
border-collapse: collapse;
Cod
Rezultat:
Chiar dacă eliminați acest spațiu prin setarea atributului de spațiu celular pentru eticheta HTML la 0, browserele afișează încă margini duble. Adică, marginea de jos a unei celule va apărea deasupra marginii superioare a celulei de mai jos, provocând o dublare a limitelor. Setarea proprietății de colaps a marginilor elimină atât spațiul dintre celule, cât și dublarea liniilor de frontieră.
- Colaps de frontieră: inițial: Este utilizat pentru a seta proprietatea border-collapse la valoarea implicită.
- Colaps de frontieră: mostenire: este folosit atunci când proprietatea de colaps de frontieră moștenește de la elementele sale părinte. Această proprietate funcționează numai atunci când este aplicată la
etichetă.
Valori: colaps, separat, inițial, moștenire;
2. Distanța dintre frontiere
Setează granițele adiacente spațiului și conținutul din jurul mesei. Este similar cu distanța de celule a etichetei
atribut, cu excepția faptului că are o a doua valoare opțională. Această proprietate funcționează numai atunci când este aplicată la
etichetă.
Sintaxă
border-spacing: Length|initial|inherit;Spațiul de graniță ia de obicei una sau două valori de lungime. În această singură valoare este specificată apoi se definește atât distanța orizontală cât și cea verticală între celule.
Cod
ieşire:
În acest sens, dacă sunt specificate două valori, atunci prima valoare definește distanța orizontală între celule (spațiul de o parte și de alta a fiecărei celule), iar a doua valoare definește distanța verticală între celule. (spațiul care separă partea de jos a unei celule de partea superioară a celei de dedesubt).
3. Latura de legendă
Proprietatea side side specifică amplasarea unei legături de tabel. Atunci când este aplicată la o legendă de tabel, această proprietate determină dacă legenda apare în partea de sus sau de jos a tabelului. În mod normal, o legendă apare în partea de sus a tabelului.
Sintaxă
caption-side: top|bottom|initial|inherit;Această proprietate poate avea una dintre cele patru valori:
- Side caption: top: Este valoarea implicită. În această situație, se pune subtitrarea deasupra tabelului.
Sintaxa:
caption-side:top;Cod
ieşire:
- Latura din titlu : partea de jos: pune subtitrarea sub tabel.
Sintaxa:
caption-side:bottom;Cod
ieşire:
- Latura de legendă: inițială: este utilizată pentru a seta proprietatea la valoarea implicită.
- Latura de legendă: moștenire: moștenește această proprietate de la elementul său părinte.
Valori: sus, jos, inițial, moștenire;
4. Celule goale
Acesta indică browserul dacă ar trebui să afișeze o celulă de tabel care este complet goală. Acesta controlează redarea bordurilor și a fundalului celulelor care nu au conținut vizibil într-un tabel care folosește modelul de borduri separate.
Sintaxă:
empty-cells: show|hide|initial|inherit;Această proprietate poate avea una dintre cele patru valori:
- Empty-cell: show: Această proprietate este utilizată pentru a afișa marginile pe celula goală.
Sintaxa:
empty-cells:show;Cod
ieşire:
- Empty-cell: hide: Această proprietate este folosită pentru a ascunde granițele din celula goală.
Sintaxa:
empty-cells: hide;Cod
ieşire:
- Golul celular: inițial : este utilizat pentru a seta proprietatea la valoarea implicită.
- Empty-cell: mostenire: moștenește această proprietate de la elementul său părinte.
Valori: arată, ascunde, inițial, moștenesc;
5. Dispunerea tabelelor
Controlează modul în care un browser web desenează un tabel și poate afecta ușor viteza cu care browserul o afișează. Această proprietate poate avea una dintre cele patru valori.
Sintaxă:
table-layout: auto|fixed|initial|inherit;Proprietatea implicită este automată.
1. Dispunerea tabelelor: auto: Auto face ca lățimea elementelor să se regleze automat pentru a se potrivi cu conținutul.
2. Tabel - aspect: fix : setarea fixă obligă browserul să redea tuturor coloanelor aceeași lățime ca și coloanele din primul rând. Dacă conținutul este mai larg decât primul rând, atunci conținutul va fi împachetat, tăiat sau extins în afara celulelor.
Cod
ieşire:
3. Dispunerea tabelelor: inițială: este utilizată pentru a seta proprietatea la valoarea implicită.
4. Dispunerea tabelului: mostenire: moștenește această proprietate de la elementul său părinte.
Concluzie
Cu ajutorul CSS, putem realiza mese elegante și putem îmbunătăți aspectul mesei.
Articole recomandate
Acesta este un ghid pentru CSS Table Styling. Aici discutăm proprietățile cu coduri, ieșiri și sintaxa Styling tabel CSS. De asemenea, puteți parcurge articolele noastre date pentru a afla mai multe -
- Avantajele CSS
- Utilizări CSS
- Introducere în CSS
- Formatare text CSS