Dimensiunea coloanei tabelului HTML.

Vlad Merjevici

Când aranjați folosind tabele, trebuie să cunoașteți unele dintre caracteristicile care sunt inerente tabelelor. Acest lucru este necesar pentru a înțelege cum să construiți un aspect într-un caz sau altul, să creați un cod eficient și să preveniți gafele totale în muncă. Se crede că aspectul tabelului este mai ușor decât alte metode, cum ar fi utilizarea straturilor. Cu toate acestea, tabelele sunt pline și cu multe trucuri care, într-un fel sau altul, afectează afișarea paginii.

Lățimea mesei

Lățimea tabelului, dacă nu este specificată în mod explicit, este setată automat de browser pe baza conținutului celulelor. Când un tabel este folosit pentru a crea o grilă de referință pe o pagină, această abordare nu este de dorit deoarece depinde de date variabile. Prin urmare, lățimea tabelului este întotdeauna indicată - ca procent dacă se utilizează un aspect „fluid” sau în pixeli pentru un aspect cu lățime fixă.

Lățimea celulei

Lățimea celulelor este determinată de atributul width al etichetei , iar această valoare trebuie setată dacă trebuie specificată lățimea celulei.

Să luăm în considerare un exemplu de caz în care trebuie specificată dimensiunea celulelor. Să presupunem că vrem să creăm două coloane pe o pagină web, una dintre ele ar trebui să aibă o dimensiune de 200 de pixeli, iar cealaltă ar trebui să ocupe spațiul rămas. Creați un tabel cu două celule și setați parametrul lățime = „200” pentru celula din stânga (exemplul 1). Nu este nevoie să setați unitățile, browserul însuși înțelege că, dacă este specificat un număr, atunci sunt utilizați pixeli.

Exemplul 1. Lățimea celulelor

Deoarece în acest exemplu, lățimea tabelului este specificată ca 100%, tabelul va ocupa toată lățimea liberă a ferestrei browserului. În acest caz, coloana din stânga are 200 de pixeli, iar cea din dreapta - spațiul liber rămas.

Lățimea celulei se poate modifica uneori, în ciuda faptului că este specificată rigid. Acest lucru se întâmplă, de exemplu, dacă o imagine este adăugată la o celulă care este mai mare decât lățimea celulei. Pentru a găzdui imaginea, celula va fi forțată să se extindă. Mărimea unei celule poate fi afectată și de conținutul textului acesteia, care conține un cuvânt foarte lung.

Pentru a evita această situație, se folosesc mai multe mijloace.

• Nu adăugați imagini la o celulă cu lățime fixă ​​care sunt mai mari decât lățimea celulei. Metoda, desigur, sună banal, cu toate acestea, cunoscând caracteristicile celulelor, puteți evita problemele cu afișarea lor.
• Pentru etichetă utilizați proprietatea de stil table-layout setată la fix. Utilizarea acestei proprietăți vă permite să decupați o imagine dacă nu se încadrează în totalitate în celulă (exemplul 2).

  Exemplul 2. Proprietatea table-layout

  ...

  Rezultatul acestui exemplu este prezentat în Fig. 1.

  Browserele moderne (Firefox 3+, Internet Explorer 8+, Chrome și Safari) arată tabelul puțin diferit (Figura 2).

  

  Orez. 2. Afișarea unei imagini în browserul Safari

  • Utilizați proprietatea stil overflow cu o valoare de defilare. Această proprietate adaugă bare de defilare la conținut, dar deoarece se aplică elementelor de bloc, nu poate fi folosită pentru o etichetă ... Prin urmare, trebuie să așezați eticheta în interiorul celulei
    și setați o proprietate de stil pentru aceasta (exemplul 3). Acest lucru cu siguranță nu este în întregime corect și convenabil, dar poate da rezultatul dorit.

  Exemplul 3. Bare de defilare în celule

  ...

  Rezultatul acestui exemplu este prezentat în Fig. 3.

  

  Conținutul celulei

  Browserele afișează o celulă diferit, fără nimic înăuntru. „Nimic” în acest caz înseamnă că nu a fost adăugată nicio imagine sau text în celulă, iar spațiul nu este luat în considerare. Desigur, aspectul celulelor diferă doar dacă se stabilește o graniță în jurul lor. Când folosiți o chenar invizibil, aspectul celulelor, indiferent dacă există ceva în ele sau nu, este același.

  Browserele mai vechi nu afișau culoarea de fundal a celulelor de vizualizare goale , prin urmare, în cazul în care era necesară lăsarea celulei fără conținut, dar afișarea culorii de fundal, în interiorul celulei a fost adăugat un spațiu neseparabil (). Spațiul nu este întotdeauna potrivit, mai ales atunci când trebuie să setați înălțimea celulei la 1–2 pixeli, motiv pentru care imaginile transparente de dimensiunea unui pixel sunt utilizate pe scară largă. Într-adevăr, o astfel de imagine poate fi scalată la discreția ta, dar nu este afișată în niciun fel pe pagina web.

  Din fericire, era desenelor cu un singur pixel și a tot felul de distanțiere bazate pe acestea a trecut. Browserele funcționează suficient de corect cu tabelele fără prezența conținutului celulelor.

  Unirea celulelor

  Să presupunem că trebuie să folosim concatenarea unor celule dintr-un tabel, așa cum se arată mai jos. Mai mult decât atât, înălțimea celulelor portocalii și gri este codificată și este egală cu 30 de pixeli.

  Celula 1	Celula 2
  Celula 3
  Celula 4

  Pentru claritate, codul pentru acest tabel este prezentat în exemplul 4.

  Exemplul 4. Tabel cu celule îmbinate

  Celula 1	Celula 2
  Celula 3
  Celula 4

  Deși înălțimea celulei portocalii pare a fi fixă, aceasta se poate schimba în mod arbitrar în funcție de cantitatea de informații din alte celule. O pacoste similară a fost observată în unele browsere.

  Pe măsură ce complexitatea tabelului crește din cauza creșterii numărului de celule și a îmbinărilor acestora, crește și probabilitatea de erori în afișarea documentului. Din acest motiv, îmbinarea verticală a celulelor este rar utilizată chiar și în cazul în care înălțimea celulelor nu are un efect semnificativ asupra aspectului paginii.

  Pentru a obține în continuare rezultatul dorit, un tabel este împărțit în mai multe tabele mici sau tabelul este inserat într-o celulă a altui tabel. Tabelele imbricate au devenit larg răspândite tocmai pentru că dau un rezultat stabil și uniform.

  Viteza de încărcare a mesei

  Până când tabelul nu este încărcat complet, conținutul acestuia nu va fi afișat. Cert este că browserul, înainte de a afișa conținutul tabelului, trebuie să calculeze dimensiunile necesare celulelor, lățimea și înălțimea acestora. Și pentru asta trebuie să știi ce este în aceste celule. Prin urmare, browserul așteaptă până când totul din celule este încărcat și abia apoi afișează tabelul.

  Pe baza acestui fapt, tabelele nu sunt folosite pentru a stoca informații mari (de la 100 kB). Și pentru a accelera încărcarea aspectului tabelului, acesta este împărțit în tabele separate sau este utilizată proprietatea table-layout, a cărei utilizare vă permite să creșteți ușor viteza de afișare a conținutului tabelului.

  1. Ce sunt tabelele HTML și de ce sunt necesare?

  tabele html- aceasta este una dintre cele mai de bază componente ale fiecărei pagini html și, în consecință, ale fiecărui site. De exemplu, site-ul întregul site este format din tabele: imagini, texte, link-uri, formulare de înregistrare - totul este plasat unul față de celălalt folosind tabele html (de fapt, întregul site este, de asemenea, situat într-un singur tabel mare).

  2. Care sunt etichetele pentru tabelele html?

  Etichete specificarea tabelului html sunt scrise astfel:

  Dar, din moment ce știm, toate tabelele constau din rânduri și coloane (celule), așa că trebuie să setați etichete și pentru ele:

  - linia tabelului html
  - coloana (celula) a tabelului html.

  Acum să încercăm să combinăm toate etichetele într-un singur tabel. Pentru a face acest lucru, vom crea un tabel html care constă din două rânduri și trei coloane:

  Este foarte ușor să faci un astfel de tabel html. În primul rând, să punem etichetele tabelului în sine, în interiorul cărora punem numărul necesar de rânduri (în exemplul nostru, 2 rânduri):

  
  
  
  

  Apoi împărțim fiecare rând în celule folosind etichete de coloană:

  
  
  - celula 1.1
  - celula 1.2
  - celula 1.3
  
  
  - celula 2.1
  - celula 2.2
  - celula 2.3
  
  

  De fapt, prima cifră din etichete este numărul rândului, iar a doua este numărul celulei (1x2 este primul rând, a doua celulă etc.).

  3. Cum să setați culoarea de fundal a tabelelor html?

  Acum să ne dăm seama cum este setat separat fundalul tabelului sau al fiecărei celule.

  Deci, pentru a seta fundalul, se folosește atributul bgcolor = „culoare_fond”.

  De exemplu, dacă trebuie să setăm o culoare pentru întreaga farfurie, atunci acest lucru se face astfel:

  bgcolor = „culoare_fond”>
  
  - celula 1.1
  - celula 1.2
  - celula 1.3
  
  
  - celula 2.1
  - celula 2.2
  - celula 2.3
  
  

  De exemplu, dacă este necesar să faceți o farfurie galbenă, atunci scriem:

  Daca este nevoie setați culoarea de fundal a unui rând tabelul html, apoi atributul bgcolor = „culoare_fond” se aplică etichetei :

  bgcolor = "# FFFF00"> bgcolor = "# 0000FF"> 1.1 1.2 1.3 2.1 2.2 2.3

  1.1	1.2	1.3
  2.1	2.2	2.3

  În acest caz, atributul numar de telefon setează textul din interiorul etichetei la alb.

  În același mod, este setat și culoarea fiecărei celule separat... De exemplu, dacă trebuie să schimbați culoarea celulei 1.2 în albastru, atunci în interiorul etichetei de deschidere atribut bgcolor = „culoare_fond”:

  4. Cum să setați dimensiunea lățimii și înălțimii celulelor tabelului html?

  Deci, pentru a seta manual lățimea și înălțimea celulelor, utilizați atributele înălțime și lățime. Ele pot fi setate pentru întregul tabel, pentru un rând, pentru o celulă (coloană). Înălțimea și lățimea pot fi setate în pixeli sau ca procent. În cazul nostru, vom seta lățimea și înălțimea în pixeli pentru coloane (celule).

  înălţime- atribut care stabilește înălțimea celulei

  lăţime- atribut care stabilește lățimea celulei

  Și acum cu un exemplu:

  Acum voi explica de ce setăm înălțimea celulelor o singură dată pe linie.

  Dacă într-un rând specificați o înălțime mai mare pentru orice celulă decât pentru altele, atunci, în ciuda acestui fapt, toate celulele (coloanele) ale rândului dvs. vor deveni egale ca înălțime cu cea mai mare. Și lățimea fiecărui rând este cel mai bine setată separat!

  Puteți seta înălțimea și lățimea pentru întregul tabel. În acest caz, toate celulele (coloanele) și rândurile vor împărți spațiul care le-a fost acordat în mod egal, dacă nu le setați personal acești parametri (ca procent din lățimea (înălțimea) totală a tabelului sau a pixelilor).

  De asemenea, de foarte multe ori trebuie să setați înălțimea și lățimea. în procente:

  continutul celulei

  Dacă setăm lățimea pentru celulă la 40 la sută, ca în exemplul nostru, atunci asta înseamnă că avem 60 la sută rămase pentru restul celulelor, adică. suma lățimilor lor nu trebuie să depășească 60 la sută. Este foarte simplu: în total, avem doar 100%. Considerăm: 100 - 40 = 60.
  

  5. Cum se aliniază textul în interiorul tabelului html?

  Acum să ne dăm seama cum să aliniem textul din tabelul nostru html la stânga, la dreapta și la centru.

  Acest lucru se face folosind atributul:

  aliniere = „stânga”- aliniază textul din interiorul tabelului html la stânga

  aliniere = „centru”- aliniază textul tabelului html în centru

  aliniere = „dreapta”- aliniază textul din interiorul tabelului html la dreapta

  În consecință, atributul de aliniere poate prelua și valorile dreapta și stânga. Justificați valoarea atunci când este utilizat cu etichetă atributul align nu poate accepta.

  De exemplu, codul html al unui tabel al cărui text este centrat arată astfel:

  align = "centru"> align = "stânga"> 1x1 align = "centru">1.2 aliniere = "dreapta"> 1x3 align = "stânga">2.1 align = "centru"> 2x2 aliniere = "dreapta">2.3

  Prin scrierea atributului align = "centru"în deschidere

  , am aliniat tabelul html la centrul paginii browser.

  Acesta este rezultatul pe care îl obțineți în browser:

  1x1	1.2	1x3
  2.1	2x2	2.3

  Acum să ne uităm la un exemplu despre cum să aliniați textul din interiorul unui tabel html la partea de sus sau de jos, adică cum să ne asigurăm că conținutul unei celule nu este localizat doar exact în mijlocul acesteia (ca în mod implicit), dar și sus sau jos.

  Alinierea verticală este specificată de atributul:

  valign = "sus"- conținutul va fi poziționat în partea de sus a celulei

  valign = "mijloc"- conținutul va fi centrat în celulă

  valign = "de jos"- conținutul va fi situat în partea de jos a celulei

  Să ne uităm la aceste atribute folosind exemplul nostru:

  valign = "sus"> 1x1 1.2 valign = "sus"> 1x3 valign = "de jos">2.1 2x2 valign = "de jos">2.3

  Aceasta este ceea ce obținem dacă ne uităm la rezultatul funcționării atributelor din browser. aliniași valini:

  1x1	1.2	1x3
  2.1	2x2	2.3

  6. Cum să combinați celulele și coloanele tabelului html?

  În această parte a articolului nostru, vom vorbi despre atribute colspanși lungimea rândurilor.

  colspan- determină numărul de coloane cărora li se aplică această celulă

  lungimea rândurilor- determină numărul de rânduri la care se aplică această celulă

  Valorile colspanși lungimea rândurilor poate lua o valoare de la 2 sau mai mult, adică o celulă poate fi întinsă în două sau mai multe coloane (rânduri).

  Deci, acum, folosind exemplul, vom întinde o celulă 1x1 în două coloane (celule). Pentru a face acest lucru, vom folosi atributul colspan = „2”, atribuindu-l celulei 1x1. Codul va arăta astfel:

  După cum puteți vedea, o celulă 1x1 se întinde pe lungimea a două celule. În consecință, lungimea sa este egală cu lungimea însumată a acestor două celule (160 pixeli). Nu am setat atributul width pentru celula 1x1, dar dacă am decide să facem acest lucru, atunci am seta lățimea egală cu 160 de pixeli. Și, de asemenea, rețineți că în exemplul nostru nu există o celulă 1x3, adică. există doar două celule în primul rând, de ce - am discutat deja despre asta - o celulă 1x1 este egală cu două celule, datorită atributului colspan.

  Atributele colspan și rowspan trebuie tratate cu mare atenție. O eroare poate face ca site-ul dvs. să „meargă”.

  Acum că ne-am ocupat de parametrul colspan, să ne ocupăm de parametrul rowspan. Principiul de funcționare este același aici:

  colspan = "2"> 1.1 1.2 2.1 2.2

  1.1		1.2
  2.1	2.2

  Astfel, am învățat cum să combinăm celulele în rânduri și coloane ale tabelelor html.

  7. Cum să eliminați, să adăugați sau să schimbați indentări și cum să setați un chenar pentru un tabel html?

  Așadar, mai devreme am creat un tabel html, între celulele căruia sunt vizibile clar indentări. Pentru a le face și mai bine vizibile, să adăugăm un chenar pentru masa noastră. Acest lucru se face folosind atribute:

  border = „lățimea marginii în pixeli”- stabilește lățimea cadrului

  bordercolor = „culoare chenar”- setează culoarea cadrului

  De exemplu, să facem tabelul nostru html un chenar negru de 1 pixel.

  Pentru aceasta, eticheta

  adauga atribute:

  Acum putem vedea clar umplutura dintre celulele tabelului html și umplutura de la marginile interioare ale celulelor până la text. Prin urmare, putem gestiona aceste indentări fără probleme. Pentru aceasta, atributele sunt destinate:

  cellspacing = „lățimea de umplutură în pixeli”- indentare între celule

  cellpadding = „lățimea umpluturii în pixeli”- indentare în interiorul celulei (de la marginea celulei până la text, imagini, linkuri ...)

  De exemplu, să indentăm 10 pixeli între celule și să creștem indentarea de la marginea celulei la text la 20 de pixeli. Acest lucru se face astfel:

  cellpadding = „20”spațierea celulelor = „10”> 1.1 1.2 2.1 2.2

  Dacă ne uităm la rezultatul într-un browser, putem vedea clar că distanța dintre celule ( spațierea celulelor) din tabelul nostru html a crescut la 10 pixeli, iar distanța dintre text și marginea interioară a celulei a crescut cu 20 de pixeli.

  1.1		1.2
  2.1	2.2

  Dacă trebuie să eliminați cu totul adâncimea, atunci puneți pur și simplu cellpadding = "0"și spatie celule = "0".

  8. Cum se inserează un tabel html în altul?

  Ajungem la etapa finală a studierii tabelelor html. Acum vom învăța cum să inserăm o masă în alta.

  De exemplu, în interiorul celulei 1.2 vom insera un nou tabel format dintr-un rând și două coloane. În tabelul html interior, vom seta un chenar roșu de 2px și o distanță de 0px între celule. De asemenea, vom plasa masa interioară în partea de sus a celulei.

  Acest lucru se face foarte simplu:

  1.1 3.1 3.2 2.1 2.2

  Iată ce s-a întâmplat ca urmare a noilor transformări ale tabelului nostru (celule roșii - un tabel intern situat în interiorul unui tabel mare):

  1.1		3.1 3.2
  2.1	2.2

  În această etapă, vom termina acest articol. Cred că s-a dovedit a fi de succes și nu greu de înțeles și sper că nu veți mai avea probleme cu tabelele.

  Au devenit populari, designerii web au folosit în principal metoda de aranjare a tabelelor și au obținut rezultate foarte bune.

  
  Etichetele folosite pentru a construi un tabel în html

  masa- eticheta necesară care deschide și închide masa
  legendă- o etichetă opțională care denotă titlul tabelului
  th- o etichetă opțională, în etichetele de deschidere și de închidere ale cărora este scris numele coloanei. De obicei evidențiate cu aldine
  tr- o etichetă obligatorie de la care se deschide și se închide linia
  td- o etichetă obligatorie care indică deschiderea și închiderea unei celule într-un rând
  
  Exemplu de cod pentru un tabel simplu

  
  
  
  
  

  
  
  
  
  
  
  

  Numele tabelului

  Coloana 1	Coloana 2
  Textul din prima celulă	Textul din a doua celulă

  
  
  Se va afișa browserul
  
  

  Scopul tabelelor în html

  Lecția cu foaia de calcul este foarte importantă! Datorită tabelelor, puteți aranja nu numai text, ci și imagini, link-uri și multe altele. În tabel puteți seta fundal(sau culoarea sa), indentare, lăţime, frontierăși alți parametri, care îi va da un aspect frumos. Tabel - Primul pas către înțelegere web design! Anterior, multe site-uri erau așezate în întregime ca tabele, adică tot ceea ce vedea utilizatorul (meniu lateral, meniul de sus, conținut) era conținutul celulelor dintr-un tabel mare.
  În această notă, să trecem direct la atributele care fac ca masa să arate frumos...

  Proprietăți și parametri ai tabelelor html: indentare, lățime, culoare de fundal, chenar (cadru)

  Avea eticheta de masă există următoarele 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 o imagine
  frontieră- cadru și chenare în tabel. Grosimea este specificată în pixeli.
  umplutură celulară- umplutură în pixeli între conținutul celulei și chenarul său interior
  Ca și înainte, scrieți valoarea atributului între ghilimele.

  Să luăm în considerare aplicarea acestor atribute prin exemplu. Pentru a face acest lucru, creați un tabel (dar deja fără legendele extrem de rar folosite și etichetele) și setați parametrul la atribut granita (granita), lățime (lățimea tabelului, rândului sau celulei)și bgcolor (culoarea celulei)

  
  
  
  
  

  
  
  
  
  
  
  
  

  
  
  Ca rezultat, browserul va afișa un tabel cu următorul formular
  
  cadru- atribut care denotă un chenar în jurul mesei. Există următoarele valori:

  Gol - fără cadru,
  deasupra - doar cadrul de sus,
  dedesubt - doar cadrul de jos,
  hsides - numai cadre de sus și de jos,
  vsside - numai cadre din stânga și din dreapta,
  lhs - doar chenarul din stânga,
  rhs - numai chenarul din dreapta,
  cutie - toate cele patru părți ale cutiei.

  reguli- un atribut care denota marginile in interiorul unui tabel, intre 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 - margini numai între rânduri,
  cols - marginile numai între coloane,
  all - afișați toate marginile.

  Luați în considerare exemplul de cod

  
  
  
  
  

  Coloana 1	Coloana 2

  
  
  
  
  
  
  
  

  
  

  Rezultat

  

  Acum să încercăm să creăm o masă frumoasă. Pentru a face acest lucru, să începem să folosim alinierea în tabel... Pentru aceasta, există următorii parametri deja familiari:

  alinia- alinierea mesei. Poate fi pozitionat stanga (stânga), dreapta (dreapta), centru (centru)
  spațierea celulelor- distanta dintre celulele tabelului. Specificat în pixeli (implicit 0 pixeli)
  umplutură celulară- umplutură în pixeli între conținutul celulei și chenarul său interior (în mod implicit 0 pixeli)
  Să luăm în considerare un exemplu

  
  
  
  
  

  Coloana 1	Coloana 2
  Textul din prima celulă a primei coloane	Text în a doua celulă a celei de-a doua coloane

  
  
  
  
  
  
  
  
  
  

  
  
  Browserul afișează un tabel centrat care arată astfel

  

  Tr șiruri ș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 linie, acest parametru a fost distribuit corespunzător pentru toate celulele.
  
  
  
  
  
  Pentru etichetele tr și td există următoarele

  alinia- alinierea textului în celulă. Stânga, Dreapta, Centru
  valini- alinierea verticală a textului în interiorul celulei. Sus (sus), jos (jos), centru (mijloc)
  bgcolor- setează culoarea liniei
  lăţime- lățimea coloanei (toate celulele de mai jos vor accepta acest parametru) este specificată în pixeli sau în procente, 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 un cod în care conținutul celulelor (td) este aliniat pe diferite margini: în prima la stânga, în a doua la dreapta:

  
  
  
  
  

  Coloana 1	Coloana 2
  Textul din prima celulă a primei coloane	Text în a doua celulă a celei de-a doua coloane
  Coloana 1	Coloana 2

  
  
  
  
  
  
  
  
  
  

  
  
  Rezultat
  
  

  Cu ajutorul tabelelor, poți face o pagină foarte bună. Nu uitați că puteți introduce nu numai text în celule, ci și imagini, link-uri etc.!)

  Multumesc pentru atentie! Sper că materialul a fost de ajutor!

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

  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 tabelelor

  1. Chenarul tabelului

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

  Tabel (border-collapse: collapse; / * eliminați spațiile goale dintre celule * / chenar: 1px gri solid; / * setați un chenar exterior de 1px gri pentru tabel * /)

  Chenarele celulei de titlu din fiecare coloană sunt setate pentru al-lea element:

  Th (chenar: 1px gri solid;)

  Marginile celulei corpurile de tabel sunt setate pentru elementul td:

  Td (chenar: 1px gri solid;)

  Lățimea marginilor celulelor adiacente nu este dublată, așa că puteți seta margini pentru întregul tabel în felul următor:

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

  Marginea exterioară a tabelului poate fi selectată oferindu-i o lățime crescută:

  Tabel (chenar: 3px gri solid;)

  Frontierele pot fi setate parțial:

  / * setați un chenar exterior gri de 3 px pentru tabel * / table (border-top: 3px solid gri;) / * setați 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 este determinată de conținutul celulelor sale. Dacă lățimea nu este specificată, atunci aceasta va fi egală cu lățimea celui mai lat rând (linie).

  Lățimea tabelului și a coloanei setați folosind proprietatea width. Dacă tabelul (lățimea: 100%;) este specificat pentru un tabel, 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 specificată î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ândurilor tabelele pot fi manipulate prin adăugarea elementelor de umplutură de sus și de jos

  ... În practică, există momente când aveți nevoie de 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, table td: selectorul ultimului copil, puteți stila prima sau ultima coloană a tabelului (excluzând prima celulă din antetul tabelului);

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

  Puteți citi mai multe despre selectoarele CSS.

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

  Puteți adăuga un titlu la un tabel folosind eticheta

  Cu toate acestea, dorim să observăm că nu este atât de des necesar să se schimbe dimensiunea celulelor individual. De regulă, acest lucru se face în acele situații în care este necesară setarea unei anumite lățimi a coloanelor tabelului. În acest caz, problema este mai ușor de rezolvat. Trebuie doar să specificați lățimea celulelor din prima linie.

  , iar folosind proprietatea caption-side, poate fi plasat în fața sau sub masă. Proprietatea text-align este folosită pentru a alinia orizontal textul titlului. Mostenit.

  ...

  Tabelul nr. 1

  Companie	Î1	Q2	Q3	Î4

  legenda (partea subtitrării: jos; alinierea textului: dreapta; umplutură: 10px 0; dimensiunea fontului: 14px;) Orez. 2. Un exemplu de afișare a antetului sub tabel

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

  În mod implicit, marginile celulelor tabelului sunt separate printr-un spațiu mic. Dacă setăm 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 spațiul dintre marginile celulelor

  Folosind proprietatea border-spacing, puteți 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 conținut. Dacă este specificat un fundal pentru o celulă și tabel (border-collapse: collapse;) este specificat pentru un tabel, 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. Aspectul aspectului tabelului folosind proprietatea table-layout

  Aspectul unui aspect de tabel este determinat de una dintre cele două abordări: aspect fix sau aspect automat. Aspect în acest caz înseamnă 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 în care textul este citit orizontal. Fiecare entitate este o linie separată. Puteți stila astfel de mese î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
Josephin bronz	$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 (greutate font: normal; culoare: # 039; chenar-jos: 2px solid # 6678b1; umplutură: 10px 8px;) td (culoare: # 669; padding: 9px 8px; tranziție: .3s linear;) tr: hover td (culoare: # 6699ff;)

  Cu un număr mare de rânduri, acest design de tabele le face dificil de citit. Pentru a rezolva această problemă, puteți adăuga un chenar de un pixel sub toate elementele td.

  Td (border-bottom: 1px solid #ccc; culoare: # 669; padding: 9px 8px; tranziție: .3s linear;) / * restul codului este ca în exemplul de mai sus * /

  Adăugarea unui: efect de trecere la elementul tr face ca tabelele cu stil minimalist să fie mai ușor de citit. Când treceți cursorul mouse-ului peste o celulă, restul celulelor aceluiași rând sunt evidențiate în același timp, ceea ce simplifică procesul de urmărire 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 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 care separă coloanele.

  Th (greutate font: normal; chenar-jos: 2px solid # 6678b1; chenar-dreapta: 30px solid #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 „Cutie”.

  Cel mai de încredere 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 chenarelor ca separatori.

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

  Cea mai grea parte este să găsești schema de culori care se va îmbina 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;) al 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 (fond: # e8edff; chenar-dreapta: 1px solid #aabcfe; chenar-stânga: 1px solid #aabcfe; culoare: # 669; căptușeală: 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 (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 minimal ar putea arăta astfel: joacă-te cu culorile, adaugă chenaruri, căptușeală, fundaluri diferite și un: efect de hover la trecerea cu mouse-ul peste o linie.

  Tabel (chenar: 1px solid # 69c;) al th (greutate font: normal; culoare: # 039; chenar-jos: 1px punctat # 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;) al-lea (greutate font: normal; dimensiune font: 13px; culoare: # 039; text-transform: majuscule; chenar-dreapta: 1px solid # 0865c2; chenar-sus: 1px solid # 0865c2; chenar-stânga: 1px continuu # 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 mod rapid și unic de a vă aranja masa, alegeți o imagine sau o fotografie atractivă legată de tema mesei și setați-o ca fundal al mesei.

  Jpg ") fără repetare; poziție de fundal: 100% 55px;) th (greutate font: normal; culoare: # 339; umplutură: 10px 12px;) td (fundal: url (" https: // site / imagini / spate..png "); fundal: transparent;)

  Dimensiunile tabelului, înălțimea și lățimea acestuia, sunt determinate automat în funcție de ceea ce conțin celulele în interiorul lor. Cu cât celulele sunt mai multe, cu atât dimensiunea tabelului este mai mare și invers.

  Cu toate acestea, CSS vă permite să redimensionați un tabel în HTML, specificând valorile exacte de lățime și înălțime de care aveți nevoie. Din motive de corectitudine, trebuie remarcat faptul că atributele tabelului vă permit și să setați dimensiunile dorite. Cu toate acestea, deocamdată, vom vorbi doar despre CSS.

  Trebuie subliniat faptul că fiecare masă are propria lățime minimă și înălțimea minimă, care sunt influențate de conținutul său. Și chiar dacă setați valorile de lățime și înălțime și mai puține, atunci nu se va întâmpla nimic. Laturile mesei nu vor depăși minimul lor.

  Pentru a specifica lățimea tabelului, trebuie să utilizați proprietatea CSS lăţime, iar pentru a seta înălțimea, trebuie să aplicați proprietatea înălţime.

  Într-un exemplu, arată așa.

  Tabel (lățime: 500px; înălțime: 100px;)

  Rezultat în browser:

  Cod complet:

  Masa dimensionata

  1	2	3	4	5
1	2	3	4	5
1	2	3	4	5

  Valorile lățimii și înălțimii tabelului pot fi specificate ca valoare absolută (în pixeli) și o valoare relativă - în procente. De exemplu, 20px și, respectiv, 20%.

  Dacă utilizați procente pentru a seta dimensiunile tabelului, acestea vor fi calculate pe baza dimensiunilor elementului părinte. Dacă vorbim despre exemplul nostru, atunci vorbim despre o fereastră de browser.

  Mai există un sens - auto. Și este special pentru că calculează automat lățimea și înălțimea tabelului, implicit. În practică, specificarea acestei valori arată astfel.

  Latime: automat;

  Înălțime: auto;

  Dorim să vă atragem atenția asupra unui alt punct important. Este mai bine să nu indicați înălțimea ca procent, deoarece, de regulă, în acest caz nu vor funcționa.

  Specificarea dimensiunilor celulelor și coloanelor individuale

  Dacă credeți că browserul a setat incorect lățimea coloanelor, pornind de la conținutul celulelor, atunci aveți dreptul să specificați singur dimensiunile celulelor și coloanelor. Și acum vom vorbi despre cum să redimensionăm o celulă într-un tabel HTML.

  Redimensionarea celulelor se face folosind aceleași proprietăți CSS ca și dimensiunile tabelelor, și anume: lăţimeși înălţime.

  Pentru a adăuga stiluri la celule, puteți utiliza una dintre cele două opțiuni:

  1. Atribuiți nume de clase individuale celulelor. Va arăta astfel: class = "cell-50px"

     Și după aceea, ar trebui să aplicați stilurile pentru aceste clase.

  2. Invocare Atribut stil, în care să scrieți codul CSS necesar.

  În practică, a doua opțiune va arăta astfel:

  Coloana 1	Coloana 2
  Textul din prima celulă a primei coloane	Text în a doua celulă a celei de-a doua coloane
  și	... Nu este recomandat să fixați înălțimea folosind proprietatea înălțime. Th, td (padding: 10px 15px;) 3. Cum să setați fundalul tabelului Mod implicit fundal de masă iar celulele sunt transparente. Dacă pagina sau blocul care conține tabelul are un fundal, atunci 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 se suprapun fundalul tabelului și al celulelor. Fundalul tabelului ca întreg și al celulelor acestuia poate fi: completati, , . 4. Coloane de tabel Modelul de tabel CSS se concentrează în principal pe șiruri (rânduri) formate folosind eticheta
  ...

  Masa dimensionata

  1	2	3	4	5
  1	2	3	4	5
  1	2	3	4	5

  Rezultat în browser:
  
  

  Cum se schimbă dimensiunea fontului într-un tabel

  Adesea este nevoie să schimbați dimensiunea textului din tabel. De exemplu, în celulele antet. Acest lucru se poate face folosind proprietatea CSS marimea fontului... Să setăm dimensiunea fontului pentru elemente :

  Th (dimensiunea fontului: 30px;)

  Aceasta încheie această lecție. Vă sugerez să vă gândiți bine la temele dvs. Studiază-l atât de atent și speculează. Toate cele bune!