Rezultat:

Valorile sunt specificate în pixeli (px) sau procent (%)

○ Alinierea conținutului într-un tabel HTML

Pentru a alinia conținutul în tabelul HTML, utilizați pentru a eticheta atribut "Alinia"și "Valign" :

ALINIA- alinierea orizontală a conținutului din tabel.
Valori:

• stânga - împinge conținutul spre stânga (Mod implicit);
• centru – așezat în centru;
• dreapta - împinge conținutul în partea dreaptă

VALIGN- alinierea verticală a conținutului din tabel.
Valori:

• top – apăsați conținutul în sus;
• partea de jos – împingeți conținutul în jos;
• mijloc – setați conținutul la mijloc

Rezultat:

○ Cum să centrați alinierea tabelului HTML

Pentru a alinia masa în centru, trebuie să înfășurați masa cu eticheta

Etichete suplimentare și principale pentru tabel

Rezultat:

Așa că am terminat cu tabelele. Acum puteți crea singur un tabel de orice complexitate. Consolidează această lecție. Încercați să creați singur orice tabel.
Vă aștept cu nerăbdare la următoarea lecție. Abonați-vă la actualizările blogului meu.

Postarea anterioară
Postarea următoare

capitolul 4

Tabelele HTML

Unul dintre cele mai puternice și utilizate instrumente în HTML sunt tabelele. Conceptul de prezentare a datelor tabelare nu necesită explicații suplimentare. În HTML, tabelele sunt folosite nu numai în mod tradițional ca metodă de prezentare a datelor, ci și ca mijloc de formatare a paginilor Web. Iată exemple de documente din viața reală în care o vizualizare tabelară este o modalitate convenabilă de a construi un document. În fig. 4.1 prezintă un exemplu tipic de utilizare a tabelelor pentru a reprezenta date numerice defalcate pe rânduri și coloane. În fig. 4.2 utilizarea tabelului servește doar în scopul formatării documentului, stabilind poziția relativă a elementelor paginii. Când vizualizați un astfel de document, nu este imediat clar că se folosește un tabel pentru a-l construi, deoarece cadrele din jurul celulelor sale nu sunt desenate.

Prima versiune a limbajului HTML nu a oferit mijloace speciale pentru afișarea tabelelor, deoarece era destinată în principal pentru scrierea de text simplu. Odată cu dezvoltarea domeniilor de aplicare a documentelor HTML, sarcina de a prezenta date, pentru care prezența unui număr de rânduri și coloane este tipică, a devenit urgentă. La început, crearea documentelor care conțineau date aliniate pe coloane s-a realizat folosind text preformatat, în interiorul căruia alinierea necesară a fost asigurată prin introducerea numărului necesar de spații. Amintiți-vă că textul din interiorul unei perechi de etichete

ȘI

Instrumentele speciale pentru crearea tabelelor, totuși, nu anulează posibilitatea utilizării textului preformatat. Utilizarea tabelelor nu se limitează la date formate din rânduri și coloane. Una dintre utilizări este de a organiza aranjarea diferitelor date pe o pagină, care poate consta din text simplu, imagini, alte tabele etc. Acest capitol este dedicat regulilor de creare a tabelelor și exemplelor de utilizare a acestora.

Orez . 4.1. Exemplu tipic de tabel HTML

Orez . 4.2. Exemplu de tabel fără margini

Crearea tabelelor HTML de bază

Să luăm în considerare mai întâi setul minim de etichete și parametrii acestora, necesari și suficienti pentru a crea tabele simple, apoi trecem la descrierea detaliată a acestora.

Descrierea tabelelor ar trebui să fie situată în interiorul secțiunii documentului ... Un document poate conține un număr arbitrar de tabele, iar tabele pot fi imbricate unul în celălalt. Fiecare tabel trebuie să înceapă cu eticheta

Fiecare linie începe cu eticheta (Rândul tabelului) și se termină cu eticheta... O singură celulă într-un rând este încadrată de o pereche de etichete și(Datele tabelului) sau și(Antetul tabelului). Etichetă este de obicei folosit pentru celulele antetului tabelului și - pentru celulele de date. Diferența de utilizare constă doar în tipul de font utilizat în mod implicit pentru afișarea conținutului celulelor, precum și în locația datelor în interiorul celulei. Conținutul celulelor tip afișat cu aldine și centrat (ALIGN = CENTER, VALIGN = MIDDLE). Celulele definite printr-o etichetă în mod implicit afișează datele aliniate la stânga (ALIGN = LEFT) și la mijloc (VALIGN = MIDDLE) în direcția verticală.

Etichete și nu poate apărea în afara descrierii rândului tabelului ... Codurile de final, și poate fi omis. În acest caz, sfârșitul unei descrieri de rând sau celulă este începutul următorului rând sau celulă sau sfârșitul unui tabel. Eticheta tabelului final nu poate fi omis.

Numărul de rânduri din tabel este determinat de numărul de etichete de deschidere , iar numărul de coloane este numărul maxim sau printre toate liniile. Este posibil ca unele dintre celule să nu conțină date, astfel de celule sunt descrise de o pereche de următoarele etichete la rând - , ... Dacă una sau mai multe celule de la sfârșitul unei linii nu conțin date, atunci descrierea lor poate fi omisă, iar browserul va adăuga automat numărul necesar de celule goale. Rezultă că nu este permisă construcția de tabele în care numere diferite de coloane de aceeași dimensiune sunt situate în linii diferite.

Tabelul poate avea un titlu, care este inclus în câteva etichete și... Descrierea antetului tabelului trebuie să fie localizată în interiorul etichetelor

În mod implicit, textul antetului tabelului este poziționat deasupra acestuia (ALIGN = TOP) și centrat orizontal.

Etichetele enumerate pot avea parametri, numărul și valorile cărora sunt diferite. Cu toate acestea, în cel mai simplu caz, etichetele sunt folosite fără parametri, care preiau valori implicite.

Aceste informații sunt destul de suficiente pentru a construi tabele elementare. Să dăm un exemplu de tabel simplu format din două rânduri și două coloane, a cărui afișare este prezentată în Fig. 4.3.

Orez. 4.Z. Un exemplu de cel mai simplu tabel

Vizualizați tabelele pe o pagină

Să ne uităm la scopul diferiților parametri care pot fi utilizați în etichetele care descriu tabele.

Antetul tabelului

Etichetă antet tabel are singurul parametru ALIGN valid, care poate fi TOP (titlu deasupra tabelului) sau BOTTOM (titlu sub tabel). Parametrul ALIGN poate fi omis, care corespunde valorii ALIGN = TOP. În direcția orizontală, titlul tabelului este întotdeauna centrat. Este posibil ca tabelul să nu aibă un titlu. Ca titlu de tabel, în cele mai multe cazuri, este folosit text simplu, care este reglementat de specificația HTML, dar în realitate, între etichete și este permis să scrieți orice elemente HTML utilizate în secțiune ... Iată un exemplu de intrare de antet de tabel:

Titlu situat în partea de jos a tabelului

Dacă această descriere a antetului este adăugată la exemplul de mai sus, atunci tabelul va fi afișat așa cum se arată în Fig. 4.4.

Orez. 4.4. Tabel cu titlu

Microsoft Internet Explorer oferă opțiuni suplimentare pentru alegerea locației titlului. Parametrul ALIGN acceptă valorile LEFT, CENTER și RIGHT pentru alinierea orizontală, împreună cu valorile descrise mai sus. Rețineți că acesta este unul dintre rarele cazuri în care parametrul ALIGN utilizat pe scară largă poate fi utilizat atât pentru alinierea orizontală, cât și pentru cea verticală. De exemplu, ALIGN = RIGHT se va asigura că antetul este poziționat la dreapta și deasupra tabelului. Dacă scrieți ALIGN = BOTTOM, atunci la fel ca în exemplul de mai sus, titlul va fi situat sub tabel. Cu toate acestea, parametrul ALIGN nu poate fi folosit de două ori în același antet. Prin urmare, am introdus suplimentar un parametru special pentru alinierea verticală - VALIGN, care ia valorile TOP sau BOTTOM. De exemplu, pentru un titlu din partea de jos a unui tabel, aliniat la stânga, descrierea arată astfel:

Titlu de jos aliniat la stânga

Tabelul cu această descriere a titlului în Microsoft Internet Explorer va fi afișat după cum urmează (Fig. 4.5). Când este vizualizat în Netscape, titlul va fi plasat implicit, adică deasupra tabelului și în mijloc pe orizontală.

Orez. 4.5. Alinierea orizontală a antetului tabelului de către Microsoft Internet Explorer

Caracteristicile de aliniere orizontală a antetului tabelului sunt o extensie a specificației HTML, nu sunt acceptate de browserul Netscape Navigator și, prin urmare, ar trebui utilizate numai atunci când este absolut necesar.

Parametrii etichetei

Eticheta principală folosită la crearea tabelelor este eticheta

parametrul BORDER

Parametrul BORDER controlează redarea unui chenar în jurul fiecărei celule, care oferă în esență liniile de grilă ale tabelului și în jurul întregului tabel. În mod implicit, nu sunt desenate cadre, iar pe ecran utilizatorul va vedea doar textul spațiat uniform al celulelor tabelului. Există multe situații în care utilizarea tabelelor fără cadre este destul de justificată, de exemplu, pentru listele cu mai multe coloane implementate folosind tabele, sau specificarea poziției relativ exacte a figurilor și textului. Cu toate acestea, în majoritatea cazurilor, pentru utilizarea tradițională a tabelelor, este util să se separe celulele dintre ele cu linii de grilă, ceea ce facilitează perceperea și înțelegerea informațiilor conținute în tabel.

Pentru a adăuga cadre la tabel, trebuie să le includeți în cod

De exemplu,

Valoarea numerică a parametrului determină grosimea marginii în pixeli, desenată în jurul întregului tabel, însă această valoare nu afectează grosimea marginilor din jurul fiecărei celule. În absența unei valori numerice, de obicei se presupune că este egală cu valoarea minimă (1), deși stilul de afișare a cadrelor poate diferi pentru diferite browsere. Capacitatea de a controla independent afișarea chenarului în jurul întregului tabel și a chenarelor din jurul celulelor nu este disponibilă.

Un exemplu de tabel cu un chenar de 10 pixeli este prezentat în Fig. 4.6.

Orez. 4.6. Tabel cu chenar de 10 pixeli

Specificația HTML 3.0 nu a inclus o valoare pentru parametrul BORDER. Acest lucru se face numai în HTML 3.2. De exemplu, versiunile anterioare ale Microsoft Internet Explorer nu permiteau specificarea unei valori numerice.

Rețineți că, în absența parametrului BORDER, cadrele nu sunt desenate, dar este lăsat spațiu pentru ele (acest lucru este valabil doar pentru Netscape). Dimensiunea totală a tabelului în absența sau prezența parametrului BORDER nu se modifică (excepția este cazul setării BORDER = 0). Astfel, distanța minimă dintre două celule adiacente în aceste cazuri va fi egală cu de două ori grosimea cadrului, adică doi pixeli. Este posibilă aranjarea celulelor cât mai aproape una de alta, setând BORDER = 0, ceea ce înseamnă că nu există cadre. Este posibil ca unele browsere să nu accepte setarea unei valori numerice pentru parametrul BORDER, atunci o valoare egală cu zero va fi ignorată și tabelul va fi desenat cu chenare.

Aici sunt cateva exemple:

Toate cele trei exemple prezentate vor fi redate diferit de browserul Netscape. Rețineți că există un caz destul de unic aici în care nu se poate vorbi de o valoare implicită. Al treilea exemplu, în care parametrul BORDER este omis, este diferit de orice exemplu în care acest parametru este prezent. Pentru Microsoft Internet Explorer, al doilea și al treilea exemplu sunt identice, astfel încât valoarea implicită pentru parametrul BORDER este zero pentru acest browser.

Parametrul CELLSPACING

Forma de notare a parametrilor: CELLSPACING = num, unde num este valoarea numerică a parametrului în pixeli, care nu poate fi omisă. Valoarea num determină distanța dintre celulele adiacente (mai precis, între cadrele de celule), atât pe orizontală, cât și pe verticală. În mod implicit, valoarea este presupusă a fi două. Rețineți că, în mod tradițional, în sistemele de publicare, celulele adiacente de tabel au o margine comună. În tabelele HTML, în mod implicit, este lăsat spațiu între ele, așa cum se poate observa clar în figura de mai sus (Figura 4.6). Dacă setați CELLSPACING = 0, marginile celulelor adiacente se vor îmbina și vor crea impresia unei singure grile a tabelului (Fig. 4.7).

Orez. 4.7. Tabel cu CELLSPACING = 0

parametrul CELLPADDING

Notarea parametrilor este similară cu CELLSPACING. Valoarea num determină cantitatea de spațiu liber (padding) dintre marginea celulei și datele din interiorul celulei. În mod implicit, se presupune că valoarea este una. Setarea parametrului CELLPADDING la zero poate face ca unele părți ale textului celulei să atingă marginea acestuia, ceea ce nu arată foarte plăcut din punct de vedere estetic.

În fig. 4.8 prezintă un exemplu de tabel cu CELLPADDING = 10.

Orez. 4.8. Tabel cu CELLPADDING = 10

Parametrii CELLPADDING și CELLSPACING funcționează foarte similar. Pentru un tabel fără margini, modificarea unuia sau a altuia parametru duce la același rezultat. Ambii parametri afectează marginile corespunzătoare atât pe orizontală, cât și pe verticală. Din păcate, se face gestionarea separată a marginilor orizontale și verticale, de exemplu, pentru marginile din imagini (parametrii HSPACE și VSPACE ai etichetei ), nu e disponibil nu e asigurat nu e prevazut.

Toți cei trei parametri - BORDER, CELLPADDING și CELLSPACING acționează independent unul de celălalt, dacă oricare dintre ei este omis, atunci valoarea sa implicită este luată. În special, dacă toți parametrii de mai sus sunt omiși, atunci distanța minimă dintre datele din celulele adiacente va fi de 6 pixeli (pentru Netscape). Această valoare este formată din doi pixeli pentru CELLSPACING, un pixel pentru CELLPADDING și un pixel pentru marginea fiecărei celule. Cel mai compact tabel se va obține prin specificarea următoarei descriere:

Numai în acest caz celulele vor fi situate aproape una de alta. Un exemplu de utilizare este un tabel, toate celulele care conțin imagini de aceeași dimensiune, care trebuie așezate una lângă alta.

Parametrii WIDTH și HEIGHT

Când tabelele sunt afișate, lățimea și înălțimea lor sunt calculate automat de browser și depind de mulți factori: valorile parametrilor specificați în descrierea întregului document, acest tabel, rândurile și celulele sale individuale, conținutul celule, precum și parametrii setați la vizualizarea documentului într-un anumit browser, de exemplu, tipul și dimensiunea fontului, dimensiunea ferestrei de vizualizare etc. La afișare, dimensiunile tabelului sunt calculate automat ținând cont de acești factori, în timp ce se încearcă prezentarea masa în forma cea mai convenabilă - pentru a aranja masa astfel încât să se potrivească în fereastra de vizualizare. Schema generală de vizualizare a documentelor mari, de regulă, se rezumă la derularea liniară a conținutului documentului pe verticală și citirea textului, intercalate cu diverse tabele, imagini etc. Acest lucru se aplică atât documentelor HTML, cât și documentelor obișnuite create în orice editor de text... Majoritatea editorilor de text (cum ar fi Microsoft Word) și a browserelor HTML formatează automat textul (dacă este posibil), astfel încât liniile să nu depășească lățimea ferestrei de vizualizare. Acest lucru evită necesitatea derulării orizontale a documentului. Acțiuni similare sunt întreprinse de browserele cu tabele - dacă este posibil, formatați-le astfel încât lățimea tabelului să nu depășească lățimea ferestrei de vizualizare. Se poate concluziona că lățimea tabelelor este un parametru mai important, primordial, al cărui calcul se efectuează în primul rând în comparație cu înălțimea.

În cele mai multe cazuri, dimensionarea dinamică a tabelului are ca rezultat o imagine proporțională din punct de vedere estetic, cu utilizarea eficientă a zonei reale a ferestrei de vizualizare. Cu toate acestea, poate fi necesar să se impună lățimea sau înălțimea mesei. În acest scop, sunt utilizați parametrii WIDTH (lățimea tabelului) și HEIGHT (înălțimea tabelului) ai etichetei

Parametri similari pot fi setati pentru celule individuale. Rețineți că specificarea unei valori specifice pentru parametru, de exemplu WIDTH = 200, nu înseamnă că tabelul va avea în orice caz lățimea specificată, ci determină doar lățimea recomandată, care va fi menținută ori de câte ori este posibil. Să explicăm acest lucru cu exemple. Să existe un tabel care, în condițiile date, ar avea o lățime mai mică decât cea specificată în mod implicit. În acest caz, browserul va mări lățimea tabelului la cea necesară prin extinderea proporțională a tuturor coloanelor tabelului. Îngustarea ferestrei de vizualizare nu va modifica lățimea tabelului și poate fi necesar să derulați pe orizontală pentru a-l vizualiza. Dacă tabelul are o lățime implicită mai mare decât cea specificată, atunci browserul va încerca să-și reducă lățimea, în primul rând, reducând lățimea coloanelor individuale pentru care lățimea specificată este mai mare decât cea necesară și, în al doilea rând, rupând textul în celule separate în mai multe rânduri cu creșterea înălțimii tabelului. Este posibil ca aceste acțiuni să nu ofere dimensiunea necesară a tabelului, iar atunci acesta va avea cea mai mică lățime posibilă. Aceleași acțiuni sunt luate pentru tabelele care nu au dimensiuni la îngustarea ferestrei de vizualizare.

Algoritmii specifici pentru setarea tabelelor pentru diferite browsere pot diferi ușor.

parametru ALIGN

Parametrul etichetei dat

Să dăm un exemplu de tabel cu text împachetat, a cărui afișare este prezentată în Fig. 4.9.

Cele mai frecvente 43 de nume menționate acoperă 92% din eșantion.

Orez. 4.9. Tabel fără margini cu text de împachetare

Acest document este format dintr-un tabel fără margini cu parametrul de aliniere ALIGN = LEFT, care permite poziționarea textului care urmează tabelului în dreapta tabelului. Tabelul este format dintr-un singur rând, care conține două celule. Fiecare celulă conține o parte dintr-o listă neordonată

... Utilizarea unui tabel pentru a afișa o listă este o modalitate de a forța o listă în mai multe coloane, care este, de asemenea, ilustrată în acest exemplu. Este posibil ca textul situat în partea dreaptă a tabelului să nu se potrivească acolo, în timp ce va continua după tabel. Încercați să utilizați acest exemplu pentru a reduce lățimea ferestrei de vizualizare a browserului și, la un moment dat, tot textul va apărea în partea de jos a tabelului. Amintiți-vă că pentru a întrerupe forțat fluxul de text de-a lungul tabelului (de exemplu, dacă textul următor nu are legătură logic cu tabelul și ar trebui să fie situat sub acesta), ar trebui să utilizați codul
cu parametrul CLEAR setat. Pentru acest exemplu, trebuie să scrieți
sau
... Unele browsere permit ca parametrul CLEAR să fie scris fără valoare, dar acest lucru nu este recomandat. Pentru a îndeplini aceeași sarcină, specificați mai multe fluxuri de linie
fără parametrul CLEAR (cum se face în exemplul de dinaintea textului pentru a-l muta în jos cu mai multe rânduri) sau mai multe coduri pentru începutul unui nou paragraf

Decizie gresita.

Să dăm un exemplu ușor diferit pentru crearea unei astfel de pagini, a cărei afișare este prezentată în Fig. 4.10.

Cele mai comune nume masculine

populaţia adultă din Sankt Petersburg

Avram Alexandru Alexey Albert Anatoly Andrei Arkady Boris Vadim Valentine Valery Busuioc Victor Vitalia Vladimir Vladislav Viaceslav Gennady George Hermann Grigore Dmitrii

Evgeniy Efim Ivan Igor Ilya Iosif Constantin un leu Leonid Mihai Nikolay Oleg Paul Petru roman Semyon Serghei Stanislav Edward Yuri Iacov

Datele prezentate au fost obținute pe baza unei analize a unui eșantion reprezentativ care conține informații despre 5.000 de bărbați cu vârsta peste 18 ani care locuiesc în Sankt Petersburg. Cele mai frecvente 43 de nume menționate acoperă 92% din eșantion. Frecvența de apariție a fiecăruia dintre celelalte nume nu depășește 0,3%



Orez. 4.10. Un tabel fără margini cu trei coloane

Spre deosebire de exemplul anterior, nu există text care curge în jurul mesei. Întregul document constă dintr-un tabel cu un titlu care conține trei celule pe un rând. Primele două celule repetă complet exemplul anterior. A treia celulă conține text care comentează conținutul primelor două celule. Aici nu este nevoie să setați întrerupere forțată a textului, așa cum este descris în cazul anterior. Tot textul legat de tabel ar trebui să fie situat în interiorul celei de-a treia celule, iar textul următor - după sfârșitul descrierii întregului tabel... Ambele exemple arată la fel atunci când sunt vizualizate pe ecran complet, cu excepția titlului, care în primul caz se află în mijlocul listei cu două coloane, iar în al doilea este în mijlocul tuturor celor trei coloane ale tabelului. Cu toate acestea, când fereastra de vizualizare este redusă în ultimul exemplu, nicio parte a textului nu poate merge sub tabel, rupându-i astfel structura.

Formatarea datelor în interiorul unui tabel

Fiecare celulă individuală dintr-un tabel poate fi gândită ca o zonă pentru formatare independentă. Toate regulile care guvernează afișarea textului pot fi folosite pentru a formata textul dintr-o celulă. Aproape toate elementele HTML care pot apărea în corpul documentului sunt permise în interiorul celulei. , inclusiv etichete care controlează aspectul textului -

,
,

---

, coduri antet - de la

inainte de

, etichete de formatare a caracterelor -<В>, , , , , , , etichetele inserează imagini grafice , link-uri hipertext<А>și așa mai departe. Imediat, subliniem că domeniul de aplicare a etichetelor specificate într-o singură celulă este limitat la limitele acestei celule, indiferent de prezența unei etichete de sfârșit. De exemplu, dacă o culoare de text este definită în interiorul unei celule - , atunci chiar dacă nu există un cod final sau plasându-l pe mai multe celule sau rânduri ale tabelului, textul celulei următoare va fi reflectat în culoarea implicită.

Următoarele opțiuni sunt disponibile pentru a formata datele din celulele tabelului.

Parametrii de aliniere ai conținutului celulei sunt ALIGN și VALIGN. Poate fi folosit în coduri , și ... Parametrul de aliniere orizontală ALIGN poate fi LEFT, RIGHT și CENTER (implicit este LEFT pentru si CENTRUL pentru ). Parametrul de aliniere verticală VALIGN poate fi TOP (sus), BOTTOM (jos), MEDIU (mijloc), BASELINE (linia de bază). Valoarea implicită este MEDIU. Alinierea liniei de bază asigură că textul unei singure linii din toate celulele se ancorează pe o singură linie. Setarea opțiunilor de aliniere la nivel de cod determină alinierea pentru toate celulele acestui rând, în timp ce în fiecare celulă individuală a rândului se pot defini propriii parametri, suprascriind efectul parametrilor specificați în .

Iată un exemplu de tabel în care datele din celulele primei coloane sunt aliniate la dreapta, a doua coloană este centrată și a treia este aliniată la stânga (implicit):

Celula 1	Celula 2	Celula 3
Celula 4	Celula 5	Celula 6

Afișarea acestui exemplu de către browser este prezentată în Fig. 4.11.




Orez. 4.11. Alinierea datelor în celulele tabelului

Parametrul NOWRAP dezactivează capacitatea de a împărți automat textul celulei în linii. Poate fi folosit în coduri , și ... Utilizarea nejustificată a acestui parametru ar trebui evitată, deoarece poate reduce semnificativ capacitatea de a redimensiona dinamic tabelele și poate afecta percepția acestora. În cele mai multe cazuri, este suficient să aplicați NOWRAP pentru celule individuale care necesită într-adevăr interzicerea împachetarii cuvintelor pe o nouă linie. Încheierea cuvintelor este efectuată numai de separatoarele dintre cuvinte (spații), iar în unele cazuri, pentru a interzice ruperea textului în anumite locuri, în loc de caracterul spațiu, setați codul spațiului nedespărțitor (NonBreaking Space). Exemplele includ cazurile în care nu se recomandă un decalaj - între o valoare numerică și unitatea de măsură a unei valori date; între nume de familie și inițiale. Deci, textul 650 km sau Eltsin B.N. se recomanda scrierea in formular 650 km si Eltsin B.N.

Parametrii WIDTH și HEIGHT pot fi utilizați în coduri și ... Sintaxa lor este similară cu sintaxa acestor parametri pentru etichetă

... Valoarea lor determină lățimea sau înălțimea celulei pentru care sunt scriși acești parametri. Valorile pot fi specificate în pixeli sau ca procent din dimensiunea întregului tabel. Microsoft Internet Explorer permite ca valoarea WIDTH să fie specificată doar în pixeli. Deoarece un tabel este o structură coerentă constând din rânduri și coloane, setarea lățimii pentru o celulă afectează lățimea întregii coloane în care se află celula, iar setarea înălțimii afectează întreaga linie. Dacă valoarea lățimii dintr-o coloană este specificată într-o singură celulă, atunci această valoare devine lățimea întregii coloane. Dacă există mai multe astfel de indicații, atunci valoarea maximă este selectată. Aceleași proprietăți se aplică șirurilor.

Tabelele complexe se caracterizează prin necesitatea de a combina mai multe celule adiacente orizontal sau vertical într-una singură. Această caracteristică este implementată folosind parametrii COLSPAN (COLiimn SPANning) și ROWSPAN (ROW SPANning), setați în coduri

sunt setate setările pentru coloanele individuale ale acestui grup. Mai mult, în etichetă dacă este necesar, ar putea fi specificați parametrii de aliniere, ale căror valori se aplică tuturor coloanelor grupului dat. Valorile parametrilor specificate în etichetă , suprascrieți valorile din etichetă ... Rețineți că în etichetă în acest exemplu, spre deosebire de cel precedent, nu există niciun parametru SPAN. Aici utilizarea sa este lipsită de sens, deoarece numărul de elemente din grup va fi determinat de cei care urmează eticheta Etichete ... Prin urmare, orice valoare dată a parametrului etichetei SPAN va fi depășit.

În fig. 4.17 arată rezultatul implementării codului de mai sus, precum și o variantă de afișare a unui astfel de tabel cu intrarea REGULI = GRUPURI în etichetă

sau

... Forma de notație: COLSPAN = num, unde num este o valoare numerică care determină câte coloane să extindă celula curentă pe orizontală. Utilizarea parametrului ROWSPAN este similară, doar aici specificați numărul de rânduri pe care celula curentă ar trebui să le capteze vertical. În mod implicit, acești parametri sunt setați la unu. Este posibilă setarea simultană a valorilor ambilor parametri pentru o celulă. Setarea corectă a valorilor acestor parametri poate să nu fie o sarcină foarte simplă, mai ales că majoritatea editorilor HTML vă permit să construiți vizual, cu generarea ulterioară de coduri HTML, doar cele mai simple tabele. În fig. 4.12 prezintă un exemplu de afișare a unui tabel, obținut din următorul cod HTML: Celulă care se întinde pe două linii Celulă care se întinde pe două coloane Celula 3 Celula 4 Celula 5 Celula 6 Celula 7 Orez. 4.12. Tabel cu celule care se întind pe mai multe rânduri sau coloane Setarea neatentă a valorilor parametrilor de alunecare a celulelor poate duce la suprapunerea lor reciprocă și conflicte, în care rezultatul este imprevizibil. O utilizare tipică pentru celulele extinse este un titlu comun pentru mai multe coloane sau rânduri învecinate. Iată un exemplu de cod HTML (a cărui afișare este prezentată în Fig. 4.13), în care celulele extinse sunt formate incorect. Celula 1 Celula 2 Celula 3 (uzual Ha trei linii) Celula 4 Celula 5 Celula 6 Celula 7 (împrăștiată pe două coloane) Orez. 4.13. Rezultatul definirii incorecte a celulelor extinse (suprapunere text) Parametrul BGCOLOR setează culoarea de fundal pentru întregul tabel, rândurile individuale sau celulele. Poate apărea în etichete , , nu conține nicio informație sau unul sau mai multe spații care nu sunt tratate ca date. Celulele care conțin date invizibile, de exemplu, pot conține cod sau cod de alimentare de linie , sau orice text care se potrivește cu culoarea de fundal a celulei. Dacă celulele care conțin date (chiar dacă sunt invizibile) sunt afișate în același mod de către toate browserele, atunci celulele goale vor fi afișate diferit. Browserul Netscape nu afișează o celulă goală, adică locul în care se află această celulă va fi vopsit cu culoarea de fundal a paginii, și nu cu culoarea de fundal a celulei, spre deosebire de celulele care conțin date. Nu este trasat niciun chenar în jurul celulelor goale. Un exemplu de tabel cu o celulă goală este prezentat în Fig. 4.15. Orez. 4.15. Celula goală de tabel se redă diferit în funcție de browsere diferite Microsoft Internet Explorer afișează ambele celule cu culoarea de fundal a celulelor. Un browser precum NSCA Mosaic oferă utilizatorului posibilitatea de a determina natura rezultatelor celulelor goale ale tabelului, alegând opțiunile corespunzătoare. Cunoașterea acestor caracteristici vă va permite să proiectați tabele care vor fi afișate într-un mod adecvat, indiferent de browserul ales de utilizator. În unele cazuri, este suficient pentru a crea celule care conțin un singur cod în loc de unele celule goale. Alinierea datelor în coloanele tabelului O problemă comună la crearea tabelelor este setarea opțiunilor de aliniere pentru rânduri sau coloane individuale. Pentru a alinia conținutul tuturor celulelor liniei curente, trebuie doar să setați parametrii necesari în cod ... Cu toate acestea, de cele mai multe ori, este necesar să se asigure aceeași aliniere pentru toate articolele din aceeași coloană, deoarece în cele mai multe cazuri, coloana conține date omogene. În versiunile anterioare de HTML, s-a sugerat să se utilizeze parametrul COLSPEC (SPECIFICARE COLONĂ) pentru aceasta, care a fost specificat în etichetă. și ... Această caracteristică nu este acceptată de specificația HTML, dar este acceptată atât de Netscape, cât și de Microsoft Internet Explorer. Formularul de înregistrare este același ca pentru etichetă , și anume: BGCOLOR = valoare, unde valoarea este conținutul de culoare în format RGB sau numele acestuia. Exemplu: sau . Tabele imbricate Celulele individuale ale tabelului pot conține aproape orice etichete de limbă și date permise într-o secțiune document. În special, un alt tabel poate fi plasat în interiorul unei celule a unui tabel. Astfel de tabele se numesc tabele imbricate. Regulile pentru construcția lor nu diferă de construcția tabelelor și nu necesită o descriere separată. Rețineți că nu toate browserele care acceptă tabele reflectă corect tabele complexe cu mai multe niveluri de imbricare, așa că este necesară prudență atunci când le utilizați. Iată un exemplu de tabel care utilizează un nivel de imbricare. Orașele din regiunea Leningrad H - populația orașului (mii de locuitori, 1992) P - distanța de la Sankt Petersburg (km) Orașe subordonate Sankt Petersburgului Oraș H P Zelenegopsk 13.6 50 Kolpino 144.6 26 Kronstadt 45.2 48 Lomonosov 42.0 40 Pavlovsk 25.4 30 Petrodvorets 83.8 29 Pușkin 95.1 24 Sestroretsk 34.9 35 Toate orașele subordonate administrare Petersburg, au oras direct numere de telefon. Orașe regionale Oraș H P Boksitogorsk 21.6 ALIGN = DREAPTA> 245 Balhov 50.3 ALIGN = DREAPTA> 122 Bcevolozhsk 32.9 24 Vyborg 80.9 130 Vysotsk 1.0 ALIGN = DREAPTA> 159 Gatchina 80.9 46 Ivangorod 11.9 ALIGN = DREAPTA> 147 Kamennogorsk 5.9 157 Kingisepp 51.5 ALIGN = DREAPTA> 138 Kirishi 53.8 ALIGN = DREAPTA> 115 Kirovsk 23.8 55 Lodeynoye Pole 27.3 ALIGN = DREAPTA> 244 Lyga 41.8 139 (continuare tabel) Oraș H P Lyuban 4.7 85 Noul Ladoga 11.2 ALIGN = DREAPTA> 141 Plăcut 22. 9 ALIGN = DREAPTA> 40 Pikalevo 25.1 ALIGN = DREAPTA> 246 A sustine 23.1 285 Primorsk 6.7 137 Priozersk 20.5 ALIGN = DREAPTA> 145 Svetogorsk 15.8 ALIGN = DREAPTA> 201 Ardezii 42.6 ALIGN = DREAPTA> 192 Pinery 57.6 81 Tihvin 72.0 ALIGN = DREAPTA> 200 Tosno 33.8 53 W liscelbypg 12.5 64 Orez. 4.14. Exemplu de tabele imbricate Rezultatul afișării acestui exemplu este prezentat în Fig. 4.14. La prima vedere, se pare că exemplul nu are imbricare de masă. De fapt, întregul document este un tabel fără margini format dintr-un titlu și doar un rând care conține cinci celule. Organizarea unui astfel de tabel servește unic scop de aranjare a datelor pe pagină. În interiorul primei celule se află un alt tabel, care are propriul titlu și este format din trei coloane, urmate de text aliniat la mijloc. Celulele a treia și a cincea conțin și tabele separate. A doua și a patra celulă sunt goale, nu conțin date și au un singur parametru WIDTH care determină lățimea acestuia. Scopul lor este de a seta indentarea dintre prima și a treia, precum și a treia și a cincea celulă în care sunt situate tabelele. Aceasta este una dintre opțiunile posibile pentru setarea unei astfel de indentări. O altă opțiune este să folosiți parametrul CELLSPACING, care determină distanța dintre celule, dar acest parametru setează atât indentări orizontale, cât și verticale, ceea ce nu este necesar în acest moment. În plus, o celulă goală cu lățimea specificată se va micșora atunci când fereastra de vizualizare este îngustată, spre deosebire de spațiul specificat de parametrul CELLSPACING (la fel ca CELLPADDING). Încercați să utilizați acest exemplu pentru a micșora lățimea ferestrei de vizualizare în browser sau, ceea ce va duce la aceleași rezultate, pentru a mări dimensiunea fontului folosit pentru afișarea textului. Distanța dintre tabele va fi redusă la zero, făcând posibilă vizualizarea tuturor informațiilor în același timp cât mai mult posibil, cu toate acestea, modificările ulterioare nu vor deteriora tabelul, ci vor oferi posibilitatea de a derula orizontal. Conform unei scheme similare, puteți organiza plasarea informațiilor, constând nu numai din tabele, ci și imagini, fragmente de text etc. Caracteristicile construcției meselor Această secțiune discută unele dintre capacitățile specifice ale browserelor individuale, precum și unele subtilități ale construirii și afișarii tabelelor. Afișarea celulelor goale în tabele Una dintre caracteristicile prezentării tabelelor de către diferite browsere este afișarea celulelor goale. Conform descrierii limbii, toate browserele ar trebui să adauge liniile cu celule goale dacă în oricare rând numărul lor este setat mai puțin decât în ​​restul liniilor. În plus, celulele care nu conțin date pot fi găsite oriunde în tabel. Există o distincție între celulele goale și celulele care conțin date invizibile. În celule goale în interiorul unei perechi de etichete și și a determinat alinierea și lățimea fiecărei coloane din tabel. De exemplu, setarea colspec = "L40 R50 C80" a determinat alinierea datelor în celule pentru trei coloane ale tabelului: pentru prima coloană - STÂNGA, pentru a doua - DREAPTA și pentru a treia - CENTRU, precum și lățimea de fiecare coloană. Pe măsură ce HTML a evoluat, această opțiune a fost abandonată și în prezent nu face parte din specificația limbii și nu este acceptată de majoritatea browserelor. Drept urmare, Netscape Navigator nu are instrumente speciale pentru a rezolva această problemă, iar singura opțiune este fie să folosiți alinierea implicită, fie să setați valorile corespunzătoare în fiecare celulă, acolo unde este necesar. Microsoft Internet Explorer oferă etichete speciale - și ... Aceste etichete ar trebui să apară imediat după descriere. înainte de prima apariție a etichetei . Parametrii etichetei și poate exista SPAN, care determină numărul de coloane adiacente care sunt afectate de valorile parametrilor și ALIGN, care determină alinierea orizontală a datelor în toate celulele coloanei (sau coloanelor) corespunzătoare. Valorile valide pentru parametrul ALIGN sunt LEFT, RIGHT și CENTER. Valoarea implicită pentru parametrul SPAN este una. Etichetă în plus, vă permite să setați parametrul VALIGN, care determină alinierea verticală a datelor în celule. Valorile valide pentru parametrul VALIGN sunt MIDDLE, TOP și BOTTOM. Diferența dintre etichete și constă în faptul că primul dintre ele, pe lângă stabilirea parametrilor de aliniere a datelor pentru coloane, îmbină condiționat și mai multe coloane într-un grup. Efectul acestei combinații este afișat atunci când se utilizează parametrul RULES, care este descris mai jos. În mod implicit, toate coloanele dintr-un tabel sunt considerate un grup. Etichetă ar trebui folosit doar pentru a defini alinierea datelor în coloane individuale dintr-un grup. Să dăm un exemplu. Să presupunem că doriți să construiți un tabel care să conțină 6 coloane, cu datele din primele trei dintre ele aliniate la dreapta, iar următoarele trei la mijloc. Pentru a rezolva această problemă, ar trebui să scrieți următorul cod HTML: (date pentru tabel) Rezultatul afișării acestui cod este prezentat în Fig. 4.16. Orez. 4.16. Tabel cu diferite opțiuni de aliniere pentru date în grupuri de celule Alt exemplu. Să presupunem că în tabelul anterior, primele două coloane ar trebui să fie aliniate la dreapta, iar a treia - în mijloc, iar toate cele trei coloane ar trebui grupate. Următoarele trei coloane trebuie să fie, de asemenea, grupate împreună și să aibă aceeași aliniere ca primul grup. Pentru a rezolva această problemă, ar trebui să scrieți următorul cod HTML: (date pentru tabel) În acest exemplu, după etichetă

, din care puteți vedea sensul grupării.

Sfat

Deoarece domeniul de aplicare al etichetelor

și este limitat la singurul browser Microsoft Internet Explorer, ar trebui să le utilizați cu precauție. Ușurința de utilizare a acestor etichete este evidentă, dar în practică, majoritatea tabelelor sunt construite folosind parametrul de aliniere ALIGN corespunzător pentru fiecare celulă de tabel, acolo unde este necesar, ceea ce mărește semnificativ dimensiunea codului sursă al tabelului, dar permite vizualizarea în orice browser.




Orez. 4.17. Tabel cu coloane grupate

Setarea culorii chenarelor tabelului

Încă câteva opțiuni, specifice doar Microsoft Internet Explorer, vă permit să selectați culoarea chenarelor tabelului - BORDERCOLOR, BORDERCOLORLIGHT și BORDERCOLORDARK. Acești parametri pot fi setați în etichete

, ... Numele culorii sau valoarea sa hexazecimală poate fi folosită ca valoare pentru acești parametri. Parametrul BORDERCOLOR determină culoarea tuturor elementelor de margine a tabelului, iar ceilalți doi parametri specifică culoarea marginilor individuale constitutive, suprascriind valoarea BORDERCOLOR. Parametrul BORDERCOLORLIGHT pictează marginile din stânga și de sus ale întregului tabel și, în consecință, marginile din dreapta și de jos ale fiecărei celule în culoarea specificată. Al doilea parametru BORDERCOLORDARK stabilește culorile marginilor opuse. Datorită combinației acțiunii acestor parametri, tabelul va părea oarecum ridicat deasupra suprafeței paginii sau adâncit. Totul depinde de combinația de culori aleasă.

Notă

Browserul Netscape 4.x acceptă și parametrul BORDERCOLOR.

Setarea imaginii de fundal pentru un tabel

Microsoft Internet Explorer (și Netscape 4.x) permite parametrului BACKGROUND să definească imaginea de fundal pentru un tabel în același mod în care poate face un întreg document HTML. Acest parametru poate fi setat în etichete

,	și

, , w

Microsoft Internet Explorer vă permite să utilizați o serie de etichete noi pentru a structura tabele și pentru a controla în mod flexibil randarea cadrelor și a liniilor de grilă.

Etichete

, și setați mai strict structura descrierii tabelului, evidențiind celulele antetului tabelului, conținutul principal al tabelului și rândul final. Aceste etichete pot apărea numai în descrierea tabelelor dintr-o pereche de etichete

și	. Etichete de structurare a tabelului

și.

Etichete și sunt folosite pentru a descrie antetul și subsolul unui tabel. Aceste etichete pot apărea cel mult o dată în tabel. Eticheta de sfârșit pentru acestea poate fi omisă. Utilizarea acestor etichete este utilă atunci când creați tabele mari care se extind dincolo de o pagină.

Etichetă poate fi găsit de mai multe ori în descrierea tabelului, în timp ce este necesară utilizarea etichetei de sfârșit... Această etichetă realizează gruparea logică a datelor în același mod ca eticheta gruparea coloanelor învecinate.

Odată cu utilizarea noilor etichete, devine posibil să se controleze mai flexibil marginile și liniile de grilă ale tabelului.

Controlul desenului cadrelor în jurul mesei este efectuat de parametrul FRAME al etichetei

iar liniile de grilă ale tabelului cu parametrul RULES. De exemplu, devine posibil să se deseneze doar linii verticale între coloane și în loc de un chenar în jurul întregului tabel, să se dea linii orizontale în partea de sus și de jos a tabelului.

Parametrul FRAME poate lua următoarele valori:

• CUTIE sau BORDERĂ - cadrul este desenat din toate cele patru laturi
• DE MAI SUS - doar din partea de sus
• DE MAI JOS - doar pe partea de jos
• HSIDES - părțile de jos și de sus sunt desenate
• VSIDES - sunt desenate laturile stânga și dreapta
• LHS - doar pe partea stângă
• RHS - doar pe partea dreaptă
• NUL - masa fara rame exterioare

Parametrul RULES controlează trasarea liniilor grilei interne ale tabelului și poate lua următoarele valori:

• TOATE - toate liniile interne sunt trasate
• GRUPURI - sunt trasate doar linii care despart grupurile
• RÂNDURI - se trasează linii care separă liniile
• COLS - se trasează linii care despart coloanele
• NICI UNUL - nu sunt trasate linii interne

Exemplu:

.

Notă

Desenarea liniilor de grilă ale tabelului și cadrelor se va realiza numai dacă parametrul BORDER al etichetei este prezent

... Dacă acest parametru este absent sau valoarea lui este zero, liniile de grilă și cadrele vor fi absente pentru orice valoare a parametrilor CADRE și REGULI.

Iată un exemplu de cod HTML complet care creează un tabel utilizând capabilitățile descrise:

Un exemplu de control flexibil al liniei
masă grilă

Titlul coloanei 1	Titlul coloanei 2	Titlul coloanei 3
Date	Date	Date
Date	Date	Date
Date	Date	Date
Date	Date	Date
Date	Date	Date
Date	Date	Date
Rezultat	Rezultat	Rezultat




Orez. 4.18. Desen flexibil al liniilor de grilă ale tabelului folosind browserul Microsoft Internet Explorer

În acest exemplu, a cărui afișare este afișată de browser în Fig. 4.18, este prezentată una dintre opțiunile posibile pentru controlul liniilor de grilă și a chenarelor din jurul tabelului. Un chenar de 5 pixeli este desenat în jurul mesei (BORDER = S) numai în partea de sus și de jos (FRAME = HSIDES). Grilele sunt desenate în interiorul tabelului pentru a separa grupurile de date (RULES = GROUPS). Grupurile de date sunt definite, în primul rând, prin prezența a trei etichete , fiecare dintre ele declară o coloană separată de tabel grup. În al doilea rând, etichetele , și<тгоот>de asemenea, împărțiți datele din tabel în grupuri, ceea ce determină trasarea liniilor orizontale interne.

Setarea numărului de coloane dintr-un tabel

Microsoft Internet Explorer (precum și browserul Netscape 4.x) vă permite să specificați în etichetă

parametrul COLS, a cărui valoare determină numărul de coloane din tabel. Scrierea acestui parametru vă permite să accelerați aspectul tabelului atunci când este afișat într-un browser, deoarece devine posibil să determinați numărul de coloane înainte ca codul de descriere a tabelului să termine încărcarea. Momentan, activarea acestui parametru nu afectează în niciun fel progresul de încărcare a documentului.

Alinierea pe verticală a meselor

Ultimul parametru de etichetă

specific doar Microsoft Internet Explorer, este VALIGN, care determină alinierea verticală a tabelului în raport cu textul. Acțiunea sa este similară cu cea pentru imagini.

Notă

Rețineți că utilizarea aceluiași parametru poate diferi semnificativ atât ca scop, cât și ca valori posibile pentru diferite etichete, chiar și pentru același browser și în cadrul specificației de limbă. Prin urmare, este imposibil să se întocmească un tabel rezumativ privind utilizarea diferiților parametri în afara contextului aplicării acestora. De exemplu, parametrul ALIGN este utilizat în tabele doar în trei moduri diferite:

• pentru etichetă

parametrul ALIGN poate lua valorile LEFT sau RIGHT, și înseamnă locația tabelului, aliniat la marginea din stânga sau din dreapta, respectiv;

pentru etichetă

, ... Această pereche înseamnă că am creat un rând în tabel și câte astfel de etichete vor fi scrise, câte rânduri vor fi.



Ei bine, înăuntru

mai punem jos o pereche - ... Această pereche înseamnă că am creat o coloană în această linie, iar dacă în fiecare tr sunt scrise mai multe td, atunci această linie va avea mai multe coloane. Clar? Dacă nu, atunci să ne uităm la un exemplu despre cum funcționează totul aici... Să presupunem că vreau să creez un tabel cu studenți și note. Apoi scriem următoarele în interiorul etichetei :

parametrul ALIGN ia valorile TOP sau BOTTOM și înseamnă locația antetului tabelului deasupra sau sub tabel;

pentru etichete

și	parametrul ALIGN ia valorile LEFT, RIGHT sau CENTER și înseamnă alinierea orizontală a conținutului celulei (sau celulelor) corespunzătoare din tabel. Alternativă la vizualizarea tabelului Suportul pentru tabele a devenit o caracteristică comună a browserelor Web, așa că există puține motive sau deloc pentru a evita utilizarea lor. Cu toate acestea, vom lua în considerare opțiuni posibile pentru reprezentări alternative de date care pot fi utilizate în locul tabelelor sau în plus față de acestea. Alte metode care nu folosesc conceptul de tabele: Folosind text preformatat. Această tehnică a fost folosită în mod tradițional în versiunile timpurii de HTML, când suportul pentru tabele nu era încă disponibil. Utilizarea sa nu și-a pierdut relevanța până în prezent, deoarece astfel de texte vor fi afișate corect de orice browser, inclusiv de cele pur text. Utilizarea unei imagini care conține un tabel. Tabelul poate fi creat cu orice editor de text sau chiar afișat de un browser Web și apoi salvat ca imagine într-unul dintre formatele grafice. Aceasta nu este cea mai bună opțiune, deoarece își pierde toată flexibilitatea de a personaliza în mod dinamic afișarea tabelelor. În plus, devine necesară stocarea unui fișier suplimentar cu o imagine, a cărei dimensiune, în plus, va fi de obicei mult mai mare decât dimensiunea textului care descrie tabelul HTML. O posibilă zonă de aplicare sunt tabelele de dimensiuni strict definite, pentru care dependența afișajului său de orice factori externi (fonturi, moduri de operare a browserului etc.) este inacceptabilă. Folosind liste în loc de tabele. Pentru cele mai simple cazuri, în loc să organizăm tabele, este destul de posibil să te descurci cu unul dintre tipurile de liste disponibile în HTML. Pregatirea meselor Orice editor poate fi folosit pentru a pregăti tabele HTML, dintre care majoritatea au instrumente pentru crearea vizuală a tabelelor. Să dăm un exemplu de pregătire a unui tabel în editorul HotDog Professional. Pentru a crea un tabel, trebuie doar să selectați elementul Tabele din meniul Inserare, după care caseta de dialog prezentată în Fig. 4.19. Crearea unui tabel consta in completarea campurilor corespunzatoare din fereastra. După ce ați determinat numărul de rânduri și coloane din tabel, puteți trece la completarea directă a celulelor individuale ale tabelului, care vor fi afișate în aceeași casetă de dialog. Caseta de dialog are un buton Previzualizare, făcând clic, care vă permite să vizualizați tabelul rezultat folosind browserul încorporat (Fig. 4.20). Orez. 4.19. Caseta de dialog pentru crearea tabelelor Orez. 4.20. Tabelul este afișat folosind browserul încorporat După finalizarea pregătirii datelor pentru tabel, faceți clic pe butonul OK. Apoi codul de descriere a tabelului generat va fi inserat în documentul HTML editat. Pentru exemplul prezentat în fig. 4.19, va fi generat următorul cod: (parte din cod a fost omisă) Cap de masă Coloana 1 Coloana 2 Coloana 3 Coloana 4 1 2 3 4 În mod similar, această problemă este rezolvată folosind componenta Netscape Composer a programului Netscape Communicator. În fig. 4.21 arată o casetă de dialog în care trebuie să completați câmpurile obligatorii. Pentru a introduce parametri suplimentari de etichetă Este oferit un buton HTML suplimentar. După completarea câmpurilor din caseta de dialog, ar trebui să faceți clic pe butonul Aplicare și apoi vi se va oferi posibilitatea de a completa celulele tabelului (Fig. 4.22). Orez. 4.21. Caseta de dialog pentru specificarea opțiunilor tabelului Netscape Composer Orez. 4.22. Poziția inițială a cursorului de intrare într-un tabel gol este 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 folosit pentru a conține antetul grupului în tabel („antet tabel”, a nu se confunda cu anteturile). Etichetă folosit pentru a conține „subsolul” tabelului (subsolul). Etichetă folosit pentru a conține „corpul” mesei (corpului). Element ar trebui utilizat o singură dată într-un tabel în următorul context: ca parte a unui element sunt create coloane. Pot fi create mai multe coloane. În acest caz, trebuie să urmăriț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ă combinarea celulelor. Cum se face un tabel în html Să dăm un exemplu, cod html: Exemplu de tabel Coloana 1 Coloana 2 Acordați atenție celulei ... Folosim atributul special colspan pentru a combina celulele pe orizontală. Valoarea sa numerică indică numărul de coloane de combinat. Există și un analog al acestui atribut: tag (antetul tabelului), unde trebuie să scrieți și colspan. Rezultatul va fi același. Dar td-ul obișnuit este adesea folosit. Acum să aruncăm o privire mai atentă la toate atributele etichetei. . Etichetați atributele și proprietățile La eticheta de deschidere poti scrie diverse atribute. 1. Property 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. ... 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 - chenarul 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. Property class = "class_name" - 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 din tabel. Aceste atribute trebuie să fie scrise în eticheta de deschidere. și sunt disponibile aceleasi optiuni ca si pentru va fi aplicat ierarhic tuturor și nu în interiorul elementului : sau corzi ... ... ... 2. Fundalul proprietății = „URL” - setează imaginea de fundal. În loc de URL, trebuie scrisă adresa imaginii de fundal. Exemplu Exemplu de tabel Coloana 1 Coloana 2 Convertit 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 stil = "culoare: alb;" ... Deoarece fundalul este aproape negru, astfel încât textul să nu se îmbine cu fundalul, am făcut textul alb. 3. Proprietatea bgcolor = "culoare" - setează culoarea de fundal a tabelului. Ca culoare, puteți alege oricare din întreaga paletă (vezi codurile și numele culorilor html) 4. Chenar de proprietate = „număr” - setează grosimea chenarului tabelului. În exemplele anterioare, am specificat chenar = „1”, ceea ce înseamnă că lățimea chenarului este de 1 pixel. 5. Proprietate bordercolor = "culoare" - setează culoarea chenarului. Dacă chenar = „0”, atunci nu va fi nicio 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 este probabil să accelereze încărcarea tabelului. 9. Cadru de proprietate = „parametru” - cum să afișați chenarele în jurul tabelului. Poate lua următoarele valori: gol - nu desenați granițe chenar - chenarul din jurul mesei deasupra - chenar în partea de sus a tabelului dedesubt - chenar în partea de jos a tabelului hsides - adăugați doar margini orizontale (sus și jos ale tabelului) vssides - desenați doar margini verticale (stânga și dreapta tabelului) rhs - chenar numai pe partea dreaptă a mesei lhs - chenar numai pe 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ă chenarele dintre celule. Poate lua următoarele valori: toate - se trasează o linie în jurul fiecărei celule din tabel grupuri - linia este afișată între grupurile care sunt formate din etichete . Atribute și proprietăți 1. Property align = "parametru" - setează alinierea unei celule individuale în tabel. Poate lua următoarele valori: aliniament stânga - stânga aliniament centru - centru alinierea dreapta - dreapta 2. Fundalul proprietății = „URL” - setează imaginea de fundal a celulei. În loc de URL, trebuie scrisă adresa imaginii de fundal. 3. Proprietatea bgcolor = "culoare" - setează culoarea de fundal a celulei. 4. Proprietate bordercolor = "culoare" - setează culoarea marginii celulei. 5. Proprietatea char = "litera" - setează litera din care ar trebui făcută alinierea. Valoarea atributului align trebuie să fie 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. Proprietate rowspan = „număr” - setează numărul de celule verticale îmbinate. 10. Proprietate valign = „parametru” - alinierea verticală a conținutului celulei. sus - aliniază conținutul celulei cu partea de sus a liniei aliniament mijloc - mijloc de jos - aliniați cu partea de jos linia de bază - alinierea liniei de bază Nota 1 Pentru etichetă ... Parametri pentru o etichetă inauntru Cum să preveniți lipirea celulelor din tabel În cazul utilizării chenar (border de celule) și zero padding între celule, acestea sunt încă lipite împreună și obțineți un chenar dublu. Pentru a evita acest lucru, trebuie să înregistrați tabelul border-collapse: collapse în foaia de stil: ... Dragă cititor, acum ați învățat multe despre eticheta html table. Acum vă sfătuiesc să treceți la următoarea lecție. . Fiecare rând al tabelului este plasat într-un element ... . Celula antet tabelului este plasată în element (Acesta afișează conținutul cu aldine și centrat). Fiecare celulă a datelor din tabel este plasată într-un element . Numele tabelului, dacă este necesar, este plasat în interiorul elementului (element opțional de tabel). Vă atrag atenția asupra faptului că, dacă intenționați să utilizați acest element în tabelul dvs., atunci acesta trebuie să urmeze în document imediat după element ... ... ... .. . Să trecem la partea practică a realizării foii de calcul: chenar = "1"> Masa elementara Celula antet 1 Celula antet 2 Celula antet 3 Celula de date 1 Linia 2 Celula de date 2 Linia 2 Celula de date 3 Linia 2 Celula de date 1 Linia 3 Celula de date 2 Linia 3 Celula de date 3 Linia 3 Pentru claritate, am adăugat un atribut de margine la acest tabel cu o valoare de „1”, care specifică că chenarul trebuie afișat în jurul celulelor tabelului. Atributul border nu este folosit aproape niciodată în HTML, în acest caz folosirea CSS ar fi de preferat și ar oferi mai multă flexibilitate. Ca parte a studiului HTML, vom învăța cum să formăm tabele din punct de vedere gramatical și când studiem CSS 3în articolul „” vom învăța cum să le stilizăm profesional. Rezultatul exemplului nostru: Concatenează coloanele Concatenează coloanele în elemente (celula de date) sau (celula antet) se poate face folosind atributul colspan (celula este întinsă la dreapta cu numărul specificat de celule). chenar = "1"> Masa elementara Celula antet 1 Celula antet 2 Celula de date 1 Linia 2 Celula de date 2 Linia 2 Celula de date 3 Linia 2 Celula de date 1 Linia 3 Celula de date 2 Linia 3 Celula de date 3 Linia 3 Rezultatul exemplului nostru: Concatenarea șirurilor Concatenează șiruri în elemente sau permis folosind atributul rowspan (intervalul de celule este de sus în jos și se întinde pe mai multe rânduri - celula este întinsă în jos). chenar = "1"> Masa elementara Celula antet 1 Celula antet 2 rowspan = "2"> Celula de date 1 Linia 2 Celula de date 2 Linia 2 Celula de date 2 Linia 3 Celula de date 2 Linia 3 Celula de date 3 Linia 3 Rezultatul exemplului nostru: Proprietățile coloanei Un exemplu de utilizare a atributului span pe coloanele individuale ale unui tabel: span = "2" stil = "culoare de fundal: kaki"> Numarul aplicatiei Serviciu preț, freacă. Total 31337 Citirea după ureche 1 000 1 000 Rezultatul exemplului nostru: Dacă trebuie să stilați doar o singură coloană, atunci este suficient să specificați atributul span în interiorul elementului Numarul aplicatiei Serviciu preț, freacă. Comision, freacă. 31337 Citirea după ureche 1 000 150 Rezultatul exemplului nostru: Împărțirea unui tabel în părți Următoarele etichete HTML sunt folosite pentru a împărți tabelul în părți: Etichetă (ca element copil (imbricat)), dacă este etichetat (definește un grup de coloane într-un tabel) trebuie să urmeze după aceste elemente, dar inainte de decât orice etichetă , și ... În plus, elementul trebuie să aibă una sau mai multe etichete în interior (container pentru crearea șirurilor). Elementele , și nu afectează aspectul implicit al tabelului. Cu toate acestea, folosind CSS, puteți stila aceste elemente după cum doriți. (numele tabelului) și stil = "culoare de fundal: argintiu"> stil = "culoare-fond: coral"> stil = "culoare-fond: kaki"> Serviciu Preț Sumă 3 000 Citirea după ureche 1 000 Joc cu pumnul 2 000 Rezultatul exemplului nostru. O zi bună tuturor, dragii mei prieteni. Cum merge vara? Sper că toată lumea se descurcă bine. Ei bine, astăzi vom continua să învățăm elementele de bază ale html și astăzi va fi probabil ultima lecție pe această temă, pentru că atunci ne vom cufunda în CSS. Deci, vorbind despre html, nu pot să nu vorbesc despre tabele, deoarece sunt și ele un subiect destul de important. Luați cel puțin același WordPress. În mod implicit, acest motor nu poate crea un tabel. Aveți nevoie fie de un add-on special (plugin), fie de un cod de program special (script). Dar putem face ceea ce vrem cu etichete simple. În general, astăzi vă voi spune cum să creați un tabel în html, deoarece acest lucru vă poate ajuta foarte mult. Îmi amintesc cum am creat primele mele site-uri folosind un aspect de tabel, de exemplu. antetul, barele laterale, subsolul și blocul de conținut erau doar elemente de tabel. Am menționat asta în articolul meu despre. Adevărat, astăzi nu se mai obișnuiește să faci site-uri folosind tabele, dar asta nu înseamnă că nu sunt necesare. Mai degrabă, opusul este adevărat. Ce e grozav este că nici măcar nu trebuie să desenezi nimic. Totul se face într-un blocnotes obișnuit (bine, sau altul, cum ar fi Notepad ++), și destul de ușor. În general, să ne pregătim de muncă. Etichete Marcarea aici este puțin mai complicată decât în ​​alte etichete, dar totul este ușor de reținut. Așa că privim și nu ne lăsăm distrași. Orice tabel este întotdeauna inclus într-o etichetă de pereche ... Acestea. aceste semne dau comanda ca masa va fi amplasata aici. O etichetă asociată este plasată în interiorul mesei

	Matematica	Limba rusă	Istorie
Medvedev	3	5	5
Smirnov	5	5	5
Sokolov	3	2	3

Ce am făcut aici? Și am făcut patru rânduri (tr), fiecare dintre ele conține patru tabele (td). În primul bloc tr am scris denumirea disciplinelor academice, lăsând în același timp prima coloană goală pentru a nu încălca tabelul.

Mai departe în fiecare prima pereche td inserăm numele elevilor și ale tuturor celorlalți td completați evaluările în celula corespunzătoare. În general, scrieți acest lucru și salvați fișierul, apoi deschideți-l într-un browser, apoi veți înțelege singuri cum se întâmplă acest lucru.



Dar intrând în document, vedem că tabelul nu seamănă prea mult cu ceea ce am planificat. Și ce lipsește aici? Așa este - granițe. Dar nu-ți face griji. Vă voi spune despre asta mai jos.

Dar, de dragul decenței, vă voi arăta o altă etichetă care evidențiază și centrează datele în tabele. Această etichetă este scrisă ca ... Să evidențiem titlurile noastre în tabel. Pentru a face acest lucru, trebuie doar să înlocuiți etichetele td, pe alîn acele locuri în care scriem denumirile şi titlurile disciplinelor.



Și să vedem ce obținem datorită acestui lucru. După cum am spus, aceste nume sunt acum centrate și evidențiate. Asta ne-am dorit.



În general, ne-am cam dat seama de etichete. Deși sunt și altele (vă puteți uita la htmlbook), dar nu mă voi opri asupra lor.

Atribute

Desigur, așa ceva ca tabelele nu se poate lipsi de atribute speciale și vă voi arăta câteva dintre ele.

Frontieră

Ei bine, aș vrea să încep cu ce am spus mai sus, apoi despre granițe. În mod implicit, acestea nu sunt acolo, așa că tabelul este neatractiv și nu este pe deplin de înțeles. Dar acest lucru poate fi remediat, iar atributul border ne va ajuta în acest sens, care este plasat direct în eticheta de deschidere.

... Faceți așa cum v-am arătat în exemplul de mai jos, adică setați valoarea chenarului atributului = „1”.



După ce ați făcut acest lucru, salvați rezultatul și rulați documentul. Bine? Este cu totul alta chestiune. Masa a revenit acum la forma normală și arată așa cum ar trebui. Puteți experimenta cu diferite valori de frontieră și puteți vedea ce funcționează cel mai bine pentru dvs.



Umplutură și spațiere (cellpadding și cellspacing)

Este destul de firesc ca o singură afișare a mesei pentru toate ocaziile să nu se potrivească tuturor. Dar putem schimba puțin asta, datorită a două atribute similare.

Cellpadding = "" - modifică distanța de la cadru în sine la conținutul din celulă. Astfel, toate celulele din tabel devin mai mari. Să scriem acest atribut în tabel și să setăm valoarea la 5 și să vedem cum va diferi din versiunea originală.

Hop. Vedea? Distanța a crescut. în acest fel, puteți înlocui singuri valorile dorite, extinzând astfel celulele.

Cellspacing = "" - modifică distanța dintre celulele tabelului, iar valorile sale sunt măsurate și în pixeli. Să încercăm să setăm și acest atribut cu o valoare de 5 și să vedem ce se întâmplă.



Bine? Este clară esența? După cum puteți vedea, distanța dintre celule a devenit mai mare. Este exact ceea ce ne străduim.



Alinia

Ei bine, unde suntem fără acest atribut minunat care ne permite să aliniem totul în locuri diferite? Align funcționează în același mod ca și cu celelalte etichete pe care le-am parcurs mai devreme și are trei semnificații:

• Centru
• Dreapta

Să notăm fiecare dintre valori și să vedem cum va fi distribuit tabelul.



Bine? Totul pare să funcționeze și cred că ar trebui să fie clar. Dar dacă aveți întrebări, atunci nu ezitați să întrebați.



Ei bine, asta este practic tot ce am vrut să vă spun despre mese astăzi. Sper că totul a fost clar pentru tine. Ei bine, dacă doriți să studiați în detaliu toate complexitățile lucrului cu HTML și CSS și să învățați cum să creați singuri site-uri, atunci vă recomand cu tărie să căutați curs video superb pe această temă. Pentru un începător, acesta este cel mai de înțeles, ca și pentru mine, cursul video, în care pur și simplu vor mesteca totul și îl vor pune pe rafturi.

Ei bine, îmi termin lecția pentru azi. Nu uitați să vă abonați la actualizările blogului meu pentru a nu pierde nicio informație sau știre importantă. Și ne vedem în alte articole. Mult succes si la revedere!

Salutări, Dmitri Kostin.