Acest capitol intră în detaliu despre principiile utilizării tabelelor în marcarea HTML. Aceasta este o organizare tabelară a textului, o grilă de coordonate tabulare și un grafic organizat în tabele.

Facilități de descriere a tabelelor HTML

Odată cu dezvoltarea WWW, a devenit clar că mijloacele care sunt încorporate în NTML nu sunt suficiente pentru afișarea de înaltă calitate a diferitelor tipuri de documente. Dezavantajul НТМL a fost lipsa de facilități de afișare a mesei în compoziția sa. În acest scop, text preformatat (tag

), în care tabelul a fost conturat cu simboluri ASCII. Dar această formă de prezentare a tabelelor nu era de înaltă calitate și ieșea din stilul general al documentului. Odată cu introducerea tabelelor în HTML, webmasterii au nu doar un instrument pentru plasarea textului și numerelor, ci un instrument puternic de proiectare pentru plasarea graficelor și a textului în locul potrivit pe ecran.

Crearea tabelelor în HTML

Eticheta este utilizată pentru a descrie tabele<ТАВLЕ>... Etichetă<ТАВLЕ>ca mulți alții, traduce automat linia înainte și după masă.

Creați rândul tabelului - etichetați<ТR>

Etichetă<ТR> (Rând tabel, rând tabel) creează un rând tabel. Toate textele, alte etichete și atribute care trebuie plasate pe o linie trebuie plasate între etichetele lt; TR\u003e.

Definirea celulelor de masă - Etichetă<ТD>

Celulele cu date sunt plasate de obicei într-un rând de tabel. Fiecare celulă care conține text sau imagine trebuie să fie înconjurată de etichete<ТD>... Numărul de etichete<ТD> pe linie definește numărul de celule

Masa

Dacă un tabel are două etichete TR, atunci are două rânduri.
Dacă există trei etichete TD într-o linie,	apoi în ea	trei coloane.

Anteturi coloană tabel - Etichetă<ТН>

Anteturile pentru coloanele și rândurile tabelului sunt setate folosind eticheta antet<ТН> (Table Neader, titlu de tabel). Aceste etichete sunt ca.<ТD>... Diferența este că textul dintre etichete<ТН>, este scris automat cu caractere aldine și se află în mod implicit în mijlocul celulei. Puteți anula centrarea și alinia textul la stânga sau la dreapta. Dacă folosești<ТD> cu etichetă<В> și atribut<АLIGN=center>, textul va arăta și el ca un titlu. Cu toate acestea, rețineți că nu toate browserele acceptă text aldin în tabele, deci este mai bine să setați anteturile tabelelor folosind<ТН>.

Titlul este centrat în mod implicit	Antetul poate combina coloane
Antetul poate fi plasat înaintea coloanelor	Text sau date	Text sau date
Antetul poate concatena linii	Text sau date	Text sau date
	Text sau date	Text sau date
	Text sau date	Text sau date

Utilizarea antetelor tabelului - etichetați<САРТIОN>

Etichetă vă permite să creați anteturi de tabel. În mod implicit, titlurile sunt centrate și poziționate fie deasupra (<САРТION АLIGN=top>), sau sub masă (<САРТION ALIGN=bottom>). Titlul poate fi orice text și imagini. Textul va fi împărțit în linii care se potrivesc cu lățimea tabelului. Uneori eticheta<САРТION> folosit pentru legenda sub imagine. Pentru a face acest lucru, este suficient să descrieți tabelul fără margini.

Trecând deasupra mesei
Text sau date	Text sau date	Text sau date	Text sau date

Titlu sub tabel
Text sau date	Text sau date	Text sau date

Atribut NOWRAP

De obicei, orice text care nu se încadrează într-o linie a unei celule de tabel este mutat pe linia următoare. Cu toate acestea, atunci când utilizați atributul NOWRAP cu etichete<ТН> sau<ТD> lungimea celulei se extinde astfel încât textul atașat să se potrivească pe o linie.

Atribut COLSPAN

Etichete<ТD> și<ТН> modificat folosind atributul COLSPAN (Column Span). Dacă doriți să faceți o celulă mai lată decât partea superioară sau inferioară, puteți utiliza atributul COLSPAN pentru ao întinde peste orice număr de celule obișnuite.

Dacă doriți să faceți o celulă mai lată decât partea de sus sau de jos,	puteți utiliza atributul СLSPAN \u003d 2,
pentru a-l întinde peste orice număr de celule obișnuite.

Atributul ROWSPAN

Atributul ROWSPAN utilizat în etichete<ТD> și<ТН>, este similar cu atributul COLSPAN \u003d, cu excepția faptului că specifică numărul de rânduri care se întind pe celulă. Dacă ați specificat un număr mai mare decât unul în atributul ROWSPAN \u003d s, atunci numărul corespunzător de rânduri trebuie să fie sub celula întinsă. Nu poate fi plasat în partea de jos a mesei.

Atribut WIDTH

Atributul WIDTH este utilizat în două moduri. O puteți pune într-o etichetă<ТАВLЕ>pentru a da lățimea întregului tabel sau poate fi folosit în etichete<ТD> sau<ТН>pentru a seta lățimea unei celule sau a unui grup de celule. Lățimea poate fi specificată în pixeli sau ca procent. De exemplu, dacă setați eticheta<ТАВLЕ> LĂȚIME \u003d 250, veți obține un tabel cu o lățime de 250 de pixeli, indiferent de dimensiunea paginii de pe monitor. Când setați WIDTH \u003d 50% în etichetă<ТАВLЕ> tabelul va ocupa jumătate din lățimea paginii pentru orice dimensiune a imaginii de pe ecran. Deci, atunci când specificați lățimea unui tabel ca procent, rețineți că, dacă utilizatorul are o fereastră îngustă, pagina dvs. ar putea părea puțin ciudată. Dacă utilizați pixeli și tabelul este mai lat decât ecranul, o bară de derulare apare în partea de jos pentru a vă deplasa la stânga și la dreapta pe pagină. În funcție de sarcina la îndemână, ambele metode de setare a lățimii mesei pot fi utile.

Text sau date - 100% lățime

Text sau date - 50% lățime

Text sau date - 200 pixeli lățime

Text sau date - 100 pixeli lățime

Aplicarea celulelor goale

Dacă o celulă nu conține date, nu va avea margini. Dacă doriți ca o celulă să aibă margini, dar fără conținut, trebuie să introduceți ceva care să nu fie vizibil atunci când este vizualizat. Puteți utiliza o linie goală<ВR>... Puteți defini chiar coloane goale specificând lățimea lor în pixeli sau unități relative și fără a introduce date în celulele rezultate. Acest instrument poate fi util atunci când plasați text și grafică pe o pagină.

Atribut CELLPADDING

Acest atribut definește lățimea spațiului alb dintre conținutul celulei și marginile acesteia, adică stabilește marginile din celulă.

Text sau date	Text sau date	Text sau date
Text sau date	Text sau date	Text sau date

Text sau date	Text sau date	Text sau date
Text sau date	Text sau date	Text sau date

Atributele ALIGN și VALIGN

Etichete<ТR>, <ТD> și<ТН> poate fi modificat folosind atributele ALIGN și VALIGN. Atributul ALIGN determină alinierea orizontală a textului și a graficelor, adică la stânga sau la dreapta sau la centru. Alinierea orizontală poate fi setată în mai multe moduri:

ALIGN \u003d bleedleft apasă conținutul celulei la nivelul marginii stângi.

ALIGN \u003d stânga Aliniază conținutul celulei la stânga, luând în considerare indentarea specificată de atributul CELLPADDING.

ALIGN \u003d centru centrează conținutul celulei.

ALIGN \u003d dreapta aliniază dreapta conținutul celulei cu umplutura specificată de atributul CELLPADDING.

Text sau date	Text sau date	Text sau date
Text sau date	Text sau date	Text sau date
Text sau date	Text sau date	Text sau date
Text sau date	Text sau date	Text sau date
Text sau date	Text sau date	Text sau date

Atributul VALIGN aliniază vertical textul și grafica într-o celulă. Alinierea verticală poate fi specificată în mai multe moduri:

VALIGN \u003d sus aliniază conținutul unei celule la marginea sa superioară.

VALIGN \u003d mijloc centrează conținutul celulei pe verticală.

VALIGN \u003d jos aliniază conținutul unei celule la marginea sa inferioară.

Atributul VALIGN aliniază vertical textul și grafica într-o celulă.	top,	mijloc,	fund.
VALIGN \u003d sus Aliniază conținutul celulei la marginea sa superioară.	top,	top,	top.
VALIGN \u003d mijloc Centrează conținutul celulei pe verticală.	mijloc,	mijloc,	mijloc.
VALIGN \u003d jos Aliniază conținutul celulei la marginea sa de jos.	fund,	fund,	fund.

Atribut BORDER

În etichetă<ТАВLЕ> determină adesea cum vor arăta cadrele, adică liniile care înconjoară celulele mesei și masa în sine. Dacă nu specificați o margine, veți obține un tabel fără linii, dar va exista spațiu pentru ele. Același rezultat poate fi obținut prin setare<ТАВLЕ ВОRDER=0>... Uneori doriți să faceți marginea mai groasă pentru a o face să iasă mai bine în evidență. Puteți seta margini excepțional de îndrăznețe pentru a atrage atenția asupra unei imagini sau a unui text. Când creați tabele imbricate, trebuie să creați margini de diferite grosimi pentru diferite tabele pentru a face mai ușor să le deosebiți.

Atribut CELLSPACING

Atributul CELLSPACING specifică lățimea spațiilor dintre celule în pixeli. Dacă acest atribut nu este specificat, valoarea implicită este de doi pixeli. Atributul CELLSPACING \u003d vă permite să plasați text și grafică oriunde doriți. Dacă doriți să lăsați un spațiu gol, puteți introduce un spațiu în celulă.

Text sau date	Text sau date	Text sau date
Text sau date	Text sau date	Text sau date

Text sau date	Text sau date	Text sau date
Text sau date	Text sau date	Text sau date

Text sau date	Text sau date	Text sau date
Text sau date		Text sau date

Atribut BGCOLOR

Acest atribut vă permite să setați culoarea de fundal. În funcție de eticheta (TABLE, TR, TD) cu care se aplică, culoarea de fundal poate fi setată pentru întregul tabel, pentru un rând sau pentru o singură celulă. Valoarea acestui atribut este un cod RGB sau un nume de culoare standard.

Text sau date	Text sau date	Text sau date
Text sau date	Text sau date	Text sau date

Atribut CONTEXT

Acest atribut setează imaginea de fundal pentru tabele. Aplicabil etichetelor TABLE și TD. Valoarea sa este adresa URL a fișierului de imagine de fundal. Utilizarea acestui atribut este discutată mai jos.

Utilizarea tabelelor în proiectarea paginilor

Lucrul bun despre tabele este că le puteți face granițele invizibile, dacă doriți. Acest lucru permite utilizarea etichetei<ТАВLЕ> plasați frumos text și grafică pe pagină. În timp ce eticheta<ТАВLЕ> rămâne singurul instrument puternic de formatare în HTML. Proiectanții de pagini web au acum aproape aceeași libertate de a folosi „spațiul alb” ca și creatorii paginilor tipărite. Tabelele sunt cel mai bun mod de a vă îndepărta de plasarea ierarhică a textului pe paginile Web.

Dacă browserul acceptă tabele, de obicei afișează corect cele mai interesante efecte obținute cu acestea.

Universitatea Pedagogică de Stat din Ural

Bine ati venit!

Curs de instruire „Bazele masterizării WEB”

Crearea de mese colorate

Unele browsere permit afișarea culorilor. Există mai multe moduri de a colora masa, acestea depind în mare parte de browserul utilizat.

Borduri colorate în Netscape Navigator. Nu puteți înconjura masa doar cu un cadru frumos, dar puteți seta și o culoare diferită de culorile textului și a fundalului. Creați un GIF simplu gri (sau orice GIF doriți să aveți ca fundal) și definiți-l în etichetă<ВODY> ca fundal al paginii. Apoi setați culoarea de fundal a paginii. Ca urmare, eticheta dvs.<ВОDY> va arăta cam așa:

Ați creat un fundal dublu - GIF și o culoare dată. Ca rezultat, culoarea de fundal va fi vizibilă pe toate marginile mesei și pe liniile orizontale (<НR>). Indiferent dacă GIF-ul dvs. de fundal este sau nu gri, liniile și marginile colorate ale tabelelor vor ieși în evidență. Dacă GIF de fundal nu este prea complex, timpul de încărcare a paginii va crește doar ușor.

CSS vă permite să setați nu numai stilul de chenar al tabelului, ci și stilul chenarelor de celule individuale. Deoarece fiecare celulă are propriile margini, granița dintre celulele adiacente este dublată. Dar este posibil să fuzionăm marginile celulelor vecine într-una singură. Pentru aceasta există o proprietate de colapsare a frontierelor. Preia valorile:

border-collapse: separate - fiecare celulă are propriul său border (implicit)

border-collapse: colaps - frontiera generală

border-collapse: mostenire - valoarea este preluată din elementul părinte

De exemplu, să creăm un tabel și să setăm un cadru pentru celulele tuturor tabelelor care vor fi pe pagină. Mai întâi, să nu schimbăm nimic pentru a vedea cum va arăta tabelul:

Stil:

... În practică, există momente în care aveți nevoie de o formatare specială a coloanei, care este posibilă în următoarele moduri:

folosind eticheta

Puteți seta fundalul pentru orice număr de coloane;

folosind tabelul td: primul copil, tabelul td: selectorul ultimului copil, puteți stiliza prima sau ultima coloană a tabelului (cu excepția primei celule a antetului tabelului);

folosind selectorul de masă td: nth-child (regula de selecție a coloanelor), puteți stiliza orice coloane din tabel.

Puteți citi mai multe despre selectoarele CSS.

5. Cum se adaugă un titlu de tabel

Puteți adăuga un titlu în tabel folosind eticheta

1
2
3
4
5
6

Pagină

Celula din stânga sus	Celula din dreapta sus
Celula din stânga jos	Celula din dreapta jos

Rezultatul în browser:

Acum să adăugăm margini pentru fiecare celulă. Pentru a face acest lucru, trebuie doar să adăugați stilurile:

Rezultatul în browser:

Cum se elimină umplerea între celule în tabelul HTML

Sunt de acord că un chenar definit cu CSS nu are același aspect pe care l-ați dori. Fără îndoială, din punct de vedere al esteticii, există de lucru. În pagina browserului, puteți vedea că în mod implicit afișează separat marginile tabelelor și celulelor. Un exemplu demonstrează clar acest lucru.

Cu toate acestea, este destul de posibil să scăpăm de astfel de frontiere, care se numesc duble, dacă folosim proprietatea CSS border-collapse. În practică, arată astfel:

Tabel (chenar: albastru solid 1 px; bordură-colaps: colaps;) ...

Ca rezultat, distanța dintre celule este eliminată:

Valoarea de colaps atribuită atributului de margine elimină marginile duble. După cum puteți vedea, rezultatul este o prăbușire a marginilor celulei adiacente, precum și a marginilor celulei și a marginii externe a tabelului. Cât despre acesta din urmă, acesta poate fi eliminat cu totul. Și dacă este nevoie să-l afișați, trebuie să-i măriți lățimea. Astfel, am scăpat de separatoarele din tabel. În lecția următoare, vom vorbi despre modul în care puteți seta margini verticale și orizontale. Noroc tuturor!

Specificația CSS oferă posibilități nelimitate pentru proiectarea tabelelor. În mod implicit, tabelul și celulele tabelului nu au margini și fundaluri vizibile, iar celulele din tabel nu sunt adiacente una cu cealaltă.

Lățimea celulelor tabelului este determinată de lățimea conținutului acestora, astfel încât lățimea coloanelor tabelului poate fi diferită. Înălțimea tuturor celulelor dintr-un rând este aceeași și este determinată de înălțimea celei mai înalte celule.

Formatarea tabelelor

1. Bordul bordurilor tabelului

Tabelul și celulele din interiorul acestuia sunt afișate în browser fără margini vizibile în mod implicit. Bordurile tabelului setate de proprietatea de frontieră:

Tabel (border-collapse: colaps; / * eliminați spațiile goale dintre celule * / border: 1 px gri solid; / * setați o margine exterioară de 1 px gri pentru tabel * /)

Bordurile celulei antet fiecare coloană este setată pentru al treilea element:

Th (chenar: 1 px gri solid;)

Bordurile celulei corpurile mesei sunt setate pentru elementul td:

Td (chenar: 1 px gri solid;)

Lățimea chenarelor celulelor adiacente nu este dublată, deci puteți seta chenarele pentru întregul tabel în felul următor:

Th, td (chenar: 1 px gri solid;)

Bordura exterioară a tabelului poate fi selectată dându-i o lățime crescută:

Tabel (chenar: 3 px gri solid;)

Frontierele pot fi setate parțial:

/ * setați o margine exterioară gri de 3 px pentru masă * / table (border-top: 3px gri solid;) / * setați o margine gri de 1 px pentru celula corpului mesei * / td (border-bottom: 1 px gri solid;)

Puteți citi mai multe despre proprietatea de frontieră.

2. Cum se setează lățimea și înălțimea mesei

Mod implicit lățimea și înălțimea mesei este determinat de conținutul celulelor sale. Dacă nu este specificată nicio lățime, aceasta va fi egală cu lățimea celui mai lat rând (rând).

Lățimea tabelului și a coloanei setat folosind proprietatea width. Dacă tabelul (lățimea: 100%;) este specificat pentru o masă, atunci lățimea mesei va fi egală cu lățimea blocului de containere în care se află.

Lățimea tabelului și a coloanelor este de obicei specificată în px sau%, de exemplu:

Tabel (lățime: 600 px;) al treilea (lățime: 20%;) td: primul copil (lățime: 30%;)

Înălțimea mesei nu setat. Înălțimea rândurilor mesele pot fi manipulate prin adăugarea căptușelilor superioare și inferioare elementelor

și

... Nu este recomandată fixarea înălțimii folosind proprietatea înălțime.

Th, td (umplutură: 10 px 15 px;)

3. Cum se setează fundalul tabelului

Mod implicit fundalul mesei iar celulele sunt transparente. Dacă pagina sau blocul care conține tabelul are un fundal, atunci acesta va străluci prin tabel. Dacă fundalul este setat atât pentru tabel cât și pentru celule, atunci doar fundalul celulelor va fi vizibil în locurile în care fundalul tabelului și celulele se suprapun. Fundalul tabelului în ansamblu și al celulelor sale poate fi:
completati,
,
.

4. Coloane de tabel

Modelul de tabel CSS este axat în principal pe șiruri (rânduri) formate folosind o etichetă

, iar cu proprietatea pe partea de subtitrare poate fi plasat în fața sau sub masă. Proprietatea text-align este utilizată pentru a alinia orizontal textul titlului. Mostenit.

...

Tabelul nr. 1
Companie	Q1	Q2	Q3	Q4

subtitrare (caption-side: bottom; text-align: right; padding: 10px 0; font-size: 14px;)

Figura: 2. Un exemplu de afișare a antetului sub masă

6. Cum se elimină decalajul dintre cadrele celulei

În mod implicit, marginile celulelor tabelului sunt separate de un spațiu mic. Dacă setăm border-collapse: colaps pentru tabel, atunci gap-ul va fi eliminat. Proprietatea este moștenită.

Sintaxă

Tabel (border-colaps: colaps;)
Figura: 3. Un exemplu de tabele cu borduri de celule care fuzionează și împart

7. Cum se mărește distanța dintre marginile celulei

Utilizând proprietatea de spațiere a chenarului, puteți modifica distanța dintre marginile celulei. Această proprietate se aplică tabelului ca întreg. Mostenit.

Sintaxă

Table (border-colaps: separat; border-spacing: 10px 20px;) tabel (border-colaps: separat; border-spacing: 10px;)
Figura: 4. Un exemplu de tabele cu decalaje crescute între cadrele de celule

8. Cum se ascund celulele de tabel goale

Proprietatea de celule goale ascunde sau afișează celule goale. Afectează numai celulele care nu conțin niciun conținut. Dacă este specificat un fundal pentru o celulă, iar tabelul (border-collapse: collapse;) este specificat pentru o tabelă, atunci celula nu va fi ascunsă. Mostenit.

Companie	Q1	Q2	Q3
Microsoft	20.3	30.5
Google	50.2	40.63	45.23

tabel (chenar: 1px solid # 69c; border-collapse: separat; gol-celule: ascunde;) th, td (chenar: 2px solid # 69c;)

Figura: 5. Un exemplu de ascundere a unei celule de tabel goale

9. Aspectarea tabelului cu ajutorul proprietății tabel-aspect

Aspectul unui aspect de tabel este determinat de una dintre cele două abordări: aspect fix sau aspect automat. Aspectul în acest caz înseamnă modul în care lățimea tabelului este distribuită între lățimea celulelor. Proprietatea nu este moștenită.

Sintaxă

Tabel (dispunerea tabelului: fix;)

10. Cele mai bune machete

1. Minimalism orizontal

Tabelele orizontale sunt tabele în care textul este citit orizontal. Fiecare entitate este o linie separată. Puteți stiliza astfel de mese într-un stil minimalist plasând o margine de doi pixeli sub titlul al treilea.

Angajat	Salariu	Primă	Supervizor
Stephen C. Cox	$300	$50	Bob
Josephin tan	$150	-	Annie
Joyce ming	$200	$35	Andy
James A. Pentel	$175	$25	Annie

tabel (font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; background: white; max-width: 70%; width: 70%; border-collapse: colaps; text -align: left;) th (font-weight: normal; color: # 039; border-bottom: 2px solid # 6678b1; padding: 10px 8px;) td (color: # 669; padding: 9px 8px; transition: .3s liniar;) tr: hover td (culoare: # 6699ff;)

Cu un număr mare de rânduri, acest design face ca tabelele să fie greu de citit. Pentru a rezolva această problemă, puteți adăuga o margine de un pixel sub toate elementele td.

Td (frontieră: 1px solid #ccc; culoare: # 669; umplutură: 9px 8px; tranziție: .3s liniar;) / * restul codului - ca în exemplul de mai sus * /

Adăugarea unui efect hover la elementul tr face ca tabelele cu stil minimalist să fie mai ușor de citit. Când plasați cursorul mouse-ului peste o celulă, restul celulelor din același rând sunt evidențiate în același timp, ceea ce face mai ușor să urmăriți informațiile dacă tabelele au mai multe coloane.

Th (font-weight: normal; color: # 039; padding: 10px 15px;) td (color: # 669; border-top: 1px solid # e8edff; padding: 10px 15px;) tr: hover td (background: # e8edff ;)

2. Minimalism vertical

Deși astfel de tabele sunt rareori folosite, tabelele orientate vertical sunt utile pentru clasificarea sau compararea descrierilor obiectelor reprezentate de o coloană. Le puteți stiliza într-un stil minimalist adăugând un spațiu de separare a coloanelor.

Th (font-weight: normal; border-bottom: 2px solid # 6678b1; border-right: 30px solid #fff; border-left: 30px solid #fff; color: # 039; padding: 8px 2px;) td (border- dreapta: 30px solid #fff; bordură-stânga: 30px solid #fff; culoare: # 669; umplutură: 12px 2px;)

3. Stilul „Cutie”

Cel mai fiabil stil pentru decorarea meselor de toate tipurile este așa-numitul stil „cutie”. Este suficient să alegeți o schemă de culori bună și apoi să setați culoarea de fundal pentru toate celulele. Nu uitați să subliniați diferența dintre linii prin setarea de margini ca separatoare.

Th (font-size: 13px; font-weight: normal; background: # b9c9fe; border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; color: # 039; padding: 8px;) td (background : # e8edff; border-bottom: 1px solid #fff; color: # 669; border-top: 1px solid transparent; padding: 8px;) tr: hover td (background: #ccddff;)

Cel mai dificil lucru este să găsești schema de culori care să se amestece armonios cu site-ul tău. Dacă site-ul este încărcat cu grafică și design, atunci îți va fi destul de dificil să folosești acest stil.

Tabel (font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; max-width: 70%; width: 70%; text-align: center; border-collapse: colaps ; border-top: 7px solid # 9baff1; border-bottom: 7px solid # 9baff1;) th (font-size: 13px; font-weight: normal; background: # e8edff; border-right: 1px solid # 9baff1; border- stânga: 1px solid # 9baff1; culoare: # 039; umplutură: 8px;) td (fundal: # e8edff; bordură-dreapta: 1px solid #aabcfe; bordură-stânga: 1px solid #aabcfe; culoare: # 669; umplutură: 8px ;)

4. Zebră orizontală

Masa Zebra arată destul de atractivă și la îndemână. Culoarea de fundal complementară poate servi drept indiciu vizual pentru ca oamenii să citească tabelul.

Th (font-weight: normal; color: # 039; padding: 10px 15px;) td (color: # 669; border-top: 1px solid # e8edff; padding: 10px 15px;) tr: nth-child (2n) ( fundal: # e8edff;)

5. Stil de ziar

Pentru a obține așa-numitul efect de ziar, puteți aplica margini elementelor de masă și vă puteți juca cu celulele din interior. Un stil de ziar ușor și minimalist ar putea arăta astfel: jucați-vă cu schema de culori, adăugați chenare, căptușeală, fundaluri diferite și un efect: hover asupra plutirii peste o linie.

Tabel (margine: 1px solid # 69c;) th (font-weight: normal; culoare: # 039; border-bottom: 1px punctat # 69c; umplutură: 12px 17px;) td (culoare: # 669; umplutură: 7px 17px; ) tr: hover td (fundal: #ccddff;)

Tabel (margine: 1px solid # 69c;) th (font-weight: normal; color: # 039; padding: 10px;) td (color: # 669; border-top: 1px punctat #fff; padding: 10px; background: #ccddff;) tr: hover td (background: # 99bcff;)

Tabel (margine: 1px solid # 6cf;) th (font-weight: normal; font-size: 13px; color: # 039; text-transform: majuscule; border-right: 1px solid # 0865c2; border-top: 1px solid # 0865c2; border-left: 1px solid # 0865c2; border-bottom: 1px solid #fff; padding: 20px;) td (culoare: # 669; border-right: 1px punctat # 6cf; padding: 10px 20px;)

6. Fundalul tabelului

Dacă sunteți în căutarea unui mod rapid și unic de a vă stiliza masa, alegeți o imagine atractivă sau o fotografie legată de tema mesei și setați-o ca fundal al mesei.

Png ") 98% 86% fără repetare;) th (font-weight: normal; font-size: 14px; color: # 339; padding: 10px 12px; background: white;) td (color: # 669; border- sus: 1px alb solid; căptușeală: 10px 12px; fundal: rgba (51, 51, 153, .2); tranziție: .3s;) tr: hover td (fundal: rgba (51, 51, 153, .1); )