Specificația CSS oferă posibilități nelimitate pentru proiectarea tabelelor. În mod implicit, un tabel și celulele tabelului nu au margini sau fundal vizibile, iar celulele dintr-un tabel nu se așează una aproape de alta.

Lățimea celulelor tabelului este determinată de lățimea conținutului lor, 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 tabelului

1. Chenarele tabelului

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

Tabel (border-collapse: colaps; /*eliminare spatii libereîntre celule*/ chenar: 1px gri solid; /*setează chenarul exterior pentru tabel culoarea gri gros 1px*/)

Frontierele celulei antet fiecare coloană este setată pentru al-lea element:

Th (chenar: 1px gri solid;)

Marginile celulei corpurile de tabel sunt specificate pentru elementul td:

Td (chenar: 1px gri solid;)

Grosimea marginilor celulelor adiacente nu este dublată, așa că puteți seta marginile întregului tabel în felul următor:

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

Chenarul exterior al unui tabel poate fi evidențiat oferindu-i o lățime crescută:

Tabel (chenar: 3px gri solid;)

Frontierele pot fi setate parțial:

/* setează un chenar exterior gri de 3 px pentru tabel */ tabel (border-top: 3px solid gri; ) /* setează un chenar gri de 1px pentru celula corpului tabelului */ td (border-bottom: 1px solid gri;)

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

2. Cum să setați lățimea și înălțimea mesei

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

Lățimi de tabel și coloane setați folosind proprietăți de lățime. Dacă tabelul este setat la table (lățime: 100%;) , atunci lățimea tabelului va fi egală cu lățimea blocului container în care se află.

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

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

Înălțimea mesei nu setat. înălțimea rândului tabelele pot fi manipulate prin adăugarea elementelor de umplutură de sus și de jos și . Fixarea înălțimii cu proprietatea înălțime nu este recomandată.

Th, td (padding: 10px 15px;)

3. Cum să setați fundalul tabelului

Mod implicit fundal de masă iar celulele transparente. Dacă pagina sau blocul care conține tabelul are un fundal, acesta va apărea prin tabel. Dacă fundalul este setat atât pentru tabel, cât și pentru celule, atunci în locurile în care se suprapun fundalul tabelului și al celulelor, va fi vizibil doar fundalul celulelor. Fundalul tabelului ca întreg și al celulelor acestuia poate fi:
umplere,
,
.

4. Coloane de tabel

Model Tabelele CSS concentrat în principal pe rânduri (rânduri) formate folosind eticheta

. În practică, există momente când este necesar formatare specială coloane, care este posibil în următoarele moduri:

folosind eticheta

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

folosind tabelul de selecție td:first-child , table td:last-child , puteți seta stiluri pentru prima sau ultima coloană a tabelului (cu excepția primei celule a antetului tabelului);

folosind selectorul de tabel td:nth-child (regula de selecție a coloanelor) puteți seta stiluri pentru orice coloană a tabelului.

Puteți citi mai multe despre selectoarele CSS.

5. Cum să adăugați un titlu la un tabel

Puteți adăuga un antet la un tabel folosind eticheta , iar folosind proprietatea caption-side, poate fi plasat înainte sau sub tabel. Pentru a alinia orizontal textul titlului, utilizați proprietatea text-align. Mostenit.

...

Tabelul nr. 1

companie	Î1	Q2	Q3	Î4

subtitrare ( partea de subtitrare: jos; aliniere text: dreapta; umplutură: 10px 0; dimensiunea fontului: 14px; ) Orez. 2. Un exemplu de afișare a titlului sub tabel

6. Cum să eliminați decalajul dintre cadrele celulare

Marginile celulelor tabelului sunt separate printr-un mic spațiu implicit. Dacă setați border-collapse: collapse pentru tabel, atunci decalajul va fi eliminat. Proprietatea este moștenită.

Sintaxă

Tabel (border-collapse: collapse;)
Orez. 3. Un exemplu de tabele cu chenarele celulelor de îmbinare și împărțite

7. Cum să măriți distanța dintre marginile celulelor

Prin intermediul proprietăți de frontieră-spațierea poate modifica distanța dintre marginile celulei. Această proprietate se aplică tabelului ca întreg. Mostenit.

Sintaxă

Tabel (border-collapse: separat; border-spacing: 10px 20px;) tabel (border-collapse: separat; border-spacing: 10px;) Orez. 4. Un exemplu de tabele cu spații crescute între cadrele de celule

8. Cum să ascundeți celulele goale ale tabelului

Proprietatea celule goale ascunde sau arată celulele goale. Afectează numai celulele care nu conțin niciun conținut. Dacă celula este setată pe fundal și tabelul este setat pe tabel (border-collapse: collapse;) , atunci celula nu va fi ascunsă. Mostenit.

companie	Î1	Q2	Q3
Microsoft	20.3	30.5
Google	50.2	40.63	45.23

tabel (chenar: 1px solid #69c; chenar-restrângere: separat; celule goale: ascunde; ) th, td (bord: 2px solid #69c;) Orez. 5. Un exemplu de ascundere a unei celule goale de tabel

9. Dispunerea tabelului cu proprietatea table-layout

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

Sintaxă

Tabel (aspect de masă: fix;)

10. Cele mai bune modele de masă

1. Minimalism orizontal

Tabelele orizontale sunt tabele al căror text se citește orizontal. Fiecare entitate este o linie separată. Puteți stila aceste tabele într-un stil minimalist, plasând un chenar de doi pixeli sub al-lea titlu.

angajat	Salariu	Primă	supraveghetor
Stephen C. Cox	$300	$50	Bob
Josephine Tan	$150	-	Annie
Joyce Ming	$200	$35	Andy
James A. Pentel	$175	$25	Annie

tabel (familie de fonturi: „Lucida Sans Unicode”, „Lucida Grande”, Sans-Serif; dimensiunea fontului: 14px; fundal: alb; lățime maximă: 70%; lățime: 70%; restrângere chenar: restrângere; text -align: left; ) th ( font-weight: normal; culoare: #039; chenar-bottom: 2px solid #6678b1; padding: 10px 8px; ) td (color: #669; padding: 9px 8px; tranziție: .3s liniar; ) tr:hover td (culoare: #6699ff;)

La în număr mare rândurile acest design tabel le face dificil de citit. Pentru a rezolva această problemă, puteți adăuga un chenar de un pixel sub toate elementele td.

Td ( chenar-jos: 1px solid #ccc; culoare: #669; umplutură: 9px 8px; tranziție: .3s liniar; )/*alt cod ca mai sus*/

Adăugarea unui efect :hover la elementul tr va facilita citirea tabelelor minimaliste. Când treceți cu mouse-ul peste o celulă, restul celulelor din același rând sunt selectate în același timp, ceea ce face mai ușor să țineți evidența informațiilor dacă tabelele au mai multe coloane.

Th (greutate font: normal; culoare: #039; umplutură: 10px 15px; ) td (culoare: #669; chenar-sus: 1px solid #e8edff; umplutură: 10px 15px; ) tr:hover td (fond: #e8edff ;)

2. Minimalism vertical

Deși astfel de tabele sunt rar utilizate, tabelele orientate vertical sunt totuși utile pentru clasificarea sau compararea descrierilor obiectelor reprezentate de o coloană. Le puteți stila într-un stil minimalist adăugând un spațiu pentru a separa coloanele.

Th (greutate font: normal; chenar-jos: 2px solid #6678b1; chenar-dreapta: 30px continu #fff; chenar-stânga: 30px solid #fff; culoare: #039; umplutură: 8px 2px; ) td ( chenar- dreapta: 30px solid #fff; chenar-stânga: 30px solid #fff; culoare: #669; umplutură: 12px 2px; )

3. Stilul „la cutie”.

Cel mai de încredere stil pentru proiectarea meselor de toate tipurile este așa-numitul stil „cutie”. Este suficient să alegi un bun schema de culori, apoi setați culoarea de fundal pentru toate celulele. Nu uitați să subliniați diferența dintre linii prin stabilirea granițelor ca delimitator.

Th ( dimensiunea fontului: 13px; greutatea fontului: normal; fundal: #b9c9fe; chenar-sus: 4px solid #aabcfe; chenar-bottom: 1px solid #fff; culoare: #039; umplutură: 8px; ) td ( fundal : #e8edff; chenar-jos: 1px solid #fff; culoare: #669; chenar-sus: 1px solid transparent; umplutură: 8px; ) tr:hover td (fond: #ccddff;)

Cel mai dificil lucru este să găsești schema de culori potrivită care să se îmbine 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 (familie de fonturi: „Lucida Sans Unicode”, „Lucida Grande”, Sans-Serif; dimensiunea fontului: 14px; lățime maximă: 70%; lățime: 70%; alinierea textului: centru; restrângere chenar: restrângere ; chenar-sus: 7px solid #9baff1; chenar-jos: 7px solid #9baff1; ) th (dimensiunea fontului: 13px; greutatea fontului: normal; fundal: #e8edff; chenar-dreapta: 1px solid #9baff1; chenar- stânga: 1px solid #9baff1; culoare: #039; umplutură: 8px; ) td ( fundal: #e8edff; chenar-dreapta: 1px solid #aabcfe; chenar-stânga: 1px solid #aabcfe; culoare: #669; căptușeală: 8px ;)

4. Zebră orizontală

Masa cu zebră arată destul de atractivă și confortabilă. Culoarea opțională de fundal poate servi drept indiciu vizual pentru ca oamenii să citească tabelul.

Th ( greutate font: normal; culoare: #039; umplutură: 10px 15px; ) td ( culoare: #669; chenar-sus: 1px solid #e8edff; umplutură: 10px 15px; ) tr:nth-child(2n) ( fundal: #e8edff;)

5. Stilul ziarului

Pentru a obține așa-numitul efect de ziar, puteți aplica chenare elementelor tabelului și puteți juca cu celulele din interior. Un stil de ziar ușor și minimalist ar putea arăta astfel: jucați-vă cu culorile, adăugați chenaruri, căptușeală, medii diferite, și efectul :hover atunci când treceți cu mouse-ul peste rând.

Tabel (chenar: 1px solid #69c;) th (greutate font: normal; culoare: #039; chenar-jos: 1px punct #69c; umplutură: 12px 17px; ) td (culoare: #669; umplutură: 7px 17px; ) tr:hover td (fond: #ccddff;)

Tabel (chenar: 1px solid #69c;) th (greutate font: normal; culoare: #039; umplutură: 10px; ) td (culoare: #669; margine-sus: 1px întreruptă #fff; umplutură: 10px; fundal: #ccddff; ) tr:hover td (fond: #99bcff;)

Tabel (chenar: 1px solid #6cf;) th ( font-weight: normal; font-size: 13px; culoare: #039; text-transform: majuscule; chenar-dreapta: 1px solid #0865c2; chenar-sus: 1px solid #0865c2; chenar-stânga: 1px solid #0865c2; chenar-jos: 1px solid #fff; umplutură: 20px; ) td (culoare: #669; chenar dreapta: 1px întreruptă #6cf; umplutură: 10px 20px; )

6. Fundalul tabelului

Dacă sunteți în căutarea unui rapid și mod unic aspectul tabelului, selectați imagine atractivă sau fotografie legată de tema mesei și setați-o ca fundal al mesei.

Jpg") fără repetare; poziția fundalului: 100% 55px; ) th (greutatea fontului: normal; culoare: #339; umplutură: 10px 12px; ) td ( fundal: url("https://site-ul/imagini/) spate..png"); fundal: transparent; )

Această prelegere oferă o privire detaliată asupra modului în care tabelele sunt utilizate în marcajul HTML. Aceasta este o organizare tabelară a textului și o grilă de coordonate tabelară și grafice organizate în tabele.

Mijloace de descriere a tabelelor în HTML

La fel de Dezvoltare WWW a devenit clar că instrumentele care sunt încorporate în HTML nu sunt suficiente pentru afișarea de înaltă calitate tipuri variate documente. Dezavantajul HTML a fost lipsa facilităților de afișare a tabelelor în structura sa. În acest scop, textul preformatat (eticheta

), în care tabelul a fost conturat cu caractere ASCII.  Dar această formă de prezentare pe masă nu a fost suficientă Calitate superioarăși a ieșit din stilul general al documentului.  Odată cu introducerea tabelelor în HTML, webmasterii au acum nu doar un instrument pentru plasarea textului și numerelor, ci și un instrument puternic de design pentru a le plasa în locul potrivit ecran de grafică și text.

Crearea tabelelor în HTML
Eticheta este folosită pentru a descrie tabelele.<ТАВLЕ>.  Etichetă<ТАВLЕ>, ca multe altele, traduce automat linia de dinainte și de după tabel.
Crearea unui rând de tabel - etichetă<ТR>
Etichetă<ТR>(Table Row, table row) creează un rând de tabel.  Toate textul, alte etichete și atribute care trebuie plasate pe o singură linie trebuie plasate între etichetele lt;TR>..
Definirea celulelor tabelului - Etichetă<ТD>
Celulele cu date sunt de obicei plasate î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>într-un rând specifică numărul de celule

 

 
masa
 
 

 

 
Dacă tabelul are două etichete TR, atunci are două rânduri.
 
 

 
Dacă sunt trei într-o linie etichetați TD,
 
apoi în ea
 
trei coloane.
 
 
 


 
Anteturi de coloană de tabel - etichetă<ТН>
Titlurile pentru coloanele și rândurile unui tabel sunt stabilite folosind eticheta de antet<ТН>(Antet tabel, antet tabel).  Aceste etichete sunt ca<ТD>.  Diferența este că textul inclus între etichete<ТН>, este scris automat cu caractere aldine și este poziționat implicit în mijlocul celulei.  Puteți anula centrarea și alinierea textului la stânga sau la dreapta.  Dacă utilizați<ТD>cu eticheta<В>si atribut<АLIGN=center>, textul va arăta și ca un titlu.  Cu toate acestea, rețineți că nu toate browserele acceptă în tabele font aldine, deci este mai bine să setați anteturile tabelului cu<ТН>.

 

 

 

 
Titlul este centrat în mod implicit
 
Antetul poate cuprinde 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 de tabel - tag<САРТIОN>
Etichetă vă permite să creați anteturi de tabel.  În mod implicit, titlurile sunt centrate și plasate fie deasupra (<САРТION АLIGN=top>), sau sub masă (<САРТION ALIGN=bottom>).  Titlul poate consta din orice text și imagini.  Textul va fi împărțit în linii corespunzătoare lățimii tabelului.  uneori etichetați<САРТION>folosit pentru legenda figurii.  Pentru a face acest lucru, este suficient să descrieți un tabel fără margini.

 

 

 
Titlul deasupra tabelului
 

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

 
Titlu sub tabel
 

 
Text sau date
 
Text sau date
 
Text sau date
 
 


Atributul NOWRAP
De obicei, orice text care nu se încadrează într-o linie a celulei unui tabel merge la rândul următor.  Cu toate acestea, atunci când utilizați atributul NOWRAP cu etichete<ТН>sau<ТD>lungimea celulei este extinsă astfel încât textul conținut în ea să se încadreze pe o singură linie.
Atributul COLSPAN
Etichete<ТD>și<ТН>sunt modificate folosind atributul COLSPAN (Column Span).  Dacă doriți să faceți orice celulă mai lată decât cea de sus sau de jos, puteți utiliza atributul COLSPAN pentru a o întinde peste orice număr de celule normale.

 

 

 

 

 
Dacă doriți să faceți orice celulă mai lată decât partea de sus sau de jos,
 
puteți folosi atributul COLSPAN=2,
 
 

 
pentru a-l întinde peste orice număr de celule normale.
 
 
 


Atributul ROWSPAN
Atributul ROWSPAN utilizat în etichete<ТD>și<ТН>, este similar cu atributul COLSPAN=, cu excepția faptului că specifică numărul de linii pe care o va cuprinde celula.  Dacă specificați un număr mai mare decât unu în atributul ROWSPAN=s, atunci numărul corespunzător de rânduri trebuie să fie sub celula extinsă.  Nu poate fi plasat în partea de jos a mesei.
Atributul WIDTH
Atributul WIDTH are două utilizări.  Îl poț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Е>WIDTH=250, veți obține un tabel lat de 250 pixeli, indiferent de dimensiunea ecranului paginii.  Când setați WIDTH=50% în etichetă<ТАВLЕ>tabelul va lua jumătate din lățimea paginii la orice dimensiune a imaginii de pe ecran.  Deci, atunci când specificați lățimea tabelului ca procent, rețineți că, dacă utilizatorul are o fereastră de vizualizare îngustă, pagina dvs. poate arăta puțin ciudată.  Dacă utilizați pixeli și tabelul este mai lat decât fereastra de vizualizare, va apărea o bară de defilare în partea de jos pentru a vă deplasa la stânga și la dreapta pe pagină.  În funcție de sarcinile la îndemână, orice mod de a seta lățimea mesei poate fi util.

 

 

 

 
Text sau date - 100% lățime
 
 
 sau 

 

 

 
Text sau date - 50% lățime
 
 
 sau 

 

 

 
Text sau date - 200 px lățime
 
 
 sau 

 

 

 
Text sau date - 100 px 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ă puneți ceva în ea care nu va fi vizibil când este vizualizat.  Poți să folosești Șir gol <ВR>.  Puteți chiar să definiți coloane goale specificând lățimea lor în pixeli sau unități relativeși fără a introduce date în celulele primite.  Acest instrument poate fi util atunci când plasați text și elemente grafice pe o pagină.
Atributul CELLRADDING
Acest atribut specifică lățimea spațiului gol dintre conținutul celulei și marginile acesteia, adică setează marginile din interiorul celulei.

 

 

 

 

 
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 cu Alinierea atributelorși VALIGN. Atributul ALIGN definește alinierea orizontală a textului și a graficelor, adică la stânga, la dreapta sau la centru. Aliniere orizontala poate fi specificat în mai multe moduri:
ALIGN=sângerare la stângaîmpinge conținutul celulei aproape de marginea stângă.
ALIGN=stânga Aliniază conținutul celulei la stânga, ținând cont de indentarea specificată de atributul CELLPADDING.
ALIGN=centru centrați conținutul celulei.
ALIGN=dreapta Aliniază conținutul celulei la dreapta, ținând cont de indentarea 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 graficele dintr-o celulă. Aliniere verticală poate fi specificat în mai multe moduri:
VALIGN=sus Aliniază conținutul unei celule la chenarul superior al acesteia.
VALIGN=mijloc Centrează conținutul celulei pe verticală.
VALIGN=de jos Aliniază conținutul unei celule la chenarul inferior.

 

 

 

 

 
Atributul VALIGN aliniază vertical textul și graficele dintr-o celulă.
 
top,
 
mijlocul,
 
fund.
 
 

 
VALIGN=top Aliniază conținutul celulei la marginea de sus.
 
top,
 
top,
 
top.
 
 

 
VALIGN=middle Centrează conținutul celulei pe verticală.
 
mijlocul,
 
mijlocul,
 
mijloc.
 
 

 
VALIGN=bottom Aliniază conținutul celulei la marginea de jos.
 
fund,
 
fund,
 
fund.
 
 
 


Atribut BORDER
În etichetă<ТАВLЕ>adesea determină cum vor arăta marginile, adică liniile care înconjoară celulele tabelului și tabelul în sine.  Dacă nu setați un cadru, veți obține o masă fără linii, dar spațiul pentru acestea va fi alocat.  Același rezultat poate fi obținut prin setare<ТАВLЕ ВОRDER=0>.  Uneori doriți să faceți chenarul mai gros, astfel încât să iasă mai bine în evidență.  Puteți seta exclusiv chenare aldine pentru a atrage atenția asupra unei imagini sau a unui text.  Când creați tabele imbricate, trebuie să faceți pentru mese diferite margini de grosimi diferite pentru a le face mai ușor de distins.
Atributul CELLSPACING
Atributul CELLSPACING specifică distanța dintre celule în pixeli.  Dacă acest atribut nu este specificat, valoarea implicită este de doi pixeli.  Cu atributul CELLSPACING=, puteți plasa text și imagini oriunde doriți.  Dacă vrei să pleci loc 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
 
 
 


Atributul 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ă.  Sens atribut dat 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
 
 
 


Atributul BACKGROUND
Acest atribut setează imaginea de fundal pentru tabele.  Se aplică etichetelor TABLE și TD.  Valoarea sa este adresa URL a fișierului cu imagine de fundal.  Utilizarea acestui atribut este discutată mai jos.
Utilizarea tabelelor în designul paginii
Mesele sunt bune pentru că, dacă doriți, le puteți face invizibile marginile.  Acest lucru permite utilizarea etichetei<ТАВLЕ>plasați frumos textul și graficele pe pagină.  Pa tag<ТАВLЕ>rămâne singurul formatator puternic în HTML.  Designerii de pagini web au acum aproape aceeași libertate în ceea ce privește utilizarea „spațiului alb” ca și creatorii. pagini tipărite.  Tabelele sunt cea mai bună modalitate de a vă îndepărta de aranjarea ierarhică a textului de pe paginile Web.
Dacă browserul acceptă tabele, de obicei va afișa cel mai mult efecte interesante obtinute cu ajutorul lor

 

 

 

 

 

 
Universitatea Pedagogică de Stat din Ural
 
Bine ati venit!
 

 

 
Curs de pregatire„Elementele de bază ale stăpânirii WEB”
 
 
 
 
 
 


 
Crearea de mese colorate
Unele browsere permit afișarea culorilor.  Există mai multe moduri de a colora un tabel, mai ales în funcție de browserul pe care îl utilizați.
Chenarele colorate în Netscape Navigator.  Nu numai că poți înconjura masa cadru frumos, dar și setați o culoare pentru aceasta, diferită de culorile textului și de fundal.  Creați un GIF simplu gri (sau orice GIF pe care doriți să îl aveți ca fundal) și definiți-l într-o etichetă<ВODY>ca fundal de pagină.  Apoi setați culoarea de fundal a paginii.  Drept urmare, eticheta dvs<ВОDY>va arata cam asa:

 
Ați creat un fundal dublu - GIF și setați culoarea.  Ca rezultat culoare de fundal va fi vizibil pe toate marginile tabelului și linii orizontale (<НR>).  Indiferent dacă GIF-ul de fundal este gri sau nu, liniile colorate și chenarele tabelului vor ieși în evidență.  Dacă GIF-ul de fundal nu este prea complicat, timpul de încărcare a paginii va crește doar ușor.
Au devenit populari, designerii web au folosit în principal metoda de aspect tabelar și au obținut un rezultat foarte bun.

Etichetele folosite pentru a construi un tabel în html
masa - eticheta necesară, care deschide și închide masa 
legendă - etichetă opțională, indicând titlul tabelului 
al- o etichetă opțională, în etichetele de deschidere și de închidere cărora se încadrează numele coloanei.  De obicei cu caractere aldine 
tr- eticheta obligatorie din care se deschide si se inchide linia 
td- o etichetă obligatorie care indică deschiderea și închiderea unei celule într-un rând 

Exemplu simplu de cod de tabel
 

 

 

 



 



 

 

 


 


 
 
 
Numele tabelului
 
 
Coloana 1 

 
 
 
Stobets 2 

 
 
 
 
 
 
Text în prima celulă 

 
 
 
Text în a doua celulă 

 
 
 
 
 




 
Se va afișa browserul

Atribuirea tabelelor în html
Lecția despre mese este foarte importantă!  Datorită tabelelor, puteți aranja nu numai text, ci și imagini, link-uri și multe altele.  Masa poate fi pusă fundal(sau culoarea sa), indentare, lăţime, frontierăși alte optiuni care îi va da un aspect frumos.  Tabel - Primul pas pentru a înțelege web design!  Anterior, multe site-uri erau complet amenajate ca tabele, adică tot ceea ce vedea utilizatorul (meniu lateral, Meniul de sus, conținut) - era conținutul celulelor mari ale tabelului. 
În această notă, să trecem la atributele care fac o masă frumoasă... 
Proprietăți și parametri ai tabelelor html: umplutură, lățime, culoare de fundal, chenar (cadru)
La eticheta de masă are urmatoarele atribute: 
lăţime- latimea mesei.  poate fi în pixeli sau % din lățimea ecranului. 
bgcolor- culoarea de fundal a celulelor tabelului 
fundal- umple fundalul tabelului cu un model 
frontieră- cadru și chenare în tabel.  Grosimea este specificată în pixeli 
umplutura celulara- umplutură în pixeli între conținutul celulei și chenarul interior al acesteia
Ca și înainte, valoarea atributului este scrisă între ghilimele.
 
Luați în considerare utilizarea acestor atribute pe un exemplu.  Pentru a face acest lucru, creați un tabel (dar deja fără legendele și etichetele rar folosite) și setați parametrul de atribut granita (granita), lățime (lățimea tabelului, rândului sau celulei)și bgcolor (culoarea celulei)
 

 

 

 



 


 


 


 





 
Ca urmare, următorul tabel va fi afișat în browser 

cadru- un atribut care denotă un cadru în jurul mesei.  Există următoarele valori:
gol- nici un cadru,
deasupra - doar cadrul de sus, 
dedesubt - doar cadrul de jos, 
hsides - numai cadre de sus și de jos, 
vssides - numai chenarele din stânga și din dreapta, 
lhs - numai cadru din stânga, 
rhs - numai cadru din dreapta, 
cutie - toate cele patru părți ale cadrului.
reguli- un atribut care denota marginile din interiorul tabelului, dintre celule.  Există următoarele valori:
Niciuna - nu există granițe între celule, 
grupuri - limite numai între grupurile de rânduri și grupurile de coloane (vor fi discutate puțin mai târziu), 
rânduri - doar marginile dintre rânduri, 
cols - doar chenarele dintre coloane, 
toate - arată toate granițele.
Luați în considerare un exemplu de cod
 

 

 

 


 
  
 
 
Coloana 1 

 
 
 
Stobets 2 

 
 
 
 
 
 



 
 


 
 
 
 

 


 


 


 





 
Rezultat
Acum să încercăm să creăm o masă frumoasă.  Pentru a face acest lucru, să începem să folosim alinierea mesei.  Pentru a face acest lucru, există următorii parametri deja familiari:
alinia- alinierea mesei.  Poate fi plasat pe stânga (stânga), dreapta (dreapta), centru (centru) 
spațierea celulelor- distanta dintre celulele tabelului.  Specificat în pixeli (implicit 0 pixeli) 
umplutura celulara- umplutură în pixeli între conținutul celulei și chenarul său interior (implicit 0 pixeli)
Luați în considerare un exemplu
 

 

 

 


 
  
 
 
Coloana 1 

 
 

Stobets 2 

 
 
 
 
 
 

Text în prima celulă a primei coloane 

 
 
Text în a doua celulă a celei de-a doua coloane 

 
 
 
 


 


 


 


 





 
Browserul va afișa un tabel aliniat la centru care arată astfel:
tr rânduri și celule td în tabelele HTML
Permiteți-mi să vă reamintesc din nou că tabelele sunt formate linie cu linie (tr).  Rândurile (tr) conțin deja celule (td).  Dacă setați un parametru pentru un șir (tr), atunci acesta va fi valabil pentru toate celulele(td) în această linie, dacă pentru o anumită celulă, atunci numai pentru aceasta.  În exemplele de mai sus, am specificat culoarea pentru rând, acest parametru a fost distribuit corespunzător pentru toate celulele. 
 



 


Pentru etichetele tr și td există următoarele
alinia- alinierea textului în interiorul celulei.  Stânga (stânga), dreapta (dreapta), centru (centru) 
valini- alinierea textului în interiorul celulei pe verticală.  Sus (sus), jos (jos), centru (mijloc) 
bgcolor- setează culoarea liniei 
lăţime- lățimea coloanei (toate celulele de mai jos vor accepta parametrul dat) este specificat în pixeli sau ca procent, unde 100% este lățimea întregului tabel 
înălţime- înălțimea celulei (toate celulele din rând vor accepta acest parametru)
Luați în considerare codul în care conținutul celulelor (td) este aliniat pe diferite margini: în prima din stânga, în a doua din dreapta:
 

 

 

 


 
 
 
 
Coloana 1 

 
 
 
Stobets 2 

 
 
 
 
 
 

Text în prima celulă a primei coloane 

 
 
Text în a doua celulă a celei de-a doua coloane 

 
 
 
 
 

 
 
Coloana 1 

 
 
 
Stobets 2 

 
 
 
 


 


 


 


 





 
Rezultat 

Cu ajutorul tabelelor, poți alcătui o pagină foarte bună.  Nu uitați că puteți introduce nu numai text în celule, ci și imagini, link-uri și multe altele!)
Vă mulțumim pentru atenție!  Sper că materialul a fost de ajutor!
Tabelele HTML organizați și afișați datele folosind rânduri sau coloane.  Tabelele sunt alcătuite din celule care se formează atunci când rândurile și coloanele se intersectează. Celulele de tabel poate conține orice elemente HTML, cum ar fi titluri, liste, text, imagini, elemente de formular și alte tabele.  Fiecare tabel poate avea asociat un antet, plasat înainte sau după tabel.
Tabelele nu mai sunt folosite pentru aspectul și aspectul paginii web elemente individuale, deoarece o astfel de tehnică nu oferă flexibilitate în structura și adaptabilitatea site-ului, crescând semnificativ marcajul HTML.
Pentru toate elementele tabelului sunt disponibile, precum și atributele proprii.
Crearea tabelelor în HTML
Conţinut:
1. Cum se creează un tabel
Tabelul este creat folosind etichetă asociată
 Fig.1. Aspect tabele fără formatare css 
În mod implicit, tabelul și celulele nu au margini vizibile. Frontiere sunt setate folosind proprietatea border:
/* 1px chenaruri exterioare gri ale tabelului */ tabel (chenar: 1px solid gri;) /* tabel primul rând margini celule */ th (chenar: 1px solid gri;) /* corpul tabelului chenar celule */ td (chenar: 1px solid gri;)
Distanța dintre celulele tabelului sunt eliminate folosind proprietatea tabelului (border-collapse: collapse;) .
Lăţime Un tabel este implicit la lățimea conținutului său interior.  Pentru a seta lățimea, trebuie să setați o valoare pentru proprietatea lățime:
/* face ca lățimea tabelului să fie egală cu lățimea blocului container în care se află */ tabel (lățime: 100%;) /* set lățime fixă pentru masă */ masă (lățime: 600px;)
Dacă sunt setate celulele tabelului căptușealăși margini, atunci lățimea tabelului va include următoarele valori: 
padding-left și padding-right , lățimea chenarului-stânga plus lățimea chenarului-dreapta ultimei celule din rând.  Dacă sunt specificate lățimea și marginile celulei, atunci lățimea tabelului va fi suma lățimii celulei plus lățimea marginii din stânga și lățimea chenarului din dreapta ultimei celule din rând.
2. Cum să creați rânduri de tabel (rânduri)
Rândurile sau rândurile de tabel sunt create folosind eticheta
.  Numărul de rânduri orizontale din tabel este determinat de numărul de etichete pereche .
3. Cum se face o celulă de antet de coloană de tabel
4. Cum se face o celulă cu corp de tabel
, situate pe același rând, determină numărul de celule din rândul tabelului.  Numărul de perechi de celule și pentru a specifica fiecare parte a tabelului. 
Elementul trebuie utilizat în următoarea ordine: as element copil
 
 
 
 
Coloana 1 

 
 
 
Stobets 2 

 
 
 
 
 
 

Text în prima celulă a primei coloane 

 
 
Text în a doua celulă a celei de-a doua coloane 

 
 
 
 





creează un titlu de coloană - o celulă specială, în care textul este evidențiat cu caractere aldine.  Numărul de celule antet este determinat de numărul de perechi de etichete

  
creează celule de tabel care conțin date de tabel.  Etichete pereche

trebuie să fie egal cu numărul de perechi de celule
.  Atributele colspan , rowspan , headers sunt disponibile pentru element. 
5. Cum să adăugați o legendă (titlu) la un tabel
Creează o legendă pentru tabel.  Adăugat direct după etichetă
6. Gruparea rândurilor și coloanelor din tabel
Creează un grup structural de coloane, evidențiind celule omogene din punct de vedere logic.  Grupează una sau mai multe coloane pentru o formatare uniformă, permițând aplicarea stilurilor coloanelor în loc să se repete stilurile pentru fiecare celulă și fiecare rând.  Adăugat direct după etichete Orez.  2. Evidențierea coloanelor din tabel într-o culoare diferită folosind etichete și
7. Gruparea secțiunilor de tabel
Elementul creează un grup de titluri pentru rândurile de tabel pentru a seta un design uniform.  Folosit în combinație cu elemente
 
, după și, și înainte  ,
și elemente.  Poate fi folosit o singură dată în cadrul aceluiași tabel.grupează conținutul principal al unui tabel.  Folosit în combinație cu elemente și .
Creează un grup de rânduri pentru a reprezenta informații despre sume sau totaluri, situate în partea de jos a tabelului.  Folosit în tabel o dată.  Plasat după etichetă, înaintea etichetelor
și  .
 
Această grupare de rânduri a fost încorporată în standard în așteptarea ca browserele, atunci când afișează tabele lungi, să deruleze rândurile de date, păstrând staționarea superheadului și subtiturilor, iar atunci când au fost scoase la imprimantă, ar putea folosi superheadul. și subtitl ca antete de pagină.  Cu toate acestea, browserele moderne nu fac acest lucru și fie pur și simplu afișează și ca linii de date, fie, în cel mai bun caz, pur și simplu puneți rândurile corespunzătoare la începutul și la sfârșitul tabelului. 
8. Cum să îmbinați celulele tabelului
Atributele colspan și rowspan unesc celulele tabelului.  Atributul colspan specifică numărul de celule îmbinate orizontal, iar atributul rowspan specifică numărul de celule îmbinate pe verticală.

Orez.  3. Un exemplu de combinare orizontală a celulelor tabelului folosind atributul colspan 
9. Atributele elementelor de tabel
Tabelul 1. Atributele elementului de tabel 

Valori acceptate: lista de nume de celule separate prin spatii;  aceste nume trebuie să fie atribuite celulelor prin atributul lor id.
Valori acceptate: orice număr întreg pozitiv.
Atribut
Descriere, valoare acceptată
colspan
Numărul de celule dintr-un rând de îmbinat pe orizontală. 

 
 

antete
Specifică o listă de celule antet care conțin informații de antet pentru celula de date curentă.  Proiectat pentru browsere de vorbire. 

 
...
...
 
interval de rând
Numărul de celule din coloană de îmbinat pe verticală. 

 
 
Valori posibile: număr de la 1 la 999.
span
Numărul de coloane combinate pentru un job stil uniform, implicit este 1. 

 
 
10. Un exemplu de creare a unui tabel
 
Orez.  4. Creați un meniu de restaurant cu un tabel HTML 
Marcaj HTML

 

 
Meniul restaurantului Romashka
 

 
Bucătărie
 
bucate reci
 
Mese calde
 
deserturi
 
 

 
Salate
 
Gustări
 
Prima masă
 
Feluri principale
 
 

 
Rusă
 
Vinaigreta
 
Limbă cu hrean
 
Shchi cu varză murată
 
Galuste de cartofi
 
Mere coapte cu miere
 
 

 
Salata Olivier
 
Jeleu de vită
 
Rassolnik acasă
 
Crap copt in smantana
 
plăcintă cu clătite
 
 

 
Hering sub „blană”
 
Salau biban jeleat
 
Mijloc de carne
 
cotlet „Pozharsky”
 
Prajitura "Cartofi"
 
 

 
Spaniolă
 
Ceviche de scoici
 
Empanadas
 
Supa de paine cu usturoi
 
Paella cu fructe de mare
 
Churros
 
 

 
Timbale de avocado și ton
 
Ahotomate
 
Fabada asturiană
 
Raxo de porc
 
Almoishavena
 
 

 
Fasole cu sunca
 
Chanfine
 
Supă de pește cu găluște de gris
 
tortilla de cartofi
 
Bunuelos
 
 

 
limba franceza
 
Salata Vosges
 
Riyette de pui
 
Supa crema de vinete "Renoir"
 
Ograten de cartofi
 
brioşă
 
 

 
Salata "Panzanella"
 
Brânză delicioasă
 
supa frantuzeasca de dovleac
 
Gratinați din carne de pasăre
 
Plăcintă cu lămâie din Liguria
 
 

 
tartarul
 
somon marinat
 
Supa "Conti"
 
Tartiflette
 
Savarin "Triumful"
 
 

V aceasta sectiune sunt luate în considerare unele caracteristici specifice ale browserelor individuale, precum și subtilități individuale construirea și afișarea meselor.
Afișarea celulelor goale în tabelele HTML
Una dintre caracteristicile prezentării tabelelor HTML browsere diferite este de a afișa celulele goale.  Conform descrierii limbaj HTML toate browserele trebuie să adauge rândurile cu celule goale dacă orice rând are un număr mai mic de celule decât alte rânduri.  În plus, pot exista celule oriunde în tabel care nu conțin date.
Există o diferență între celulele goale și celulele care conțin date invizibile.  În celule goale în interiorul unei perechi de etichete și nu conține informații sau unul sau mai multe spații care nu sunt tratate ca date.  Celulele care conțin date invizibile, de exemplu, pot conține cod sau cod de alimentare de linie 
, sau orice text a cărui culoare se potrivește cu culoarea de fundal a celulei.  Dacă celulele care conțin date (chiar și cele invizibile) sunt afișate în același mod de către toate browserele, atunci celulele goale vor fi afișate diferit.  Browserul Netscape nu afișează o celulă goală, adică locul în care celulă dată, va fi umplut cu culoarea de fundal a paginii, nu cu culoarea de fundal a celulei, spre deosebire de celulele care conțin date.  Nu este trasat niciun chenar în jurul celulelor goale. Exemplu HTML tabelele cu o celulă goală este prezentată în fig.  4.15.
Orez.  4.15. gol celula HTML tabelele sunt redate diferit de diferite browsere
Microsoft Internet Explorer atât acele celule, cât și alte celule afișează culoarea de fundal a celulelor.  Un browser precum NSCA Mosaic permite utilizatorului să determine natura emiterii celulelor goale din tabel, selectând opțiunile corespunzătoare.  Cunoașterea unor astfel de caracteristici vă va permite să dezvoltați tabele care vor fi afișate în mod corespunzător, indiferent de browserul selectat de utilizator.  În unele cazuri, este suficient să creați celule care conțin un singur cod în loc de unele celule goale.