Cum se definește un tabel. Mod aproape standard

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, a fost folosit de obicei text preformatat (etichetă), în care tabelul era 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 design pentru plasarea imaginilor grafice și a textului în locul potrivit pe ecran.

Crearea tabelelor în HTML

Eticheta este folosită pentru a descrie tabelele. Eticheta, ca multe altele, traduce automat linia de dinainte și de după tabel.

Crearea unui rând de tabel - etichetă

Eticheta (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

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. Numărul de etichete dintr-un rând determină 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 specificate folosind eticheta antet (TableHeader, antet tabel). Aceste etichete sunt similare. Diferența este că textul inclus între etichete este scris automat cu font aldine și este poziționat implicit în mijlocul celulei. Puteți anula centrarea și alinia textul la stânga sau la dreapta. Dacă este folosit împreună cu eticheta și atributul, textul va arăta și ca un titlu. Cu toate acestea, rețineți că nu toate browserele acceptă fonturi aldine în tabele, așa că este mai bine să setați titlurile tabelelor folosind .

Antetul este centrat în mod implicit. Antetul poate îmbina coloaneleAntetul poate fi plasat înaintea coloanelor Antetul poate concatena linii

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

Utilizarea antetelor de tabel - tag

Eticheta vă permite să creați titluri de tabel. În mod implicit, anteturile sunt centrate și plasate fie deasupra () fie sub tabel (). Titlul poate consta din orice text și imagini. Textul va fi împărțit în linii corespunzătoare lățimii tabelului. Uneori, o etichetă este folosită pentru a subtitra o imagine. Pentru a face acest lucru, este suficient să descrii un tabel fără margini.

Antet deasupra tabelului

Text sau date

Sub tabel

Text sau date

Atributul NOWRAP

De obicei, 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, când utilizați atributul NOWRAP cu sau etichete, lungimea celulei este extinsă astfel încât textul inclus să se potrivească pe o singură linie.

Atributul COLSPAN

Etichetele și sunt modificate utilizând atributul COLSPAN (Column Span, column connection). 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, folosit în etichetele și, este similar cu atributul COLSPAN=, doar că specifică numărul de rânduri pe 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 puteți plasa într-o etichetă pentru a da lățimea întregului tabel sau îl puteți utiliza în sau etichete 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 WIDTH=250 în etichetă, veți obține un tabel cu lățime de 250 de pixeli, indiferent de dimensiunea paginii de pe monitor. Când setați WIDТН=50% în etichetă, 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%

Text sau date - lățime 50%

Text sau date - 200 pixeli lățime

Text sau date - 100 pixeli lățime

Aplicarea celulelor goale

Dacă o celulă nu conține date, nu va avea margini. Dacă doriți ca o celulă să aibă margini, dar fără conținut, trebuie să puneți ceva în ea care nu va fi vizibil atunci când este vizualizat. Puteți folosi un șir gol. 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

Etichetele , și pot fi modificate 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=bleedleft împinge conținutul celulei spre marginea stângă.

ALIGN=left aliniază conținutul celulei la stânga, ținând cont de indentarea specificată de atributul CELLPADDING.

ALIGN=center centrează conținutul celulei.

ALIGN=right aliniază conținutul celulei la dreapta, ținând cont de indentarea specificată de atributul CELLPADDING.

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

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

VALIGN=top aliniază conținutul unei celule la marginea de sus.

VALIGN=middle centrează conținutul celulei pe verticală.

VALIGN=bottom aliniază conținutul celulei la marginea de jos.

Atributul VALIGN aliniază vertical textul și graficele într-o celulă.	top,	mijloc,	fund.
VALIGN=top Aliniază conținutul unei celule la chenarul superior al acesteia.	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

Eticheta definește adesea 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 specificarea . Uneori doriți să faceți chenarul mai gros, astfel încât să iasă mai bine în evidență. Puteți seta margini excepțional de îndrăznețe pentru a atrage atenția asupra unei imagini sau a unui text. Când creați tabele imbricate, trebuie să 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 elemente grafice 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 vă permite să utilizați eticheta pentru a plasa frumos textul și elementele grafice pe pagină. Deocamdată, eticheta 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 Ural Bine ați 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ă ca fundal al paginii. Apoi setați culoarea de fundal a paginii. Ca rezultat, eticheta dvs. va arăta cam așa:

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 (). 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.

Instrucțiuni

Primul pas este să creați un tabel dacă acesta nu există deja. Această acțiune este efectuată în atribut. Etichetele sunt folosite pentru aceasta (este necesară eticheta de închidere):

- masa;
- linie;

- coloana.

Principalele atribute suplimentare:
Border – hotar;

Bordercolor – culoarea chenarului;
lățime – lățime;
Înălțime – înălțime.

Sintaxa pentru un tabel 2X2 fără margine și conținut aliniat stânga/dreapta este:

Conținutul primei celule	Conținutul celei de-a 2-a celule
Conținutul celei de-a 3-a celule	Conținutul celulei a 4-a

Imaginea trebuie plasată după etichetă

. Dacă introduceți o imagine în prima celulă a tabelului prezentat mai sus, veți obține:

	Conținutul celei de-a 2-a celule
Conținutul celei de-a 3-a celule	Conținutul celulei a 4-a

Atribute suplimentare:
lățime – lățime;
Înălțime – înălțime;
Alt - text alternativ care va fi afișat utilizatorului dacă funcția de vizualizare a imaginii este dezactivată;
Aliniere – aliniere orizontală;
Valign – aliniere verticală;
Titlu – legendă pentru imagine.

Puteți folosi imaginea ca link. Pentru a face acest lucru, puneți-l în eticheta corespunzătoare:
În contextul tabelului, ar arăta astfel:

	Conținutul celei de-a 2-a celule
Conținutul celei de-a 3-a celule	Conținutul celulei a 4-a

Opțiuni suplimentare de imagine.

1. Schimbarea imaginii la culoare când treceți cu mouse-ul peste ea și după schimbarea locației cursorului:
onMouseOver="this.style.background="#număr de culoare"" onMouseOut="this.style.background="#număr de culoare""

2. Schimbarea imaginii cu o altă imagine când treceți mouse-ul:
onmouseover="this.src="images/1.gif"" onmouseout="this.src="images/2.gif""

3. Inserarea unui carusel rotativ de imagini într-o celulă de tabel (valorile pot fi modificate):

// 7 variabile pentru a controla comportamentul
var Car_Image_Width=100;
var Car_Image_Height=100;
var Car_Border=true; // adevărat sau fals
var Car_Border_Color="000000"; Border="0"
var Car_Speed=5;
var Car_Direction=true; // adevărat sau fals
var Car_NoOfSides=6; // trebuie să fie 4, 6, 8 sau 12

/* matrice pentru a specifica imagini și link-uri opționale.
Pentru carusel cu 4 fețe, specificați cel puțin 2 imagini
Pentru carusel cu 6 fețe, specificați cel puțin 3
Pentru carusel cu 8 fețe, specificați cel puțin 4
Pentru carusel cu 12 fețe, specificați cel puțin 6
Dacă linkul nu este necesar, păstrați-l ""
*/
Car_Image_Sources=new Array(
"images/1.gif","",
"images/2.gif","",
"images/3.gif","",
"images/4.gif","",
"images/5.gif","",
"images/6.gif",""

// NOTĂ Fără virgulă după ultima linie
);

/******************** NU EDITAȚI MAI JOS **************************** ******/
CW_I=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2);
C_Coef=new Array(
3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4, 0,
Math.PI/4.3*Math.PI/2.5*Math.PI/3.11*Math.PI/6.0,Math.PI/6,Math.PI/3);
var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car_NoOfSides==8?5:9;
C_Pre_Img=new Array(Car_Image_Sources.length);
var C_Angle=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg=Car_NoOfSides,C_MaxW,C_TotalW,
C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSides/2;

Funcție Carusel()
if(document.getElementById)(
pentru(i=0;i

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ă

Aici clasa de linie specifică dimensiunile celulei.

se află corpul mesei. Corpul este format din rânduri și coloane. Tabelul este completat rând cu rând.

Fiecare etichetă
creează o nouă linie. Mai departe în imbricat

Pentru o mai bună înțelegere, uitați-vă la exemplul:

Tabelele în HTML

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ă 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 încă 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 pe care îl conține.

Tabelele în HTML

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

CELLSPACING – distanța dintre marginile celulelor adiacente.

Tabelele în HTML

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 despre tabelele 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

Acest mod se bazează pe modul standard, cu unele excepții: afișarea imaginilor în interiorul celulelor tabelului și a imaginilor una sub alta are loc ca în modul de compatibilitate. Pentru a trece la modul aproape standard, utilizați unul dintre următoarele tipuri de documente.

Pentru cadre în HTML:

Pentru cadre în XHTML:

Imagini una sub alta

Când se afișează imagini pe verticală cu trecere prin linie
Imaginile în modul aproape standard sunt afișate împreună, fără goluri. Exemplul 1.2 arată codul pentru afișarea a două imagini.

Exemplul 1.2. Ieșirea a două imagini

HTML 4.01 IE Cr Op Sa Fx

Imagini verticale

Deoarece desenele au fost anterior unul și „tăiat” pentru comoditate, ele formează o singură imagine (Fig. 1.1).

Orez. 1.1. Ieșirea imaginilor în modul aproape standard

În modul standard, apare un mic decalaj între imagini (Fig. 1.2).

Orez. 1.2. Ieșirea imaginilor în modul standard

Pentru a ocoli această caracteristică în modul standard, există două moduri principale:

adăugare afișare: bloc pentru imagini;

utilizați proprietatea line-height pentru containerul părinte.

Să luăm în considerare aceste metode mai detaliat.

Transformarea unei etichete Elementul bloc ne va ajuta de mai multe ori să ocolim diverse probleme asociate cu imaginile. De data aceasta vom profita de caracteristica că elementele bloc sunt aliniate una sub alta (nu ținem cont de indentări). În acest caz, eticheta
Desigur, ar trebui eliminat din cod (exemplul 1.3).

Exemplul 1.3. Folosind proprietatea bloc

Imagini pe verticală .img IMG (afișare: bloc; )

Nu este necesar să utilizați proprietatea de afișare, puteți utiliza și line-height , această proprietate setează spația dintre linii. Prin setarea etichetei la 1px

În interiorul căruia se află imaginile, vom obține un rezultat similar (exemplul 1.4).

Exemplul 1.4. Folosind proprietatea line-height

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Imaginile pe verticală P.img (înălțimea liniei: 1px; )

Imaginile din tabel

Când adăugați o imagine într-o celulă de tabel, există și diferențe între modurile de browser. Pentru a înțelege, să ne uităm la următorul cod (exemplul 1.5). Pentru a face vizibilă chenarul din jurul tabelului, a fost adăugată o proprietate de chenar la stilurile pentru selectorul TABLE.

Exemplul 1.5. Imagine de masă

HTML 4.01 CSS 2.1 IE Cr Op Sa Fx

Imagini din tabelul TABLE (chenar: 1px solid #000; )

Rezultatul acestui exemplu este prezentat în Fig. 1.3a. Pentru modul standard, ieșirea imaginii este ușor diferită (Fig. 1.3b).


A	b

Orez. 1.3. Imagine în tabel. a - modul aproape standard, b - modul standard

Se observă că în modul standard apare o mică indențiune în partea de jos a imaginii. De unde vine? Dacă adăugați text într-o celulă și măriți (Fig. 1.4), puteți vedea clar că imaginea ca element inline este aliniată la linia de bază a textului și nu la marginea sa de jos. În consecință, diferența dintre linia de bază și marginea de jos a textului este valoarea decalajului de sub imagine.

Orez. 1.4. Text de referință

Din nou, există mai multe moduri de a schimba comportamentul imaginilor dintr-un tabel. Prima metodă a fost deja menționată, aceasta este conversia etichetelor într-un element de bloc folosind proprietatea de afișare cu blocul de valori (vezi exemplul 1.3). Stilul în acest caz va fi următorul:

TABLE IMG (afișare: bloc; )

Dacă în interiorul unei celule există text împreună cu imagini, acest stil poate avea consecințe nedorite. În loc ca imaginea să fie plasată lângă text, aceasta va apărea pe o nouă linie ca element de bloc. În acest caz, este recomandat să setați imaginile să fie aliniate la partea de jos folosind proprietatea vertical-align cu valoarea bottom (exemplul 1.6).

Exemplul 1.6. Alinierea imaginilor

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Imaginile din tabel TABLE (chenar: 1px solid #000; ) TD IMG ( aliniere verticală: jos; )

Text

În timp ce toate browserele din acest exemplu aliniază imaginea de jos, alinierea textului în sine este ușor diferită. Browserele Firefox, Safari, IE7 aliniază textul la marginea de jos a imaginii, iar Opera, IE8, IE9 - în partea de sus.

Desene cu un singur pixel

În timpul amenajării tabelului, a fost utilizată în mod activ o imagine transparentă care măsoară unul câte unul pixel, așa-numita imagine cu un pixel. Plasată într-o celulă de tabel, o astfel de imagine nu i-a permis să se micșoreze la anumite limite, dar a fost ușor scalată, setând astfel lățimea sau înălțimea celulei. Deoarece desenul este transparent, puteți seta culoarea de fundal pentru celulă și puteți obține linii orizontale sau verticale de o anumită grosime.

În modul standard, ne așteptăm la aceleași probleme ca atunci când folosiți imagini obișnuite în interiorul celulelor. Înălțimea celulei va fi extinsă pe măsură ce imaginilor se adaugă umplutură de jos. Această problemă este rezolvată mult mai simplu și nu necesită utilizarea unui stil suplimentar. Browserele moderne afișează perfect dimensiunile celulelor date chiar și fără imagini suplimentare în interior. Prin urmare, este suficient să ștergeți pur și simplu un desen de un pixel dintr-o celulă.

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ă fuzionarea celulelor.

Cum se face un tabel în html

Iată un exemplu de 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: o etichetă (titlul tabelului), unde trebuie să specificaț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ă

Pentru a deschide eticheta

Puteți specifica diferite 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

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. Proprietate 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 a tabelului)
vssides - desenați doar chenaruri 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 care sunt formate din etichete , , , 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ă

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="number" - 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.