Tabelele HTML organizați și afișați datele folosind rânduri sau coloane. Tabelele sunt alcătuite din celule formate prin intersecția rândurilor și coloanelor. Celulele de tabel poate conține orice elemente HTML, cum ar fi titluri, liste, text, imagini, elemente de formular, precum și alte tabele. Puteți adăuga un titlu asociat fiecărui tabel, plasându-l înainte sau după tabel.

Tabelele nu mai sunt folosite pentru aspectul paginilor web și aspectul elementelor individuale, deoarece această tehnică nu oferă flexibilitate structurală și adaptabilitate site-ului, crescând semnificativ marcajul HTML.

Pentru toate elementele tabelului, precum și atributele proprii sunt disponibile.

Crearea tabelelor în HTML

• Conţinut:

1. Cum se creează un tabel

Tabelul este creat folosind o etichetă asociată

Fig.1. Aspectul tabelului fără formatare cu proprietăți CSS

În mod implicit, tabelul și celulele nu au margini vizibile. Frontiere sunt setate folosind proprietatea border:

/* marginile exterioare ale tabelului sunt gri, 1px gros */ tabel (chenar: 1px gri solid;) /* chenarele celulelor din primul rând al tabelului */ al-lea (chenar: 1px gri solid;) /* margini a celulelor corpului tabelului */ td (chenar: 1px gri solid;)

Spații dintre celulele tabelului sunt eliminate folosind proprietatea tabelului (border-collapse: collapse;) .

Lăţime Tabelul este implicit la lățimea conținutului său intern. Pentru a seta lățimea, trebuie să setați proprietatea lățime:

/* va face ca lățimea tabelului să fie egală cu lățimea blocului container în care se află */ table (lățime: 100%;) /* va stabili o lățime fixă ​​pentru tabel */ table (lățime: 600px; )

Dacă celulele tabelului au specificate umplutură și chenare, lățimea tabelului va include următoarele valori:
padding-left și padding-right , lățimea chenarului-stânga plus lățimea chenarului-dreapta a ultimei celule din rând. Dacă sunt specificate lățimea și marginile celulelor, atunci lățimea tabelului va fi suma lățimii celulelor plus lățimea marginii din stânga și lățimea chenarului din dreapta ultimei celule din rând.

2. Cum se creează rânduri de tabel

Rândurile sau rândurile de tabel sunt create folosind eticheta

. Numărul de rânduri orizontale ale tabelului este determinat de numărul de etichete pereche .

3. Cum se face o celulă de antet de coloană de tabel

creează un antet 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

4. Cum se face o celulă cu corp de tabel

creează celule de tabel în care sunt plasate datele din tabel. Etichete pereche , situat pe un rând, determină numărul de celule dintr-un rând de tabel. Numărul de perechi de celule trebuie să fie egal cu numărul de perechi de celule. Atributele disponibile pentru element sunt colspan, rowspan, headers.

5. Cum să adăugați o legendă (titlu) la un tabel

Creează o semnătură de 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țându-vă să aplicați stiluri coloanelor în loc să repetați stiluri 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 oferi un aspect uniform. Folosit în combinație cu elemente

Și pentru a indica fiecare parte a tabelului.

Elementul trebuie utilizat în următoarea ordine: ca element copil

, după și, și înainte , Și elemente. Poate fi folosit o dată într-un singur tabel.grupează conținutul principal al tabelului. 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 o dată în tabel. Plasat după etichetă, înaintea etichetelor

Și .

Această grupare de rânduri a fost inclusă în standard în speranța că browserele, atunci când afișează tabele lungi, vor derula rândurile de date, păstrând în același timp staționarea antetului și subheaderului, iar atunci când le trimit către o imprimantă, vor putea folosi antetul și subheaderul. ca subsol de pagină. Cu toate acestea, browserele moderne nu fac acest lucru și fie pur și simplu afișează ambele ca rânduri de date sau, în cel mai bun caz, plasează pur și simplu 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 întinse pe verticală.


Orez. 3. Un exemplu de combinare orizontală a celulelor tabelului folosind atributul colspan

9. Atributele elementelor de tabel

Tabelul 1. Atributele elementelor 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.	...	...
lungimea rândurilor	Numărul de celule din coloană de îmbinat pe verticală.	Valori posibile: număr de la 1 la 999.
span	Numărul implicit de coloane combinate pentru a defini un singur stil este 1.

10. Exemplu de creare a unui tabel


Orez. 4. Creați un meniu de restaurant utilizând un tabel HTML

Marcaj HTML

Meniul restaurantului "Romashka"

Bucătărie	Mâncăruri reci		Mâncăruri calde		Desert
	Salate	Gustări	Prima masă	Cursuri secunde
Rusă	Vinaigreta	Limbă cu hrean	Shchi cu varză murată	Galuste de cartofi	Mere coapte cu miere
	Olivie	Jeleu de vită	Rasolnik de casă	Carasul copt in smantana	Plăcintă cu clătite
	Hering sub o „blană”	Salau biban jeleat	Mijloc de carne	Cotlet "Pozharskie"	Prajitura "Cartofi"
Spaniolă	Ceviche de scoici	Empanadas	Supa de paine cu usturoi	Paella cu fructe de mare	Churros
	Timbal de avocado și ton	Ahotomate	Fabada asturiană	Rakso de porc	Almoixavena
	Fasole cu șuncă	Chanfaina	Supă de pește cu găluște de gris	tortilla de cartofi	Bunuelos
limba franceza	Salata Vosges	Rillette de pui	Supa crema de vinete "Renoir"	Ograten de cartofi	Briochi
	Salata Panzanella	Deliciu de brânză	Supă franțuzească de dovleac	Gratin de pasare	Plăcintă cu lămâie din Liguria
	Tartarul	Somon marinat	Supa "Conti"	Tartiflette	Savarin "Triumful"

Tabelele joacă un rol foarte important în crearea unui cadru invizibil pentru o pagină web. Și acest lucru vă va ajuta să aranjați textul, meniurile, imaginile etc. uniform și frumos.
Pentru a înțelege mai bine ce încerc să vă spun, aruncați o privire la acest exemplu de cadru fir de pagină web:

Asa de, cum să faci un tabel simplu în HTML?
Pentru a construi un tabel, trebuie să utilizați trei etichete:

MASA – această etichetă este necesară pentru a deschide masa. Este un fel de recipient care conține alte elemente. Este îndoit în așa fel încât să nu-ți poți da seama fără o gogoașă. Este în regulă, îți vei da seama când vei vedea un exemplu.
Etichetă de închidere necesar.

Tabelul este format dintr-un rând

rândul 1	rândul 1
rândul 2	rândul 2
rândul 3	rândul 3

celula 1	celula 2
celula 1	celula 2
celula 1	celula 2

TR – creează un nou rând de tabel. Etichetă de închidere necesar.

T.D. – creează o nouă celulă pe rând. Etichetă de închidere necesar.

Să ne uităm la un exemplu pentru a înțelege mai bine toate cele de mai sus:

rândul 1 celula 1	rândul 1 celula 2
rândul 2 celula 1	rândul 2 celula 2
rândul 3 celula 1	rândul 3 celula 2

Iată rezultatul:

rândul 1 celula 1	rândul 1 celula 2
rândul 2 celula 1	rândul 2 celula 2
rândul 3 celula 1	rândul 3 celula 2

Lasă-mă să explic totul.
Înainte de fiecare creare a unui nou tabel, se deschide o etichetă

.
Apoi, puneți-l în mijlocul recipientului etichetă , care indică începutul unei noi serii.
În acest rând inserăm două celule cu conținut folosind eticheta

Închiderea rândului cu o etichetă .
Deschideți un alt rând cu o etichetă
Închiderea rândului cu o etichetă .
Deschideți al treilea rând cu eticheta și introduceți din nou două celule în el.
Închiderea rândului cu o etichetă .
Închiderea mesei cu o etichetă

rândul 1 celula 1	rândul 1 celula 2

.

Cred că ți-ai dat seama? Dacă cineva a uitat ce este un atribut frontieră pe care îl folosesc împreună cu eticheta

, va reamintesc ca aceasta este grosimea cadrului. Dacă în frontieră va fi setat la „0”, apoi marginile tabelului vor fi invizibile.

Uită-te la câteva exemple a creat tabele si poti merge mai departe:

rândul 1 celula 1

rândul 2 celula 1

Rezultat:

Pentru a insera o imagine într-un tabel, trebuie să aveți cunoștințe de bază despre cum să inserați o imagine într-un fișier HTML. Vorbesc despre asta în. Acum că știți elementele de bază despre imagini în HTML, puteți încerca să inserați o imagine într-un tabel. Acest lucru se poate face după cum urmează:

în linie între etichete inserați imaginea.

rândul 1 celula 1

rândul 1 celula 2

Rezultat:

rândul 1 celula 1

rândul 1 celula 2

Cum să îmbinați celulele într-un tabel?

Pentru a îmbina celulele într-un tabel, trebuie să utilizați următoarele atribute:
COLSPAN– definește numărul de coloane.
Valoarea implicită este 1.
ROWSPAN– determină numărul de rânduri.
Valoarea implicită este 1.

fuzionarea celulelorîn rândul de sus folosind atributul colspan :

rândul 1 celula 1+2
rândul 2 celula 1	rândul 2 celula 2

Rezultat:

Cum se stabilesc dimensiunea mesei?

Pentru a seta înălțimea și lățimea tabelului, utilizați următoarele atribute:

LĂŢIME– latimea mesei. Mărimea este specificată în pixeli sau procente.
ÎNĂLŢIME– înălțimea mesei. Mărimea este specificată în pixeli sau procente.

rândul 1 celula 1	rândul 1 celula 2
rândul 2 celula 1	rândul 2 celula 2

Rezultat:

Alinierea conținutului într-un tabel

Pentru a alinia conținutul (text, imagini) în interiorul unui tabel, puteți utiliza următoarele atribute:

ALINIA– alinierea orizontală a conținutului din tabel.
A atribui ALINIA valori atribuite: stânga (implicit), centru,dreapta.
stânga - apăsați conținutul în partea stângă;
centru - instalați în centru;
dreapta -împingeți conținutul în partea dreaptă

VALIGN– alinierea verticală a conținutului în tabel.
A atribui VALIGN valori atribuite: sus, jos, mijloc.
top – apăsați conținutul în partea de sus;
fund – apăsați conținutul în jos;
mijloc – setați conținutul la mijloc

rândul 1 celula 1	rândul 1 celula 2
rândul 2 celula 1	rândul 2 celula 2

Rezultat:

Cum să faci un fundal de masă?

De asemenea, puteți seta fundalul tabelului pentru toate celulele sale împreună, precum și pentru fiecare celulă în mod individual. Puteți seta fundalul cu o culoare sau cu o imagine. Există două atribute pentru fundal:

BGCOLOR– culoare de fundal pentru întregul tabel sau pentru fiecare celulă în mod individual. Culoarea este specificată prin cod sau cuvânt.
FUNDAL– fundalul din tabel este umplut cu o imagine.

Atenţie: dacă doriți să setați o culoare de fundal sau o imagine de fundal pentru întregul tabel, atributele trebuie setate în etichetă

. Și dacă doar la o anumită celulă, atunci la etichetă

. Pentru o mai bună înțelegere, vezi exemplul: rândul 1 celula 1 rândul 1 celula 2 rândul 2 celula 1 rândul 2 celula 2 Rezultat: Atenţie: dacă imaginea este mai mică ca dimensiune pe celulă, atunci se va repeta până când umple celula până la sfârșit. Dacă imaginea este mai mare decât celula, atunci fundalul imaginii va fi decupat pentru a se potrivi cu celula. Și, în sfârșit, vă voi spune despre două atribute utile. În cazul în care doriți să creșteți brusc distanța dintre toate celulele, următoarele atribute vă vor ajuta: CELLPADDING– distanța dintre cadrul fiecărei celule a tabelului html și materialul conținut în aceasta. rândul 1 celula 1 rândul 1 celula 2 rândul 2 celula 1 rândul 2 celula 2 Rezultat: rândul 1 celula 1 rândul 1 celula 2 rândul 2 celula 1 rândul 2 celula 2 SPAȚIAREA CELULULOR– distanța dintre limitele celulelor învecinate. rândul 1 celula 1 rândul 1 celula 2 rândul 2 celula 1 rândul 2 celula 2 Rezultat: rândul 1 celula 1 rândul 1 celula 2 rândul 2 celula 1 rândul 2 celula 2 Puff, ți-am spus! Sper că am făcut față sarcinii și am explicat clar tot ce știam tabele html. Vă recomand să asigurați bine materialul. Încercați să vă creați propriul tabel sau, mai bine, un întreg cadru pentru o pagină web dintr-un tabel html. Toate cele bune! Mulțumesc că ai vizitat blogul meu Datorită versatilității tabelelor și numărului mare de parametri care le controlează aspectul, tabelele au devenit de mult un standard cert pentru aspectul paginilor web. Un tabel cu o margine invizibilă arată ca o grilă modulară, în blocurile căreia este convenabil să plasați elemente de pagină web. Cu toate acestea, aceasta nu este o abordare complet corectă, deoarece fiecare obiect HTML este definit pentru propriile scopuri, iar dacă nu este utilizat în scopul propus și peste tot, aceasta înseamnă că nu există alternative. Acesta a fost cazul pentru o lungă perioadă de timp, până când straturile au înlocuit tabelele în aspectul site-ului web. Acest lucru nu înseamnă că acum straturile sunt folosite tot timpul, dar tendința a apărut deja în mod clar - tabelele sunt folosite pentru a plasa date tabulare, iar straturile sunt folosite pentru aspect și design. Crearea unui tabel Un tabel este format din rânduri și coloane de celule care pot conține text și imagini. Tabelele sunt de obicei folosite pentru a organiza și prezenta date, dar tabelele nu se limitează la asta. Folosind tabele, este convenabil să dispuneți aspectul paginilor prin aranjarea fragmentelor de text și imagini în modul dorit. Pentru a adăuga un tabel la o pagină web, utilizați eticheta . Acest element servește ca un container pentru elementele care definesc conținutul tabelului. Orice tabel constă din rânduri și celule, care sunt specificate respectiv folosind etichete Și creează o nouă linie. Mai departe în imbricat . Tabelul trebuie să conțină cel puțin o celulă (exemplul 12.1). Permis în loc de etichetă utilizați eticheta . Text într-o celulă stilată cu o etichetă , este afișat de browser cu caractere aldine și aliniat la centrul celulei. În caz contrar, diferențele dintre celule create prin etichete Și Nu. Exemplul 12.1. Crearea unui tabel Celula 1 Celula 2 Celula 3 Celula 4 Ordinea celulelor și aspectul lor este prezentată în Fig. 12.1. se află corpul mesei. Corpul este format din rânduri și coloane. Tabelul este completat rând cu rând. Fiecare etichetă sunt create coloane. Puteți crea mai multe coloane. În acest caz, trebuie să monitorizați numărul 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ă fuzionați celule. Cum se face un tabel în html Iată un exemplu, cod html: Exemplu de tabel Coloana 1 Coloana 2 Acordați atenție celulei . Folosim atributul special colspan pentru a acoperi celulele pe orizontală. Valoarea sa numerică indică numărul de coloane care trebuie îmbinate. Există și un analog al acestui atribut: tag (antetul tabelului), unde trebuie să introduceți și colspan. Rezultatul va fi același. Dar adesea folosesc td obișnuit. Acum să aruncăm o privire mai atentă la toate atributele etichetei . Atribute și proprietăți de etichetă La eticheta de deschidere Puteți specifica diverse atribute. 1. Proprietatea align="parameter" - setează alinierea tabelului. Poate lua următoarele valori: În exemplul de mai sus, am aliniat tabelul la centru align="center" . Acest atribut poate fi aplicat nu numai tabelului, ci și celulelor individuale ale tabelului . Astfel, alinierea va fi diferită în diferite celule. De exemplu , , , sau cols - linia este afișată între coloane niciunul - toate granițele sunt ascunse rânduri - este trasată o chenar între rândurile de tabel create prin etichetă 12. Property width="number" - setează lățimea tabelului: fie în pixeli, fie în procente. 13. Proprietate class="class_name" - puteți specifica numele clasei căreia îi aparține tabelul. 14. Property style="styles" - stilurile pot fi setate individual pentru fiecare tabel. Acum este timpul să vă scufundați în interiorul tabelului și să priviți atributele celulelor din tabel. Aceste atribute ar trebui să fie scrise în eticheta de deschidere Și Sunt disponibile aceleași opțiuni ca și pentru va fi aplicat ierarhic tuturor sau linii ... ... ... 2. Proprietate background="URL" - setează imaginea de fundal. În loc de URL, trebuie scrisă adresa imaginii de fundal. Exemplu Exemplu de tabel Coloana 1 Coloana 2 Se convertește în următoarele pe pagină: Î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. Vă rugăm să rețineți că în etichetă am adăugat style="color:white;" . Deoarece fundalul este aproape negru, pentru a preveni amestecarea textului cu fundal, am făcut textul alb. 3. Proprietatea bgcolor="color" - setează culoarea de fundal a tabelului. Puteți alege orice culoare din întreaga paletă (vezi codurile și denumirile culorilor html) 4. Property border="number" - setează grosimea chenarului tabelului. În exemplele anterioare, am specificat border="1" , ceea ce înseamnă că grosimea marginii este de 1 pixel. 5. Proprietate bordercolor="color" - setează culoarea chenarului. Dacă border="0" atunci nu va fi nicio chenar și culoarea chenarului nu va avea nicio semnificație. 6. Proprietate cellpadding="number" - indentare de la cadru la conținutul celulei în pixeli. 7. Proprietate cellspacing="number" - distanța dintre celule în pixeli. 8. Proprietatea cols="number" - numărul de coloane. Dacă nu îl setați, browserul însuși va determina numărul de coloane. Singura diferență este că specificarea acestui parametru va grăbi cel mai probabil încărcarea tabelului. 9. Property frame="parameter" - cum să afișați chenarele în jurul tabelului. Poate lua următoarele valori: gol - nu desenați granițe chenar - chenar în jurul mesei deasupra - chenar de-a lungul marginii de sus a mesei dedesubt - chenar în partea de jos a tabelului hsides - adăugați doar margini orizontale (sus și jos tabel) vssides - desenați doar margini verticale (în stânga și în dreapta tabelului) rhs - chenar numai pe partea dreaptă a mesei lhs - chenar numai pe partea stângă a mesei 10. Proprietate height="number" - setează înălțimea tabelului: fie în pixeli, fie în procente. 11. Reguli de proprietate="parametru" - unde se afișează chenarele dintre celule. Poate lua următoarele valori: toate - se trasează o linie în jurul fiecărei celule de tabel grupuri - este afișată o linie între grupurile formate din etichete . Atribute și proprietăți 1. Proprietatea align="parameter" - setează alinierea unei celule individuale de tabel. Poate lua următoarele valori: alinierea stânga - stânga aliniament centru - centru alinierea dreapta - dreapta 2. Proprietate background="URL" - setează imaginea de fundal a celulei. În loc de URL, trebuie scrisă adresa imaginii de fundal. 3. Proprietatea bgcolor="color" - setează culoarea de fundal a celulei. 4. Proprietate bordercolor="color" - setează culoarea marginii celulei. 5. Proprietatea char="letter" - specifică litera din care trebuie făcută alinierea. Valoarea atributului align trebuie setată la char. 6. Proprietatea colspan="număr" - setează numărul de celule orizontale care trebuie îmbinate. 7. Proprietate height="number" - setează înălțimea tabelului: fie în pixeli, fie ca procent. 8. Property width="number" - setează lățimea tabelului: fie în pixeli, fie ca procent. 9. Proprietate rowspan="număr" - setează numărul de celule verticale care trebuie îmbinate. 10. Proprietatea valign="parameter" - alinierea verticală a conținutului celulei. sus - aliniați conținutul celulei la marginea de sus a rândului aliniament mijloc - mijloc jos - alinierea la marginea de jos linia de bază - alinierea la linia de bază Nota 1 Pentru etichetă . Parametri pentru o etichetă înăuntrul lui Cum să preveniți lipirea marginilor celulelor dintr-un tabel Dacă utilizați o chenar (chenar de celulă) și zero padding între celule, acestea sunt încă lipite împreună și obțineți un chenar dublu. Pentru a evita acest lucru, trebuie să specificați border-collapse: collapse în stilurile de tabel: ... Dragă cititor, acum ați aflat mult mai multe despre eticheta html table. Acum vă sfătuiesc să treceți la următoarea lecție. Această prelegere discută în detaliu principiile utilizării tabelelor în marcajul HTML. Aceasta include o organizare tabelară a textului, o grilă de coordonate tabelară și grafice organizate în tabele. Instrumente pentru descrierea tabelelor în HTML Pe măsură ce WWW s-a dezvoltat, a devenit clar că resursele conținute în HTML nu erau suficiente pentru afișarea de înaltă calitate a diferitelor tipuri de documente. Dezavantajul HTML a fost lipsa instrumentelor pentru afișarea tabelelor. În acest scop, textul preformatat (tag ), în care tabelul a fost conturat cu caractere ASCII. Dar această formă de prezentare a tabelelor nu a fost de o calitate suficient de înaltă și s-a remarcat din stilul general al documentului. După introducerea tabelelor în HTML, webmasterii au avut nu doar un instrument pentru plasarea textului și a datelor numerice, ci și un instrument puternic de proiectare pentru plasarea imaginilor grafice și a textului în locul potrivit pe ecran. 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) 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 - tag<Т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 definește numărul de celule Masa Dacă un tabel are două etichete TR, atunci are două rânduri. Dacă există trei etichete TD într-o linie, apoi în ea trei coloane. Titluri de coloană din tabel - etichetă<ТН> Titlurile pentru coloanele și rândurile tabelului sunt setate folosind eticheta antet<ТН>(TableHeader, titlul tabelului). Aceste etichete sunt similare<ТD>. Diferența este că textul inclus între etichete<ТН>, este scris automat cu caractere aldine și este plasat implicit în mijlocul celulei. Puteți decentra textul și puteți alinia textul 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ă font aldine în tabele, așa că este mai bine să setați titlurile tabelului folosind<ТН>. Antetul este centrat în mod implicit Antetul poate uni 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 a semna o poză. Pentru a face acest lucru, este suficient să descrii un tabel fără margini. Antet deasupra tabelului Text sau date Text sau date Text sau date Text sau date Sub tabel Text sau date Text sau date Text sau date Atributul NOWRAP În mod obișnuit, orice text care nu se încadrează pe un rând al unei celule de tabel se mută pe 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 potrivească pe o singură linie. Atributul COLSPAN Etichete<ТD>Și<ТН>modificat folosind atributul COLSPAN (Column Span, conexiune coloane). Dacă doriți să faceți o celulă mai lată decât partea de sus sau de jos, puteți utiliza atributul COLSPAN pentru a o întinde peste orice număr de celule obișnuite. 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 obișnuite. Atributul ROWSPAN Atributul ROWSPAN utilizat în etichete<ТD>Și<ТН>, este similar cu atributul COLSPAN=, doar că specifică numărul de linii peste care este întinsă celula. Dacă ați specificat 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 este utilizat în două cazuri. Î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 cu o lățime de 250 de pixeli, indiferent de dimensiunea paginii de pe monitor. Când setați WIDТН=50% în etichetă<ТАВLЕ>tabelul va ocupa 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 zona 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ă, oricare dintre metodele de setare a lățimii mesei poate fi utilă. Text sau date - lățime 100% sau Text sau date - lățime 50% sau Text sau date - 200 pixeli lățime sau Text sau date - 100 pixeli lățime Aplicarea celulelor goale Dacă o celulă nu conține date, nu va avea margini. Dacă doriți ca o celulă să aibă margini, dar fără conținut, trebuie să puneți ceva în ea care nu va fi vizibil atunci când este vizualizat. Puteți folosi un șir gol<ВR>. Puteți chiar să specificați coloane goale prin definirea lățimii lor în pixeli sau unități relative și fără introducerea de date în celulele rezultate. Acest instrument poate fi util atunci când plasați text și elemente grafice pe o pagină. atributul CELLADDING Acest atribut determină lățimea spațiului gol dintre conținutul celulei și marginile acesteia, adică stabilește 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 folosind atributele ALIGN și VALIGN. Atributul ALIGN determină dacă textul și graficele sunt aliniate orizontal, adică la stânga sau la dreapta sau centrate. Alinierea orizontală poate fi setată în mai multe moduri: ALIGN=sângerare la stânga apasă 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 Centrează conținutul celulei. ALIGN=dreapta Aliniază conținutul unei celule 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 într-o celulă. Alinierea verticală poate fi setată î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 într-o celulă. top, mijloc, fund. VALIGN=top Aliniază conținutul unei celule la marginea de sus. top, top, top. VALIGN=middle Centrează conținutul unei celule pe verticală. mijloc, mijloc, mijloc. VALIGN=bottom Aliniază conținutul unei celule 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 specificați un cadru, veți obține un tabel fără linii, dar le va fi alocat spațiu. 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ță. Pentru a atrage atenția asupra unei imagini sau a unui text, puteți seta exclusiv chenare îndrăznețe. Când creați tabele imbricate, trebuie să faceți chenare de diferite grosimi pentru diferite tabele pentru a le face mai ușor de distins. Atributul CELLSPACING Atributul CELLSPACING specifică lățimea spațiilor dintre celule în pixeli. Dacă acest atribut nu este specificat, valoarea implicită este de doi pixeli. Folosind atributul CELLSPACING=, puteți plasa text și imagini oriunde aveți nevoie de ele. Dacă doriți să lăsați un spațiu gol, puteți scrie 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 ce etichetă (TABLE, TR, TD) este utilizată, culoarea de fundal poate fi setată pentru întregul tabel, pentru un rând sau pentru o celulă individuală. Valoarea acestui atribut este codul RGB sau numele culorii standard. Text sau date Text sau date Text sau date Text sau date Text sau date Text sau date Atributul BACKGROUND Acest atribut specifică imaginea de fundal pentru tabele. Se aplică etichetelor TABLE și TD. Valoarea sa este adresa URL a fișierului imagine de fundal. Utilizarea acestui atribut este discutată mai jos. Utilizarea tabelelor în designul paginii Lucrul bun despre mese este că puteți face marginile lor invizibile dacă doriți. Acest lucru permite utilizarea etichetei<ТАВLЕ>plasați frumos textul și graficele pe pagină. Pa tag<ТАВLЕ>rămâne singurul instrument puternic de formatare în HTML. Designerii de pagini web au acum aproape aceeași libertate în ceea ce privește utilizarea spațiului alb ca și designerii de pagini tipărite. Tabelele sunt cea mai bună modalitate de a vă îndepărta de plasarea ierarhică a textului pe paginile Web. Dacă browserul acceptă tabele, de obicei va afișa corect cele mai interesante efecte obținute folosindu-le Universitatea Pedagogică de Stat din Ural Bine ati venit! Curs de formare „Bazele stăpânirii WEB” Crearea de mese colorate Unele browsere vă permit să afișați culori. 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ă puteți înconjura masa cu un chenar frumos, dar o puteți seta și la o culoare 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 o culoare specificată. Ca rezultat, culoarea de fundal va fi vizibilă pe toate marginile tabelului și liniile 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 complex, timpul de încărcare a paginii va crește doar ușor. Cele mai bune articole pe această temă Inscripționați o imagine pe o unitate flash ultraiso: simplificând complexul Ce este WhatsApp și cum se instalează Cum să resetați setările pe Android la setările din fabrică - în detaliu Categorii: Programe Siguranță Windows 10 Fier Windows 8 In contact cu Erori © 2024 bumotors.ru. Cum se configurează smartphone-uri și PC-uri. Portal informativ.