Un tabel este o grilă de celule care formează rânduri și coloane. Exemple de tabele includ diverse situații financiare, rezultate sportive, calendare, programe etc. Blocul de rețea individual se numește celulă de masă. Celulele de masă pot conține o mare varietate de informații, inclusiv numere, text și chiar obiecte video și audio. Folosind limbajul HTML, tabelele sunt scrise rând cu rând.
Element
servește drept container pentru elementele care definesc conținutul tabelului. Pentru a crea un rând de tabel, trebuie să adăugați în interiorul elementului
etichetă bloc asociată
(prescurtat din engleză. "taye row" - rând de masă). Câte etichete
adăugați, cât mai multe rânduri în tabel și vor exista. Etichetă de deschidere
denotă începutul unui nou rând în tabel. Elementele sunt plasate după el |
(prescurtat din engleză "taye data" - date de tabel), fiecare dintre acestea specificând o celulă separată în acest rând. Element interior |
vă puneți conținutul (text, numere, imagini etc.) afișat în acea celulă. Sfârșitul liniei este indicat printr-o etichetă de final |
.
Element
(prescurtat din engleza "taYe heading" - antetul tabelului) - un element opțional de tabel care este utilizat în același mod ca elementul |
cu toate acestea, scopul său este de a crea un antet pentru un rând sau coloană. De obicei elementul |
plasat în primul rând al mesei. Browserele afișează text într-un element |
cu bold și centrează-l în raport cu celula. Folosirea unui element în cod |
ajută persoanele care utilizează cititoare de ecran și, de asemenea, îmbunătățește performanța tabelelor de indexare a motoarelor de căutare.
Luați în considerare un tabel simplu care are trei rânduri și trei coloane, celulele din primul rând fiind titlurile coloanelor corespunzătoare. În mod implicit, tabelele sunt de obicei afișate fără margine:
Exemplu: tabel HTML simplu
| Titlul 1 | Rubrica 2 | Rubrica 3 |
|---|
| Celula 2x1 | Celula 2x2 | Celula 2x3 |
| Celula 3x1 | Celula 3x2 | Celula 3x3 |
Bordura tabelului
Știm deja că, în mod implicit, tabelele sunt afișate fără margine. Pentru a adăuga un chenar în jurul unei mese, trebuie să specificați câteva reguli simple pentru foaia de stil în document. Proprietate frontieră controlează afișarea liniilor grilei tabelului și setează, de asemenea, lățimea chenarului din jurul mesei în pixeli. O margine apare în jurul mesei și între celule. Adăugați un cadru de un pixel cu latimea deja creată prin setarea proprietății frontieră pentru toate elementele tabelului, de exemplu, ca acesta:
Exemplu: Aplicarea unei proprietăți frontieră
Rama în jurul mesei
| Titlul 1 | Rubrica 2 | Rubrica 3 |
|---|
| Celula 2x1 | Celula 2x2 | Celula 2x3 |
| Celula 3x1 | Celula 3x2 | Celula 3x3 |
Cadru de masă unic
În mod implicit, celulele de tabel adiacente vor avea propria margine. Acest lucru are ca rezultat un fel de „margine dublă” așa cum se vede în exemplul de mai sus. Pentru a scăpa de „chenarul dublu” adăugați proprietatea CSS frontieră-prăbușire la foaia de stil:
Exemplu: Aplicarea unei proprietăți frontieră-prăbușire
Rama în jurul mesei
| Titlul 1 | Rubrica 2 | Rubrica 3 |
|---|
| Celula 2x1 | Celula 2x2 | Celula 2x3 |
| Celula 3x1 | Celula 3x2 | Celula 3x3 |
Câmpurile și spațiul tabelelor
În mod implicit, celulele tabelului sunt dimensionate pentru a se potrivi cu conținutul lor, dar uneori este necesar să lăsați câteva umpluturi în jurul datelor tabelului. Deoarece spațiul și marginile sunt legate de elementele de prezentare a datelor, acest spațiu este personalizabil folosind foi de stil CSS. Câmp celular ( căptușeală) Este distanța dintre conținutul celulei și marginea acesteia. Pentru ao adăuga, utilizați proprietatea căptușeală a elementa |
sau |
... Spațierea celulei ( spațiere la margine) Este distanța dintre ele ( |
sau |
). Mai întâi atribuiți valoarea separa proprietate frontieră-prăbușire element
și apoi setați spațiul dintre celule modificând valoarea parametrului spațiere la margine... Anterior, atributele erau responsabile pentru câmpuri și spațierea celulelor. acoperirea celulelorși spațierea celulelor element
dar au fost depreciate în specificația HTML5.
Exemplu de utilizare căptușealăși spațiere la margine:
Exemplu: Aplicarea proprietăților căptușealăși spațiere la margine
căptușeală și spațiere la margine
| Celula 1 | Celula 2 |
| Celula 3 | Celula 4 |
Lățimea mesei
Lățimea ocupată de tabel în fereastra browserului poate fi specificată folosind proprietatea lăţime CSS, în pixeli sau procente. Specificarea lățimii tabelului în pixeli vă permite să determinați lățimea exactă a acestuia. Procentul vă permite să faceți masa flexibilă, adică se va „întinde” sau „se va micșora” în funcție de ce alte elemente sunt pe pagină și de cât de mare este fereastra browserului.
Iată un exemplu de utilizare a proprietății lăţime: Tabel (lățime: 100%;) Exemplu: Aplicarea unei proprietăți lăţime
| Celula 1 | Celula 2 |
| Celula 3 | Celula 4 |
lățime: 100%
| Celula 1 | Celula 2 |
| Celula 3 | Celula 4 |
Concatenarea celulelor (colspan și rowpan)
Una dintre caracteristicile principale ale unei structuri de tabel este concatenarea celulei, care presupune întinderea unei celule pentru a cuprinde mai multe rânduri sau coloane. Acest lucru permite structuri de tabel complexe: anteturi
sau celule |
sunt combinate prin adăugarea de atribute colspan sau anvergură... Atribut colspan determină numărul de celule pe care o anumită celulă le extinde orizontal și anvergură- pe verticală.
Concatenează coloane
Concatenarea coloanei se realizează folosind atributul colspanîn elemente |
sau |
- celula este întinsă spre dreapta pentru a acoperi coloanele ulterioare. În exemplul următor, valoarea atributului colspan este egal cu 2, ceea ce înseamnă că celula trebuie să se întindă pe două coloane.
Exemplu: Aplicarea unui atribut colspan
Atribut Colspan
| colspan= "2"> Celulă cu două coloane |
|---|
| Celula 1 | Celula 2 |
| Celula 3 | Celula 4 |
Concatenarea șirurilor
Șiruri concatenate folosind un atribut anvergură, se comportă exact ca coloanele îmbinate, cu singura diferență că intervalul de celule este de sus în jos și se întinde pe mai multe rânduri.
Acest exemplu întinde prima celulă a tabelului cu două rânduri în jos:
Exemplu: Aplicarea unui atribut anvergură
| Celulă pe două linii |
Celula 1 | Celula 2 |
|---|
| Celula 3 | Celula 4 |
Atribut Rowspan
| anvergură= "2"> Celulă pe două linii |
Celula 1 | Celula 2 |
|---|
| Celula 3 | Celula 4 |
Antetul tabelului
O etichetă de pereche este utilizată pentru a crea un titlu de tabel sau o legendă
(din legenda engleză - semnătură). Element
este pentru organizarea antetului tabelului. Situat imediat după etichetă
dar în afara descrierii unui rând sau a unei celule.
Exemplu: Utilizarea unei etichete
Element de subtitrare
Acesta este antetul tabelului
| Celulă pe două linii |
Celula 1 | Celula 2 |
|---|
| Celula 3 | Celula 4 |
Gruparea etichetelor pentru elementele de masă
Pentru a grupa elementele tabelului, utilizați etichetele
,
și
... La fel cum o pagină web poate conține un antet, corp și subsol, un tabel poate conține un cap, corp și subsol. Pentru a grupa logic rânduri în partea de sus a tabelului (adică pentru a crea capul superior al tabelului), utilizați eticheta
... Anteturile tabelelor trebuie plasate în element
, de exemplu:
| Titlul 1 | Rubrica 2< /th> |
|---|
Conținutul principal (corpul) tabelului trebuie să fie în interiorul elementului
(pot exista mai multe astfel de blocuri în tabel). Pentru a grupa logic rânduri în partea de jos a tabelului (adică pentru a crea un „subsol” al tabelului), utilizați eticheta
(nu este permis mai mult de o etichetă într-un singur tabel
). În codul sursă, eticheta
plasat înaintea etichetei
... În afară de gruparea logică, unul dintre motivele utilizării elementelor
și
este că dacă tabelul dvs. este prea lung pentru a fi afișat simultan pe ecran (sau pentru a fi tipărit), atunci browserul va afișa titlul (
) și ultima linie (
) când utilizatorul parcurge masa dvs.
Exemplu: etichete
,
și
Etichete Thead, tbody și tfoot
| Acesta este antetul tabelului |
|---|
| Acesta este subsolul mesei |
| Celula 1 | Celula 2 | Celula 3 | Celula 4 |
În ciuda faptului că suntem în fața
adăugat
, apare totuși la sfârșitul tabelului. Aceasta vine din faptul că
poate conține multe linii. Dar browserul trebuie să redea partea de jos a tabelului înainte de a obține toate (potențial numeroase) rânduri de date. De aceea
în cod este scris înainte de element
.
Sarcini
Tabelele sunt unul dintre cele mai importante, dar complexe elemente, care trebuie să fie prezente pe paginile web. Cu ajutorul lor, este convenabil să prezentați informații importante și utile într-o formă destul de concisă. Desigur, majoritatea editorilor din șabloane care funcționează pe diferite motoare vă permit să introduceți automat un tabel într-o pagină a unui site sau într-o publicație separată, dar ce se întâmplă dacă proiectarea unei resurse web, paginile sale sunt create de la zero? Apoi, un vrăjitor începător se poate confrunta cu o problemă: cum să o faci. Să ne dăm seama cum să creăm corect și rapid acest element. Alegerea unui editorÎn primul rând, începând să creați un tabel, ar trebui să decideți asupra editorului în care veți lucra. Desigur, cel mai simplu mod este să alegeți programul în care creați codul principal al site-ului. Dar cel mai bine este să folosiți un notebook vechi bun în aceste scopuri. S-ar putea să vă întrebați de ce să vă complicați viața, deoarece dacă faceți totul simultan în editor, atunci rezultatul poate fi văzut imediat și puteți utiliza, de asemenea, sfaturile programului. Da, acest lucru este adevărat, dar prin crearea unui tabel de la zero, nu veți putea doar să studiați temeinic principiul creării sale, ci și să preveniți greșelile de greșeală și erorile enervante din codul principal. Uneori se întâmplă ca cursorul să se deplaseze accidental în jos și, în procesul de scriere, o eroare se strecoară în cod, ceea ce este uneori dificil de găsit. Odată ce creați un tabel într-un blocnotes, puteți copia cifrul acestuia și îl puteți lipi unde doriți. Algoritm pentru crearea unei tabeleÎn primul rând, să punem împreună un scurt algoritm despre cum să realizăm un tabel în HTML. Aceasta pentru a înțelege succesiunea fiecărui pas. Apoi vom analiza exact cum să realizăm fiecare dintre puncte. 
Să începem cu pașii pregătitori. 1. Desenați o imagine schematică a tabelului pe o foaie de hârtie. 2. Numărăm numărul de linii și celule. Dacă numărul acestora din urmă este diferit, vom conta pentru fiecare rând separat. 3. Determinați numărul de celule de antet din rând (de exemplu, celulele „Nu”, „Nume” etc.). 4. Scrieți parametrii principali ai tabelului - culoare, înălțime și lățime, alinierea textului - în general, orice credeți că este necesar. 1. Introduceți etichete ale tabelului. 2. Introduceți etichete de linie pe baza numărului de care aveți nevoie. 3. În rânduri, introduceți etichetele celulelor (obișnuite și majuscule), de asemenea, pe baza numărului pe care l-ați scris pe hârtie. 4. Setați parametrii pentru tabel în ansamblu. 5. Dacă este necesar, setați indicatori pentru celule individuale. 6. Ne umplem celulele cu text. 
Creați un tabelDeci, ați ales un editor, acum să ne dăm seama cum să creați un tabel în HTML. Eticheta cu care tabelul este inserat în codul paginii ( ), este asociat, adică construcția noastră începe cu această etichetă și se termină cu .După ce ați inserat etichetele tabelului, continuăm să creăm rânduri și celule. Imediat, observăm că și aceste elemente sunt împerecheate. Etichetă specifică șiruri și | - celule. Pentru celulele de antet, utilizați elementul asociat | . După cum sa menționat deja, primul pas este să trasați liniile, apoi să scrieți celulele în ele. Pentru a nu vă confunda, vă sfătuim fie să faceți o liniuță între fiecare bloc într-una sau două rânduri, fie să scrieți un bloc nou de elemente folosind tasta „Tab”. Cum ar putea arăta? Ca asta: ;;| P / p Nr. | ;| Nume de familie | ; ;;| 1 | ;| Ivanov | ; | ; .
După cum puteți vedea, nu este nimic complicat în acest sens. Principalul lucru nu este să vă confundați cu numărul de linii și celule. În caz contrar, masa se poate înclina. Am discutat despre crearea unui tabel în HTML, acum putem trece la parametrii atât ai matricei, cât și ai rândurilor și celulelor sale. 
Parametrii tabeluluiCând este scris codul, ar trebui să acordați atenție următoarelor puncte: alinierea la margini, fundal, text și așa mai departe. Parametrii tabelului sunt setați în etichetă ... Acestea includ:1. Border - lățimea chenarelor. Setați ca număr întreg. În mod implicit, marginile oricărui tabel sunt zero. 2. Bordercolor - culoarea chenarului. Poate fi setat ca un cod de culoare hexazecimal (# 00008B), iar numele său în engleză (DarkBlue). Este întotdeauna gri în mod implicit. 3. Bgcolor - Setat și după cod sau nume. 4. Align - alinierea textului în spatele mesei. Valoarea implicită este aliniată la stânga. Există următoarele opțiuni pentru acest parametru: - stânga - înfășurați în dreapta;
- dreapta -înfășurarea la stânga;
- centru - afișează masa în centru fără împachetare.
5. Lățimea și înălțimea - lățimea și înălțimea mesei. Poate fi setat atât în pixeli, cât și ca procent (în raport cu dimensiunea ferestrei browserului). Prescriind acest indicator sau altul, ar trebui să acordați o atenție specială proiectării. Parametrul trebuie să fie urmat de un semn „egal”, urmat de valoarea specificată între ghilimele. În ceea ce privește culoarea textului, acesta este stilat în același mod ca textul normal în format HTML. Un exemplu de proiectare a mesei: ;;| P / p Nr. | ;| Nume de familie | ; ;;| 1 | ;| Ivanov | ; | ; .
Parametrii șiruluiDeci, am aflat deja cum să realizăm un tabel în HTML și să înregistrăm parametrii săi principali. Dar dacă trebuie să evidențiem un rând? Ar trebui să fie stilat diferit de textul principal al tabelului? Parametrii șirului sunt scrise în etichetă exact la fel ca datele din tabel. Următoarele variabile pot fi setate pentru un șir:1. Border, bordercolor și bgcolor deja cunoscute de dvs. 2. Align - alinierea textului într-o linie. Poate lua valorile la stânga, centru și dreapta. 3. Valign - această etichetă aliniază textul pe verticală. Este nevoie de următoarele valori: - sus - textul este aliniat la marginea superioară;
- mijloc - în centru;
- jos - de-a lungul marginii de jos.
Exemplu de formatare a liniei: ;| P / p Nr. | ;| Nume de familie | ; .
Parametrii celuleiȘi ultimul lucru la care merită să fim atenți pentru cei care doresc să știe cum să facă un tabel în HTML sunt parametrii celulelor individuale, atât obișnuite, cât și cu majuscule. De fapt, totul se face în același mod ca și pentru o masă sau un rând. Singurul lucru este că se adaugă încă două elemente importante: 1. Colspan - acest parametru specifică numărul de coloane pe care celula le poate cuprinde. 2. Rowspan - indică deja numărul de rânduri pe care le ocupă această celulă. Deoarece proiectarea nu diferă de a scrie o linie, nu vom da un exemplu de cod. 
concluziiRealizarea unei mese nu este atât de dificilă pe cât ar putea părea la prima vedere. Principalul lucru atunci când scrie codul ei este perseverența și atenția. În ceea ce privește modul de inserare a unui tabel în HTML, trebuie doar să copiați și să lipiți cifrul acestuia în locul exact al paginii dvs. unde, după părerea dvs., ar trebui să fie localizat. Simțiți-vă liber să experimentați și veți stăpâni în curând tehnica de creare a meselor la perfecțiune. Noroc!
Tabelele HTML sunt atât de funcționale încât le puteți folosi pentru a compila site-uri întregi (citiți). Acum vom vorbi despre inserarea tabelelor HTML simple într-o pagină web, analizarea doar a marcajului, dar nu atingerea designului, deoarece este mai bine să decorați tabelele cu stiluri CSS.
Etichete și atribute de tabel
Iată elementele de bază de care aveți nevoie pentru a crea tabele:
- recipientul în interiorul căruia se află masa (la fel ca pentru etichetat sau
pentru liste numerotate).
- frontieră- un atribut care determină grosimea cadrelor. Este mai bine să utilizați proprietatea CSS de frontieră.
-
specifică semnătura tabelului. Nu este nevoie să utilizați containerul, dar dacă totuși decideți să titlați tabelul, puneți-l imediat după etichetă
, în afara celulelor și liniilor.
- o etichetă asociată care conține un rând de tabel (celule situate la același nivel orizontal).
|
- eticheta care creează celula antet tabel. În exterior, conținutul său diferă de conținutul din alte celule - de obicei textul din interior |
browserul este îndrăzneț și centrat.
- un container cu care este creată o celulă simplă. Câte astfel de etichete va conține șirul (tag
, vor fi la fel de multe celule în ea: o etichetă - o celulă.
-
vă permite să grupați coloanele, rapid și fără a aglomera codul pentru a le defini caracteristici comune. Folosind un container, puteți separa părțile logice ale unui tabel unul de celălalt. Situat după etichetă
, dacă nu, atunci după
.
-
folosit în același scop ca
.
poate conține
dar nu invers.
- span- un atribut care specifică numărul de coloane cărora li se aplică proprietățile containerului
.
-
,
și
- containere care vă permit să împărțiți masa, respectiv, în părțile superioare (anteturi), principale (corp) și inferioare (finale). Într-un tabel HTML, secvența acestor etichete este aceeași cu secvența containerelor
,
și în documentul HTML.
- colspan necesar pentru a combina celulele la rând. Valoarea atributului conține un număr care specifică numărul de celule care trebuie îmbinate.
- anvergurăîmbină celulele în coloane.
Exemplu de creare a unui tabel
Creați un document HTML și copiați următorul cod în el:
Exemplu de tabel
Instrumente de construire a site-urilor web
| Programare | Instrument |
| Markup | HTML | XHTML |
| Înregistrare | CSS |
| Dezvoltare a | PHP | Piton |
În browser, documentul va arăta astfel: Să analizăm ce linii de cod sunt responsabile pentru ce.
- a deschis masa prin setarea grosimii ramelor.
-
Instrumente de construire a site-urilor web
- l-a intitulat.
- a deschis o linie.
|
Programare |
- a creat o celulă cu un design de titlu.|
Instrument |
- a creat o a doua celulă de antet în rând. Parametrul colspan a indicat faptul că această celulă ar trebui să ocupe două pe orizontală.
- a închis linia. Restul liniilor au fost create în același mod. |
Markup |
HTML |
XHTML |
- a adăugat al doilea rând al tabelului cu celulele obișnuite, nu antet. Rândurile și celulele ulterioare au fost inserate în mod similar.
- a închis masa.
este corpul mesei. Corpul este format din rânduri și coloane. Tabelul este umplut rând cu rând.
Fiecare etichetă creează o nouă linie. Mai departe în cuibărit sunt create coloane. Pot fi create mai multe coloane. În acest caz, trebuie să țineți evidența numărului de coloane din fiecare rând. De exemplu, dacă primul rând avea 5 coloane, atunci rândurile următoare ar trebui să aibă și 5 coloane. În caz contrar, masa va pluti. Este posibil să combinați celule.
Cum se face un tabel în html
Să dăm un exemplu, cod html:
| Exemplu de tabel |
| Coloana 1 |
Coloana 2 |
Fii atent la celulă | ... Folosim atributul special colspan pentru a combina celulele pe orizontală. Valoarea sa numerică indică numărul de coloane de combinat. Există, de asemenea, un analog al acestui atribut: tag | (antetul tabelului), unde trebuie să scrieți și colspan. Rezultatul va fi același. Dar td obișnuit este adesea folosit.
Acum, să aruncăm o privire mai atentă asupra tuturor atributelor etichetei.
.
Etichetați atributele și proprietățile
La eticheta de deschidere puteți scrie diverse atribute.
1. Proprietate align = "parametru" - setează alinierea tabelului. Poate lua următoarele valori:
În exemplul de mai sus, am aliniat tabelul în centru align = "center".
Acest atribut poate fi aplicat nu numai unui tabel, ci și celulelor individuale ale tabelului. sau corzi | ... Astfel, alinierea va fi diferită în celule diferite.
De exemplu
| ... |
| ... |
...
2. Proprietatea fundal = "URL" - setează imaginea de fundal. În locul adresei URL, trebuie să se scrie adresa imaginii de fundal.
Exemplu
| Exemplu de tabel |
| Coloana 1 |
Coloana 2 |
Conversie pe pagină în următoarele:
În exemplul de mai sus, imaginea noastră de fundal se află în folderul img (care se află în același director cu pagina html), iar imaginea se numește fon.gif. Rețineți că în etichetă am adăugat style = "color: white;" ... Deoarece fundalul este aproape negru, astfel încât textul să nu se îmbine cu fundalul, am făcut textul alb.
3. Proprietatea bgcolor = "color" - setează culoarea de fundal a tabelului. Ca culoare, puteți alege oricare dintre întreaga paletă (consultați codurile și numele culorilor html)
4. Bordura proprietății = "număr" - setează grosimea marginii tabelului. În exemplele anterioare, am specificat border = "1", ceea ce înseamnă că lățimea chenarului este de 1 pixel.
5. Proprietatea bordercolor = "color" - setează culoarea chenarului. Dacă chenarul = "0", atunci nu va exista niciun chenar și culoarea chenarului nu va avea sens.
6. Proprietate cellpadding = "număr" - indentare de la cadru la conținutul celulei în pixeli.
7. Proprietate cellspacing = "număr" - distanța dintre celule în pixeli.
8. Proprietate cols = "număr" - numărul de coloane. Dacă nu îl specificați, browserul va determina singur numărul de coloane. Singura diferență este că specificarea acestui parametru poate accelera încărcarea tabelului.
9. Proprietate cadru = "parametru" - cum se afișează chenarele în jurul mesei. Poate lua următoarele valori:
- nul - nu desenați margini
- border - chenarul din jurul mesei
- deasupra - chenar în partea de sus a mesei
- dedesubt - margine în partea de jos a tabelului
- ascunse - adăugați numai margini orizontale (partea de sus și de jos a tabelului)
- vsides - desenează doar margini verticale (stânga și dreapta mesei)
- rhs - bordură doar pe partea dreaptă a mesei
- lhs - bordură numai în partea stângă a mesei
10. Înălțimea proprietății = "număr" - setează înălțimea tabelului: fie în pixeli, fie în procente.
11. Reguli de proprietate = "parametru" - unde se afișează marginile dintre celule. Poate lua următoarele valori:
- toate - se trasează o linie în jurul fiecărei celule de masă
- grupuri - linia este afișată între grupurile care sunt formate din etichete , , ,
sau
- cols - linia este afișată între coloane
- niciunul - toate granițele sunt ascunse
- rânduri - marginea este trasată între rândurile de tabel create prin etichetă
12. Lățimea proprietății = "număr" - setează lățimea tabelului: fie în pixeli, fie în procente.
13. Clasa proprietății = "nume_clasă" - puteți specifica numele clasei căreia îi aparține tabelul.
14. Stil de proprietate = "stiluri" - stilurile pot fi setate individual pentru fiecare tabel.
Acum este momentul să vă scufundați în tabel și să priviți atributele celulelor tabelului. Aceste atribute trebuie scrise în eticheta de deschidere.
.
Atribute și proprietăți și |
1. Proprietate align = "parametru" - setează alinierea unei celule de tabel separate. Poate lua următoarele valori:
- alinierea stânga - stânga
- alinierea centru - centru
- alinierea dreapta - dreapta
2. Proprietatea fundal = "URL" - setează imaginea de fundal a celulei. În locul adresei URL, trebuie să se scrie adresa imaginii de fundal.
3. Proprietatea bgcolor = "color" - setează culoarea de fundal a celulei.
4. Proprietatea bordercolor = "color" - setează culoarea chenarului celulei.
5. Proprietate char = "letter" - setează litera din care ar trebui făcută alinierea. Valoarea atributului align trebuie setată la char.
6. Proprietatea colspan = "număr" - setează numărul de celule orizontale de combinat.
7. Înălțimea proprietății = "număr" - setează înălțimea tabelului: fie în pixeli, fie în procente%.
8. Lățimea proprietății = "număr" - setează lățimea tabelului: fie în pixeli, fie în procente%.
9. Proprietatea rowpan = "number" - setează numărul de celule verticale îmbinate.
10. Proprietate valign = "parametru" - aliniere verticală a conținutului celulei.
- sus - aliniază conținutul celulei la partea de sus a liniei
- alinierea mijloc - mijloc
- jos - aliniați la partea de jos
- linie de bază - aliniament de bază
Nota 1 Pentru etichetă | sunt disponibile aceleași opțiuni ca și pentru | ... Parametrii pentru o etichetă | va fi aplicat ierarhic tuturor inauntru
Cum se previne lipirea celulelor de masă
În cazul utilizării chenarului (chenarului celulelor) și a umplerii zero între celule, acestea sunt încă lipite împreună și veți obține o margine dublă. Pentru a evita acest lucru, trebuie să înregistrați tabelul border-collapse: collapse în foaia de stil:
...
Stimate cititor, acum ai aflat multe mai multe despre eticheta tabelului html. Acum vă sfătuiesc să treceți la lecția următoare.
Codul sursă al unui tabel HTML simplu
Celula 1 |
Celula 2 |
Celula 3 |
Celula 4 |
Celula 5 |
Celula 6 |
Celula 7 |
Celula 8 |
Celula 9 |
Anteturi de tabel HTML
Există 2 tipuri de celule în tabelele HTML. Eticheta definește o celulă de tipul obișnuit. Dacă o celulă acționează ca un antet, aceasta este identificată cu o etichetă.
Exemplu de tabel HTML cu titlul
| Volkswagen AG |
Daimler AG |
BMW Group |
|---|
| Audi |
Mercedes-Benz |
BMW |
| Skoda |
Mercedes-AMG |
Mini |
| Lamborghini |
Inteligent |
Rolls-Royce |
Cod sursă tabel HTML cu anteturi
Volkswagen AG |
Daimler AG |
BMW Group |
|---|
Audi |
Mercedes-Benz |
BMW |
Skoda |
Mercedes-AMG |
Mini |
Lamborghini |
Inteligent |
Rolls-Royce |
Concatenează celulele într-un tabel HTML
Tabelele HTML au capacitatea de a combina celulele orizontal și vertical.
La fuzionează celulele pe orizontală folosiți atributul colspan = " NS", la celulă sau, unde X
La fuzionează celulele pe verticală folosiți atributul rowspan = " NS", la celulă sau, unde X- numărul de celule de combinat.
Celulele pot fi combinate orizontal și vertical în același timp. Pentru a face acest lucru, utilizați atât atributele colspan, cât și spanul de rând pentru celula dorită:
Text celular |
Rețineți că numărul de articole din rând se modifică atunci când îmbinați celulele. De exemplu, dacă un tabel are 3 coloane cu celule și combinăm prima și a doua celulă, atunci vor exista 2 elemente în eticheta care definește acest rând, primul dintre ele va conține atributul colspan = "2".
Exemplu de tabel HTML cu concatenare de celule
Sursă de tabel HTML cu celule îmbinate
Nissan |
|---|
Model |
Echipament |
Disponibilitate |
|---|
Nissan Qashqai |
VISIA |
+ |
TEKNA |
+ |
Nissan x-trail |
ACENTA |
+ |
CONNECTA |
- |
Anteturi și subsoluri și semnătură în tabele HTML
Tabelele HTML pot fi împărțite în 3 zone: antet, corp, subsol.
Acest lucru se face prin împachetarea rândurilor părții selectate a tabelului cu etichete. definește zona antetului, - zona subsolului, - corpul mesei.
În mod implicit, anteturile și subsolurile nu au stil (acest lucru se poate face prin CSS dacă este necesar), dar pot fi utilizate de browsere. De exemplu, la tipărirea unui tabel cu mai multe pagini, anteturile și subsolurile pot fi duplicate pe fiecare pagină tipărită.
Ordinea corectă de plasare a etichetelor de zonă în codul HTML al tabelului este următoarea: mai întâi antetul, apoi subsolul, apoi corpul principal. În acest caz, partea principală a paginii va fi afișată între anteturi și subsoluri.
Puteți adăuga o semnătură la masă după cum este necesar. Pentru a face acest lucru, utilizați o etichetă.
Exemplu de tabel HTML cu anteturi și subsoluri și semnătură
Cod sursă pentru tabel cu anteturi și subsoluri și semnătură
Set complet Renault Sandero Stepway
Caracteristică |
SUTA 09H 6R |
SUTA 09HR6R |
SUTA 15H 5R |
|---|
Disponibilitate |
+ |
+ |
+ |
|---|
Puterea motorului |
0,9 (90 CP) |
0,9 (90 CP) |
1.5 (90 CP) |
|---|
Combustibil |
benzină |
benzină |
motorină |
|---|
Rata de toxicitate |
Euro 6 |
Euro 6 |
Euro 5 |
|---|
Coloane și grupuri de coloane
Tabelul HTML poate fi împărțit în coloane și grupuri de coloane utilizând etichetele și.
Această separare vă permite să setați stiluri pentru tabel utilizând un număr minim de proprietăți CSS, reducând astfel cantitatea de cod de tabel (în loc să definiți stiluri pentru fiecare celulă dintr-o coloană, puteți seta stiluri pentru una sau mai multe coloane simultan).
Etichete și plasate în interiorul etichetei înainte de etichete, AKP6 (EDC) Transmisie |
Sursă tabel HTML c și
ZEN 2E2C AL A |
ZEN 2E2C J5 A |
INTENSE 2E3C AL A |
Caracteristică |
|---|
1.5 (90 CP) |
1.2 (115 CP) |
1.5 (90 CP) |
Puterea motorului |
|---|
motorină |
benzină |
motorină |
Combustibil |
|---|
AKP6 (EDC) |
AKP6 (EDC) |
AKP6 (EDC) |
Transmisie |
|---|
Tabelele în aspectul paginii site-ului
Pe site-urile moderne, este important să afișați corect paginile atât pe computere, cât și pe dispozitive mobile. Nu este recomandabil să utilizați tabele pentru a crea un schelet al unei pagini HTML, deoarece se pierde capacitatea de a adapta conținutul la ecrane de diferite dimensiuni (computere, smartphone-uri, tablete).
Etichetele de grup Tabel sunt cel mai bine utilizate într-o pagină pentru a afișa conținut formatat în tabel.
| |
|
| | |
| | |
