Tabelele în HTML sunt atât de funcționale încât le puteți folosi pentru a configura site-uri web întregi (citiți). Acum vom vorbi despre inserarea tabelelor HTML simple într-o pagină web, analizând doar marcajul, dar fără a atinge designul, deoarece este mai bine să decorați tabelele folosind stiluri CSS.

Tabele și atribute

Iată elementele de bază de care aveți nevoie pentru a crea tabele:

• - un recipient în interiorul căruia se află masa (la fel ca
  pentru marcat sau
  pentru liste numerotate).
  1. frontieră- un atribut care determină grosimea ramelor. Este mai bine să utilizați în schimb proprietatea border CSS.
  .

  În al doilea rând, acest cod poate să nu funcționeze conform așteptărilor în anumite cazuri. Când faceți clic pe un buton Trimite formularul nu poate fi depus.

  Aceasta este exact situația pe care am întâlnit-o în timpul muncii mele. Am plasat formularul în interiorul unei linii

  . Totul a funcționat - grozav. Valabil, invalid, nu am inteles. Dar ideea este că în aceasta masa rezultatele căutării au fost afișate folosind tehnologia ajax, adică fără a reîncărca întreaga pagină. Datele sunt introduse în bara de căutare, iar rezultatele găsite sunt afișate în tabel, în timp ce numai conținutul tabelului este actualizat. Deci, atunci când tabelul a fost încărcat după o solicitare ajax, atunci depune formulare, încorporat într-un tabel într-un mod atât de incorect, a încetat să funcționeze.

  Pentru a plasa formularul într-un tabel, vă sugerez să utilizați următoarea metodă.

  Declarați forma înaintea tabelului și asigurați-vă că îi dați un fel de id (în exemplul meu, id=”myform”). Puneți intrarea în interiorul tabelului unde ați planificat, dar În fiecare intrare trebuie să adăugați atributul form="myform", a cărui valoare va indica cărei forme îi aparține acest element.

  Pentru exemplul nostru, codul se va schimba astfel:

  specifică semnătura tabelului. Nu trebuie să utilizați un container, dar dacă tot decideți să dați titlul tabelului, atunci plasați-l imediat după etichetă , în afara celulelor și rândurilor.

  - etichetă asociată, care conține un rând de tabel (celule situate orizontal la același nivel).

  , vor fi atât de multe celule în el: o etichetă - o celulă.

  vă permite să grupați coloane, rapid și fără a înfunda codul, atribuiți-le Caracteristici generale. Folosind un container, puteți separa părțile logice ale unui tabel unele de altele. Așezat după etichetă

  , dacă nu este acolo, atunci după .

  folosit în același scop ca . poate conține , dar nu invers.

  span- un atribut care specifică numărul de coloane cărora li se aplică proprietățile containerului

  .

  , Și - containere care vă permit să împărțiți masa în părțile superioare (titluri), principale (corp) și, respectiv, inferioară (finală). Într-un tabel HTML, secvența acestor etichete este aceeași cu succesiunea containerelor , Și

  Instrumente de creare a site-urilor web

  Scop	Instrument
Marcare	HTML	XHTML
Decor	CSS
Dezvoltare	PHP	Piton

  În browser, documentul va arăta astfel:

  Să ne dăm seama ce linii de cod sunt responsabile pentru ce.

  • - a deschis masa, dându-i grosimea ramelor.
    - l-au intitulat.
    - a deschis linia.
    - a creat o celulă cu un design de antet.
    - a creat o a doua celulă antet în rând. Parametrul colspan a indicat că această celulă ar trebui să se întinde pe două orizontal.
    - a închis linia. Liniile rămase au fost create în același mod.
    - a adăugat un al doilea rând al tabelului cu celule obișnuite, mai degrabă decât antet. Rândurile și celulele ulterioare au fost inserate în mod similar.

    Instrumente de creare a site-urilor web

    Scop	Instrument
  Marcare	HTML	XHTML

    - a închis masa.

  Bună ziua

  Uneori apare o situație când trebuie să plasați un formular html într-un tabel html.

  De exemplu, există un tabel cu câteva date, iar în primul rând al acestui tabel dorim să plasăm intrări pentru introducerea și adăugarea de informații noi.

  Cel mai probabil, primul cod pe care îl scrieți despre asta va fi:

  - o etichetă care creează o celulă antet de tabel. În exterior, conținutul său diferă de conținutul din alte celule - de obicei textul din interior	Browserul îl evidențiază cu caractere aldine și îl plasează în centru.	- un container cu care se creează o celulă simplă. Câte astfel de etichete va conține o linie (tag

  < tr > < form method = "post" action = "" > < td > < input type = "text" name = "first_name" / > < / td > < td > < input type = "text" name = "second_name" / > < / td > < td > < input type = "submit" name = "add" / > < / td > < / form > < / tr >

  Aceasta este opțiunea greșită!

  În primul rând, acest cod nu este valid. Forma nu poate fi un copil direct masa, tbodyȘi tr . Adevărat, poate fi localizat în interiorul unei celule separate de tabel, adică între etichete

  < form method = "post" id = "myform" > < / form > < table > < tr > < td > < input type = "text" name = "first_name" form = "myform" > < / td > < td > / > < / td > < / tr > < / table >

  Această opțiune pentru plasarea elementelor de formular în interiorul unui tabel este validă și, cel mai important, ar trebui să funcționeze în orice situație.

  În cazul meu, după o solicitare ajax, trimiterea formularului a funcționat! La fel iti doresc si tie!

  Apropo, nu am mai întâlnit asta până acum atribut de formă. Deși fac programare web de destul de mult timp. Aparent, astfel de sarcini nu au apărut. Dar, atenție la cât de mult este oferit și luat în considerare în limbajele de dezvoltare. Probabil că puteți rezolva orice problemă și puteți găsi o cale de ieșire din orice situație.

  Vă doresc ca erorile să fie identificate și corectate rapid!

  Etichetele de tabel HTML au fost inițial destinate să reprezinte rânduri și coloane de date tabulate. Cu toate acestea, designerii au învățat să le folosească pentru a manipula aspectul paginilor Web: creați coloane de text, setați spații între elemente și schimbați aspectul textului în moduri în care alte etichete de format HTML nu nu pot.

  Tabelele în HTML sunt întotdeauna dreptunghiulare și constau din rânduri, care la rândul lor constau din celule. Toate constructele de limbaj care descriu componentele tabelului creat sunt cuprinse între etichete

  Și.

  Tabelul este completat rând cu rând; o pereche de etichete este folosită pentru a desemna un șir .... Un rând este format din celule, care sunt specificate folosind fie etichete ..., dacă aceste celule conțin anteturi de coloană sau etichete .... Titlurile sunt afișate cu caractere aldine și sunt situate în centrul celulei. Datele sunt în font normal și aliniate în partea stângă a celulei. Etichetele sunt folosite pentru a seta titlul întregului tabel Și.

  Exemplu

  Titlul tabelului

  Titlul 1Titlul 2

  Celula 1Celula 2

  Celula 3Celula 4

  

  Prezența datelor în celule nu este necesară. Există două moduri de a crea o celulă goală: nu-i umple recipientul cu nimic ( ), sau plasați un caracter de spațiu care nu se întrerupe în el, specificat de o secvență specială de caractere -- (adică, creați o celulă ca ).

  Nu este nevoie să creați separat celule goale dacă plănuiți ca toate celulele rămase din rând să nu fie umplute. De când eticheta semnalează începutul unei noi linii, celulele goale vor fi adăugate automat de browser.

  Atributele de bază ale etichetei

  Atribuirea atributelor de bază ale etichetei

  iar valorile pe care le pot lua sunt enumerate în tabel.

  Atribut	Scop
  	Definește lățimea chenarului tabelului (în pixeli), de exemplu, BORDER=1; o valoare zero înseamnă că nu există cadru
  	Definește lățimea întregului tabel în pixeli sau ca procent din lățimea ferestrei browserului
  	Definește înălțimea întregului tabel în pixeli sau ca procent din înălțimea ferestrei browserului
  	Setează alinierea orizontală a tabelului în fereastra browserului; are valorile stânga, centru și dreapta (implicit este stânga)
  	Adaugă spațiu liber între datele din interiorul celulei și marginile acesteia; valoarea implicită este 2
  	Adaugă spațiu liber între celule în întregul tabel; valoarea implicită este 2
  	Specifică zone de spațiu liber cu o lățime specificată (în pixeli) la stânga și la dreapta tabelului
  	Specifică zone de spațiu liber cu o înălțime dată (în pixeli) deasupra și sub tabel
  BGCOLOR=culoare	Setează culoarea de fundal a întregului tabel
  	Indică imagine de fundal pentru un tabel, unde URL este adresa sursă (numele fișierului imagine)

  Exemplu Să modificăm conținutul documentului creat în exemplul anterior adăugând atributele BORDER și ALIGN la etichetă

  :

  Acum celulele tabelului vor fi încadrate, iar tabelul va fi aliniat în centrul ferestrei browserului.

  

  09.11.2015

  
  

  Salutare tuturor!
  Să continuăm să învățăm elementele de bază ale HTML. În această lecție vă voi spune și vă voi arăta exemple cum se face un tabel în HTML. Ne vom uita, de asemenea, la modul în care puteți seta culoarea celulelor tabelului, cum să centrați tabelul, cum să învățați cum să faceți un chenar de tabel etc.
  Tabelele HTML sunt adesea folosite în HTML pentru a enumera unele informații. Anterior, tabelele erau folosite pentru a crea cadrul paginilor web:

  

  ...dar asta este deja în trecut, deoarece astăzi sunt mai multe moduri eficiente crearea de wireframes pentru un site web cu . Folosesc adesea un tabel pe blogul sau pe site-ul meu web, de exemplu, ca în .

  Cred că înțelegi de ce trebuie să înveți cum să creezi un tabel.

  Din ce etichete principale constă tabelul?

  ○ etichetă MASA
  Este containerul principal pentru crearea unui tabel, care conține alte elemente de tabel, cum ar fi coloanele și rândurile.
  Eticheta de închidere este necesară.

  ○ etichetă TR

  În interiorul recipientului

  …… sunt plasate rândurile:

  Coloanele sunt create folosind o etichetă .
  Eticheta de închidere este necesară.

  Atenţie: Este imposibil să creezi un tabel fără a folosi toate aceste etichete.

  Acum să încercăm să folosim teoria și să creăm un tabel în practică.

  Exercițiu: creați un tabel de un rând cu trei coloane.

  rândul -1 / coloana 1

  coloana 2

  coloana 3

  Exercițiu: creați un tabel de trei rânduri și trei coloane.

  rândul -1 / coloana 1	coloana 2	coloana 3
  rândul -2 / coloana 1	coloana 2	coloana 3
  rândul -3 / coloana 1	coloana 2	coloana 3

  Vă este totul clar până în acest moment? Cine nu înțelege, ridică mâna! Da, înțelegem cu toții, așa că hai să mergem mai departe.

  Acum să ne uităm la atributele tabelului.

  *Atribute

  ○ Borduri de tabel în HTML

  Pentru a face tabelul vizibil, accesați eticheta

  se aplică atribut "frontieră» .
  

  Dacă valoarea atributului « frontieră» „0”, chenarul nu va fi vizibil decât dacă este adăugat la etichetă

  atribut "frontieră", nici chenarul din tabel nu va fi vizibil.

  rândul -1 / coloana 1

  coloana 2

  coloana 3

  
  
  

  Rezultat:

  Încercați să schimbați valoarea din atribut "frontieră" pe "10" .

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

  Pentru a combina celule într-un tabel, utilizați atribute "colspan"și „rowspan” la etichetă < td> .

  • colspan - unirea celulelor pe orizontală;
  • rowspan - îmbinarea celulelor pe verticală.

  În valori, indicați câte celule doriți să îmbinați.

  rândul 1 coloana 1
  rândul 2 coloana 1	rândul 2 coloana 2

  Rezultat:

  rândul 1 coloana 1	rândul 1 coloana 2
  	rândul 2 coloana 1

  Rezultat:

  Exemplu mai complex:

  rândul -1 / coloana 1	coloana 2			coloana 3
  rândul -2 / coloana 1	coloana 2	coloana 3	coloana 4

  
  
  

  Rezultat:

  ○ Cum să măriți spațiul dintre celulele tabelului

  Pentru a mări distanța dintre text și marginea celulei, adăugați atributul "umplutură celulară" a eticheta

  În valorile atributului „cellpadding”, specificați distanța de indentare

  rândul 1 coloana 1

  coloana 2

  Rezultat:

  Pentru a mări distanța dintre celule dintr-un tabel, utilizați atributul "spațierea celulelor" a eticheta

  În valorile atributelor "spațierea celulelor" specificați distanța dintre celule

  rândul 1 coloana 1

  coloana 2

  Rezultat:

  ○ Cum să faci un fundal de tabel HTML

  Pentru a crea un fundal de tabel HTML, utilizați eticheta to

  Și

  urmatoarele atribute: 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. rândul -1 / coloana 1 coloana 2 coloana 3 rândul -2 / coloana 1 coloana 2 coloana 3 coloana 4 Rezultat: ○ Cum să inserați o imagine într-un tabel HTML Pentru a insera o imagine într-un tabel HTML, între etichetă

  introduceți eticheta .

  rândul 1 celula 1

  celula 2

  Rezultat:

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

  ○ Alinierea conținutului într-un tabel HTML

  Pentru a alinia conținutul într-un tabel HTML, utilizați eticheta to atribut "alinia"Și "valliniaza" :

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

  • stânga - împingeți conținutul în partea stângă (Mod implicit);
  • centru – instalați în centru;
  • dreapta - împingeți conținutul în partea dreaptă

  VALIGN– alinierea verticală a conținutului în tabel.
  Valori:

  • 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
  text

  celula implicită	Aliniați conținutul pe orizontală de-a lungul marginii din dreapta, pe verticală - apăsați-l în jos
  Aliniați conținutul orizontal de-a lungul marginii din stânga, vertical - apăsați-l în sus	Aliniați conținutul orizontal în centru, vertical - apăsați-l în mijloc

  Rezultat:

  ○ Cum să centrați un tabel HTML

  Pentru a centra o masă, trebuie să înfășurați masa cu o etichetă

  :
  Cod tabel

  rândul -1 / coloana 1

  coloana 2

  coloana 3

  Etichete suplimentare și principale pentru masă

  Tabel pentru site

  Titlul 1	Titlul 2
  1	2

  Rezultat:

  Acum am terminat cu tabelele. Acum puteți crea singur un tabel de orice complexitate. Fixați 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ă
  Următoarea intrare
  

  capitolul 4

  Tabelele în HTML

  Una dintre cele mai puternice și utilizate funcții în HTML sunt tabelele. Conceptul de prezentare tabelară a datelor nu necesită explicații suplimentare. ÎN Tabelele HTML sunt utilizate nu numai în mod tradițional ca metodă de prezentare a datelor, ci și ca mijloc de formatare a paginilor Web. Să dăm exemple de documente din viața reală în care o reprezentare tabelară este o modalitate convenabilă de a construi un document. În fig. Figura 4.1 prezintă un exemplu tipic de utilizare a tabelelor pentru a prezenta date numerice împărțite în rânduri și coloane. În fig. 4.2 utilizarea unui tabel servește doar scopurilor de formatare a documentului și de specificare a poziției relative a elementelor paginii. Când vizualizați un astfel de document, nu este imediat evident că se folosește un tabel pentru a-l construi, deoarece cadrele din jurul celulelor sale nu sunt desenate.

  Prima versiune limbaj HTML nu a furnizat instrumente speciale pentru afișarea tabelelor, deoarece a fost destinat în principal pentru scrierea unui text simplu. Odată cu dezvoltarea domeniilor de aplicare a documentelor HTML, sarcina de a prezenta date, care este de obicei reprezentată de un număr de rânduri și coloane, a devenit urgentă. Crearea documentelor care conțin date aliniate pe coloane s-a realizat inițial folosind text preformatat, în cadrul căruia a fost asigurată alinierea necesară prin introducerea numărului necesar de spații. Amintiți-vă că textul din interiorul unei perechi de etichete

  ȘI

  apare în font monospațiu și toate spațiile și file-urile sunt semnificative. Lucrarea de aliniere a unui astfel de text a fost realizată manual, ceea ce a încetinit semnificativ crearea documentelor. Suportul pentru prezentarea datelor tabulare a devenit un standard de facto, deoarece a fost implementat inițial în toate browserele de top și abia după o perioadă considerabilă de timp a fost consacrat în specificația HTML 3.2.

  Instrumentele speciale pentru crearea tabelelor nu elimină însă posibilitatea utilizării textului preformatat. Utilizarea tabelelor nu se limitează la date formate din rânduri și coloane. O aplicație 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 pentru crearea tabelelor și exemple de utilizare a acestora.

  

  Orez . 4.1. Exemplu tipic de tabel HTML

  
  

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

  Crearea de tabele HTML simple

  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.

  Descrierile tabelelor ar trebui să fie situate în interiorul secțiunii documentului . Un document poate conține un număr arbitrar de tabele și este permisă imbricarea tabelelor unul în celălalt. Fiecare tabel trebuie să înceapă cu eticheta

  și se încheie cu eticheta. În interiorul acestei perechi de etichete se află o descriere a conținutului tabelului. Orice tabel constă din unul sau mai multe rânduri, fiecare dintre acestea conținând date pentru celule individuale.

  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ă folosit de obicei pentru celulele antetului tabelului și - pentru celulele de date. Diferența de utilizare este doar tipul de font utilizat în mod implicit pentru a afișa conținutul celulelor, precum și locația datelor în celulă. Conținutul celulelor de tip este afișat cu font aldine și situat în centru (ALIGN=CENTER, VALIGN=MIDDLE). Celulele definite prin etichetă în mod implicit afișați 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 completare, Și poate fi omis. În acest caz, sfârșitul rândului sau al descrierii celulei este începutul următorului rând sau al celulei, sau sfârșitul tabelului. 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ăr maxim sau printre toate rândurile. Este posibil ca unele celule să nu conțină date; astfel de celule sunt descrise de o pereche de etichete care urmează într-un rând - , . Dacă una sau mai multe celule situate la sfârșitul unui rând 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 pe rânduri diferite.

  Tabelul poate avea un antet, care constă din câteva etichete Și. Descrierea antetului tabelului ar trebui să fie situată în interiorul etichetelor

  Și oriunde, dar în afara zonei de descriere a oricăreia dintre etichete , sau . Conform specificației limbajului HTML, locația descrierii antetului este reglementată mai strict: aceasta trebuie să fie localizată imediat după etichetă. iar până la prima . Vă recomandăm să respectați această regulă.

  În mod implicit, textul titlului tabelului este poziționat deasupra acestuia (ALIGN=TOP) și centrat pe 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 iau 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.

  Celula 1 rândul 1	Celula 2 rândul 1
  Celula 1 rândul 2	Celula 2 rândul 2

  
  

  Orez. 4.Z. Un exemplu de tabel simplu

  Prezentarea tabelelor pe o pagină

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

  Titlul tabelului

  Etichetă antet tabel are un singur parametru valid ALIGN, care ia valorile TOP (antetul deasupra tabelului) sau BOTTOM (antetul sub tabel). Parametrul ALIGN poate fi omis, care corespunde valorii ALIGN=TOP. În direcția orizontală, antetul tabelului este întotdeauna situat în centrul mesei. Este posibil ca tabelul să nu aibă un antet. În cele mai multe cazuri, textul simplu este folosit ca titlu de tabel, care este reglementat de specificația HTML, dar în realitate între etichete Și este acceptabil 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, tabelul va fi afișat așa cum se arată în Fig. 4.4.

  
  

  Orez. 4.4. Tabel cu antet

  Browser Microsoft Internet Explorer prevede caracteristici suplimentare pentru a selecta poziția antetului. 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, scrierea ALIGN=RIGHT va asigura că antetul este poziționat în partea dreaptă și poziționat deasupra mesei. Dacă scrieți ALIGN=BOTTOM, atunci, la fel ca în exemplul de mai sus, antetul va fi situat sub tabel. Cu toate acestea, utilizarea parametrului ALIGN de ​​două ori în același antet nu este permisă. Prin urmare, a fost introdus suplimentar un parametru special pentru alinierea verticală - VALIGN, care ia valorile TOP sau BOTTOM. De exemplu, pentru un titlu situat în partea de jos a unui tabel aliniat la stânga, descrierea arată astfel:

  Direcția poziționată în partea de jos, aliniată la stânga

  Un tabel cu această descriere a antetului în Microsoft Internet Explorer va fi afișat după cum urmează (Fig. 4.5). Dacă acest exemplu este vizualizat în Netscape, antetul va fi plasat implicit, adică deasupra tabelului și în mijloc în direcție orizontală.

  
  

  Orez. 4.5. Alinierea orizontală a antetului tabelului în Microsoft Internet Explorer

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

  Opțiuni de etichetare

  Eticheta principală folosită la crearea tabelelor este eticheta

  . Poate fi folosit cu o serie de parametri, fiecare dintre care poate fi omis. Kit parametrii acceptabili depinde de browser. Conform specificației HTML din etichetă Pot fi utilizați următorii parametri: BORDER, CELLSPACING, CELLPADDING, WIDTH, ALIGN. Browserele NetScape și Microsoft Internet Explorer vă permit să utilizați, pe lângă cei cinci parametri enumerați mai sus, parametri HEIGHTși BGCOLOR. Unele browsere vă permit, de asemenea, să setați alte opțiuni. Să luăm în considerare scopul parametrilor de etichetă utilizați în mod obișnuit .

  parametrul BORDER

  Parametrul BORDER controlează aspectul chenarului în jurul fiecărei celule, care este în esență liniile grilei tabelului și în jurul întregului tabel. În mod implicit, cadrele nu sunt desenate, iar utilizatorul va vedea doar textul spațiat uniform al celulelor tabelului pe ecran. Există multe situații în care utilizarea tabelelor fără cadre este destul de justificată, de exemplu, pentru liste cu mai multe coloane implementate folosind tabele sau pentru specificarea poziției relativ exacte a imaginilor și textului. Cu toate acestea, în cele mai multe cazuri, pentru utilizarea tradițională a tabelului, este util să se separe celulele una de cealaltă cu linii de grilă, ceea ce face ca informațiile conținute în tabel să fie mai ușor de perceput și înțeles.

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

  Parametru BORDER, care poate avea o valoare numerică.

  De exemplu,

  sau .

  Valoarea numerică a parametrului determină grosimea marginii în pixeli care este desenată în jurul întregului tabel, dar această valoare nu afectează grosimea marginilor din jurul fiecărei celule. Dacă nu există o valoare numerică, de obicei se presupune că este valoarea minimă (1), deși stilul de afișare a marginilor poate diferi între browsere. Nu există posibilitatea de a controla independent afișarea unui chenar în jurul întregului tabel și a chenarelor în jurul celulelor.

  Un exemplu de tabel cu un cadru gros 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. Deci, în special, devreme versiuni Microsoft Internet Explorer nu a permis setarea unei valori numerice.

  Rețineți că dacă nu există niciun parametru cadre BORDER nu sunt desenate, dar le este lăsat spațiu (acest lucru este valabil doar pentru Netscape). Mărimea totală a tabelului nu se modifică în absența sau prezența parametrului BORDER (excepția este când este specificat BORDER=0). Prin urmare, distanta minimaîntre două celule adiacente în aceste cazuri va fi egală cu dublul grosimii cadrului, adică doi pixeli. Este posibil să plasați celule cât mai aproape una de cealaltă, setând BORDER=0, ceea ce înseamnă că nu există cadre. Este posibil ca unele browsere să nu accepte setarea parametrului BORDER la o valoare numerică, caz în care o valoare de zero va fi ignorată și tabelul va fi desenat cu chenare.

  Aici sunt cateva exemple:

  Toate cele trei exemple prezentate mai sus vor fi afișate diferit de browserul Netscape. Rețineți că acesta este un caz destul de unic în care nu putem vorbi despre 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, deci pentru acel browser valoarea implicită pentru parametrul BORDER este zero.

  Parametrul CELLSPACING

  Forma de scriere 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ă. Valoarea implicită este setată la doi. 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). Când setați CELLSPACING=0, cadrele celulelor adiacente se vor îmbina și vor crea impresia unei singure grile de tabel (Fig. 4.7).

  
  

  Orez. 4.7. Tabel cu CELLSPACING=0 valoare

  parametrul CELLPADDING

  Forma de înregistrare a parametrului este similară cu CELLSPACING. Valoarea num determină cantitatea de spațiu liber (marja) dintre cadrul celulei și datele din interiorul celulei. În mod implicit, valoarea este setată la unu. Setarea CELLPADDING la zero poate face ca o parte din textul celulei să atingă marginea celulei, ceea ce nu este foarte plăcut din punct de vedere estetic.

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

  
  

  Orez. 4.8. Tabel cu valoarea CELLPADDING=10

  Efectul parametrilor CELLPADDING și CELLSPACING este foarte asemănător unul cu celălalt. Pentru un tabel fără margini, modificarea unuia sau a altui parametru duce la același rezultat. Ambii parametri afectează indentările corespunzătoare simultan orizontal și vertical. Din păcate, controlul separat al indentarilor orizontale și verticale în modul în care se face, de exemplu, pentru indentări 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 listați sunt omiși, atunci distanța minimă dintre datele din celulele adiacente va fi de 6 pixeli (pentru Netscape). Această valoare este suma a 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 această versiune celulele vor fi situate aproape una de alta. Un exemplu de caz de utilizare ar fi un tabel ale cărui celule conțin toate imagini de aceeași dimensiune care trebuie plasate una lângă alta.

  Parametrii WIDTH și HEIGHT

  La afișarea tabelelor, lățimea și înălțimea acestora 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 celulelor. , precum și parametrii specificați la vizualizarea documentului într-un anumit browser, de exemplu, tipul și dimensiunile fontului, dimensiunile ferestrelor de vizualizare etc. Când sunt afișate, dimensiunile tabelului sunt calculate automat ținând cont de acești factori și se încearcă prezentați masa în forma cea mai convenabilă - pentru a aranja masa astfel încât să se potrivească în fereastra de vizualizare. Schema generala vizualizarea documentelor mari, de regulă, se reduce la derularea verticală liniară a conținutului documentului ș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 sunt ambele editori de text (de exemplu, Microsoft Word), iar browserele HTML formatează automat textul astfel încât (dacă este posibil) lungimea liniilor să nu depășească lățimea ferestrei de vizualizare. Acest lucru evită necesitatea derulării orizontale în document. Browserele fac acțiuni similare cu tabelele - dacă este posibil, formatați-le astfel încât lățimea tabelului să nu depășească lățimea ferestrei de vizualizare. Putem concluziona că lățimea tabelelor este un parametru mai important, primar, al cărui calcul se efectuează mai întâi în comparație cu înălțimea.

  În majoritatea cazurilor, dimensionarea dinamică a tabelului are ca rezultat o imagine proporțională din punct de vedere estetic, care utilizează eficient zona reală a ferestrei de vizualizare. Cu toate acestea, poate fi necesar să se forțeze lățimea sau înălțimea mesei să fie specificate. În acest scop, sunt utilizați parametrii WIDTH (lățimea tabelului) și HEIGHT (înălțimea tabelului) ai etichetei

  . Forma de notație: WIDTH=num sau WIDTH=num%, unde num este valoarea numerică a lățimii întregului tabel în pixeli sau ca procent din dimensiunea întregii ferestre. Rețineți că este acceptabil să setați valori mai mari de 100%, deși este dificil de imaginat un caz în care acest lucru ar fi necesar. Exemplu:
  .

  Parametri similari pot fi setati pentru celule individuale. Rețineți că setarea unei anumite valori a parametrului, 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 aceste condiții, ar avea implicit o lățime mai mică decât cea specificată. În acest caz, browserul va mări lățimea tabelului la cea necesară prin extinderea proporțională a tuturor coloanelor tabelului. Dacă restrângeți fereastra de vizualizare, lățimea tabelului nu se va modifica și poate fi necesar să derulați orizontal pentru ao vizualiza. Dacă tabelul implicit are o lățime 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 este necesar și, în al doilea rând, împărțind textul în celule individuale î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, caz în care va avea lățimea minimă posibilă. Aceleași acțiuni sunt luate pentru tabelele care nu au dimensiuni specificate atunci când restrângeți fereastra de vizualizare.

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

  parametru ALIGN

  Acest parametru de etichetă

  definește poziția orizontală a mesei în zona de vizualizare. Valorile valide sunt LEFT (alinierea la stânga) și RIGHT (alinierea la dreapta). În mod implicit, tabelele sunt aliniate la stânga. Rețineți că printre valorile valide nu există o valoare tipică pentru parametrul de aliniere - CENTER. Unele literaturi HTML indică CENTER ca fiind acceptabil în acest caz. Acest lucru este în concordanță cu specificația HTML, dar în practică atât Netscape Navigator, cât și Microsoft Internet Explorer implementează doar două valori. Cert este că prezența parametrului ALIGN în etichetă nu numai că determină locația tabelului, dar vă permite și să înfășurați textul în jurul mesei din partea opusă, similar cu înfășurarea imaginilor. Nu există nicio prevedere ca textul să se înfășoare în jurul mesei pe ambele părți. Pentru un control mai precis al ambalării, ar trebui să utilizați eticheta
  cu parametrul CLEAR la fel ca pentru . Dacă ALIGN este omis, spațiul din dreapta și/sau stânga tabelului va fi întotdeauna gol, indiferent de lățimea acestuia. Dacă tabelul nu necesită ca text să fie înfășurat în jurul lui, vă puteți asigura că este poziționat în centrul ferestrei de vizualizare. Pentru a face acest lucru, de exemplu, puteți plasa întreaga descriere a tabelului într-o pereche de etichete Și.

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

  adult

  populaţia din Sankt Petersburg

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

  Eugene Efim Ivan Igor Ilya Iosif Constantin un leu Leonid Mihai Nikolay Oleg Paul Petru Roman Semyon Serghei Stanislav Edward Yuri Yakov

  
  
  
  
  
  
  

  
  Cele 43 de nume care apar cel mai frecvent acoperă 92% din eșantion.
  

  

  Orez. 4.9. Tabel fără margini cu text de ambalare

  Acest document constă dintr-un tabel fără margini cu setarea de aliniere ALIGN=LEFT, care permite textului care urmează tabelului să apară în dreapta acestuia. 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, așa cum ilustrează și acest exemplu. Este posibil ca textul situat în partea dreaptă a tabelului să nu se potrivească acolo, dar va continua după tabel. Încercați să utilizați acest exemplu pentru a reduce lățimea ferestrei browser și, la un moment dat, tot textul va apărea în partea de jos a tabelului. Să vă reamintim 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 pe 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ărui afișare este prezentată în Fig. 4.10.

  Cele mai comune nume masculine

  populaţia adultă din Sankt Petersburg

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

  Eugene Efim Ivan Igor Ilya Iosif Constantin un leu Leonid Mihai Nikolay Oleg Paul Petru Roman Semyon Serghei Stanislav Edward Yuri Yakov

  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. Aceste 43 de nume întâlnite cel mai frecvent 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. Tabel fără margini care conține trei coloane

  Spre deosebire de exemplul anterior, nu există text care se încadrează în jurul mesei. Întregul document constă dintr-un tabel cu un antet 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. Nu este nevoie să forțați terminarea textului aici, așa cum este descris în cazul anterior. Tot textul legat de tabel ar trebui să fie localizat în interiorul celei de-a treia celule, iar textul ulterior ar trebui să fie localizat după sfârșitul descrierii întregului tabel. Ambele exemple arată identic atunci când sunt vizualizate pe ecran complet, cu excepția antetului, care în primul caz este situat în mijlocul unei liste cu două coloane, iar în al doilea, este situat în mijlocul tuturor celor trei coloane ale masa. 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 tratată ca o zonă pentru formatare independentă. Toate regulile care sunt în vigoare pentru a controla afișarea textului pot fi folosite pentru a formata textul dintr-o celulă. În interiorul unei celule, este acceptabil să folosiți aproape toate elementele HTML care pot apărea în corpul unui document , inclusiv etichete care controlează plasarea textului -

  ,
  ,

  ---

  , coduri antet - de la

  inainte de

  , etichete de formatare a caracterelor -<В>, , , , , , , etichete inserarea imaginilor grafice , link-uri hipertext<А>etc. Subliniem imediat că domeniul de aplicare al etichetelor specificate în interiorul unei celule separate 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 - , apoi chiar și în absența unui cod de terminare sau plasându-l pe mai multe celule sau rânduri de tabel, textul celulei următoare va fi reflectat în culoarea implicită.

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

  Opțiunile de aliniere a conținutului celulei sunt ALIGN și VALIGN. Poate fi folosit în coduri , Și . Parametrul de aliniere orizontală ALIGN poate lua valorile LEFT, RIGHT și CENTER (prestabilit este LEFT pentru si CENTRUL pentru ). Parametrul de aliniere verticală VALIGN poate lua următoarele valori: TOP (marginea superioară), BOTTOM (marginea inferioară), MIDDLE (în mijloc), BASELINE (linia de bază). Implicit este MIJLOC. Alinierea liniei de bază asigură că textul de pe o singură linie din toate celulele este ancorat pe o singură linie. Setarea opțiunilor de aliniere la nivel de cod determină alinierea pentru toate celulele unui rând dat, în timp ce fiecare celulă individuală a rândului poate avea propriii parametri definiți care anulează 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 browserului din acest exemplu este prezentată în Fig. 4.11.

  
  

  Orez. 4.11. Alinierea datelor în celulele tabelului

  Opțiunea NOWRAP dezactivează capacitatea de a împărți automat textul celulei în linii. Poate fi folosit în coduri , Și . Utilizarea inutilă a acestui parametru ar trebui evitată, deoarece poate reduce semnificativ capacitatea de a redimensiona dinamic tabelele și poate afecta lizibilitatea acestora. În cele mai multe cazuri, este suficient să utilizați NOWRAP pentru celule individuale care necesită într-adevăr interzicerea împachetarii cuvintelor. Împachetarea cuvintelor se realizează numai prin separatoare între cuvinte (spatii), iar în unele cazuri, pentru a interzice ruperea textului în anumite locuri, în loc de caracterul spațiu, ar trebui să setați codul de spațiu fără rupere (NonBreaking Space). Exemplele includ cazurile în care nu se recomandă un decalaj - între o valoare numerică și unitățile de măsură ale unei valori date; între nume de familie și inițiale. Deci, textul este 650 km sau Eltsin B.N. Este recomandat să o scrieți în 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 înregistrați acești parametri. Valorile pot fi specificate în pixeli sau ca procent din dimensiunea întregului tabel. Microsoft Internet Explorer permite specificarea numai a LĂȚIȚIEI în pixeli. Deoarece un tabel este o structură coerentă constând din rânduri și coloane, setarea lățimii pentru orice celulă afectează lățimea întregii coloane în care se află celula, iar setarea înălțimii afectează întregul rând. Dacă valoarea lățimii unei coloane 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) specificați în coduri

  sunt specificate setările pentru coloanele individuale ale acestui grup. În același timp, în etichetă Dacă este necesar, pot fi specificați parametrii de aliniere, ale căror valori se aplică tuturor coloanelor unui grup 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. Figura 4.17 prezintă rezultatul implementării codului de mai sus, precum și o opțiune de afișare a unui astfel de tabel cu intrarea RULES=GROUPS în etichetă

  sau

  . Forma de notație: COLSPAN=num, unde num este o valoare numerică care determină câte coloane ar trebui extinsă pe orizontală celula curentă. Utilizarea parametrului ROWSPAN este similară, doar aici specificați numărul de rânduri pe care celula curentă ar trebui să le întinde pe verticală. În mod implicit, acești parametri sunt setați la unu. Este permisă 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 numai tabele simple cu generarea ulterioară de coduri HTML. În fig. Figura 4.12 prezintă un exemplu de afișare a tabelului obținut din următorul cod HTML: Celulă care se întinde pe două rânduri 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 cu neatenție a valorilor parametrilor de alunecare a celulei poate duce la suprapunerea lor reciprocă și conflicte, în care rezultatul este imprevizibil. O utilizare tipică a celulelor extinse este un titlu comun pentru mai multe coloane sau rânduri adiacente. 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 specifică culoarea de fundal a întregului tabel, a rândurilor individuale sau a celulelor. Poate apărea în etichete , , nu conține informații 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 a cărui culoare se potrivește cu culoarea de fundal a celulei. În timp ce celulele care conțin date (chiar dacă sunt invizibile) sunt redate la fel de către toate browserele, celulele goale vor fi redate diferit. Browserul Netscape nu afișează o celulă goală, adică locul în care se află această celulă va fi umplut cu culoarea de fundal a paginii și nu cu culoarea de fundal a celulei, spre deosebire de celulele care conțin date. În jurul celulelor goale nu este trasat niciun chenar. Un exemplu de tabel cu o celulă goală este prezentat în Fig. 4.15. Orez. 4.15. Celula goală a tabelului se afișează diferit în diferite browsere Microsoft Internet Explorer afișează ambele celule folosind culoarea de fundal a celulelor. Un browser precum NSCA Mosaic oferă utilizatorului posibilitatea de a determina natura afișării celulelor goale ale tabelului selectând opțiunile corespunzătoare. Cunoașterea unor astfel de caracteristici vă va permite să dezvoltați tabele care vor fi afișate corespunzător, indiferent de browserul ales de utilizator. În unele cazuri, este suficient să creați 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 parametrilor de aliniere pentru rânduri sau coloane individuale. Pentru a alinia conținutul tuturor celulelor rândului curent, trebuie doar să setați parametrii necesari în cod . Cu toate acestea, mai des este necesar să se asigure aceeași aliniere pentru toate elementele aceleiași coloane, deoarece în majoritatea cazurilor coloana conține date omogene. În versiunile inițiale ale HTML, s-a propus să se utilizeze parametrul COLSPEC (SPECIFICARE COLONĂ) pentru aceasta, care a fost specificat în etichetă. Și . Această caracteristică nu este furnizată de specificația HTML, dar este acceptată atât de Netscape, cât și de Microsoft Internet Explorer. Formularul de intrare este același ca pentru etichetă , și anume: BGCOLOR=valoare, unde valoarea este conținutul culorii în format RGB sau numele acesteia. Exemplu: sau . Tabele imbricate Celulele individuale ale tabelului pot conține practic orice etichete de limbă și date permise în secțiune document. În special, un alt tabel poate fi plasat în întregime în interiorul unei celule de tabel. Astfel de tabele se numesc imbricate. Regulile pentru construcția lor nu diferă de construcția tabelelor și nu necesită o descriere separată. Remarcăm doar că nu toate browserele care acceptă tabele afișează corect tabele complexe cu mai multe niveluri de imbricare, așa că utilizarea lor necesită prudență. Să dăm un exemplu de tabel care utilizează un nivel de imbricare. Orașe 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 Zelenogorsk 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 supuse administrare Sankt Petersburg, au oras direct numere de telefon. Orașe de subordonare regională Oraș H P Boksitogorsk 21.6 ALIGN=RIGHT>245 Bolhov 50.3 ALIGN=RIGHT>122 Bsevolozhsk 32.9 24 Vyborg 80.9 130 Vysotsk 1.0 ALIGN=RIGHT>159 Gatchina 80.9 46 Ivangorod 11.9 ALIGN=RIGHT>147 Kamennogorsk 5.9 157 Kingisepp 51.5 ALIGN=RIGHT>138 Kirishi 53.8 ALIGN=RIGHT>115 Kirovsk 23.8 55 Lodeynoye Pole 27.3 ALIGN=RIGHT>244 Lyga 41.8 139 (continuare tabel) Oraș H P Lyuban 4.7 85 Novaia Ladoga 11.2 ALIGN=RIGHT>141 Otradnoye 22. 9 ALIGN=RIGHT>40 Pikalevo 25.1 ALIGN=RIGHT>246 Podporojie 23.1 285 Primorsk 6.7 137 Priozersk 20.5 ALIGN=RIGHT>145 Svetogorsk 15.8 ALIGN=RIGHT>201 Ardezii 42.6 ALIGN=RIGHT>192 Pinery 57.6 81 Tihvin 72.0 ALIGN=RIGHT>200 Tosno 33.8 53 S Lisselburg 12.5 64 Orez. 4.14. Exemplu de tabele imbricate Rezultatul afișajului acestui exemplu este prezentat în Fig. 4.14. La prima vedere, se pare că în exemplu nu există imbricarea de tabele. De fapt, întregul document este un tabel care nu are margini și constă dintr-un antet și doar un rând care conține cinci celule. Organizarea unui astfel de tabel servește exclusiv scopului de organizare a datelor de 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 liniuța 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 liniuțe. O altă opțiune este utilizarea parametrului CELLSPACING, care determină distanța dintre celule, totuși, acest parametru specifică atât umplutura orizontală, cât și verticală, care nu este necesară în acest moment. În plus, o celulă goală cu o lățime dată se va micșora atunci când fereastra de vizualizare este îngustată, în contrast cu spațiul specificat de parametrul CELLSPACING (precum și CELLPADDING). Folosind acest exemplu, încercați să reduceți lățimea zonei de vizualizare în browser sau, ceea ce va duce la aceleași rezultate, să măriți dimensiunea fontului în care este afișat textul. Distanța dintre tabele va fi redusă la zero, făcând posibilă vizualizarea simultană a tuturor informațiilor cât mai mult timp posibil, cu toate acestea, modificările ulterioare nu vor duce la deteriorarea tabelului, ci vor oferi posibilitatea de a derula pe orizontală. Folosind o schemă similară, puteți organiza plasarea informațiilor constând nu numai din tabele, ci și imagini, fragmente de text etc. Caracteristicile construcției mesei Această secțiune discută unele capacități specifice ale browserelor individuale, precum și unele subtilități ale construirii și afișarii tabelelor. Afișați celulele goale în tabele Una dintre caracteristicile prezentării tabelelor în diferite browsere este afișarea celulelor goale. Conform descrierii limbii, toate browserele trebuie să adauge rândurile cu celule goale dacă în orice rând numărul lor este setat la mai puțin decât în ​​alte rânduri. În plus, pot exista celule oriunde în tabel care nu conțin date. Există o diferență î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 de tabel. De exemplu, sarcina 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 - CENTRUL, precum și lățimea fiecărei coloane. 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 rezolvarea acestei probleme și singura opțiune este fie să folosești alinierea implicită, fie să setezi valorile adecvate în fiecare celulă unde este necesar. Microsoft Internet Explorer oferă etichete speciale - Și . Aceste etichete ar trebui să fie localizate imediat după descriere înainte de prima apariție a etichetei . Parametrii etichetei Și poate fi 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 ALIGN sunt LEFT, RIGHT și CENTER. Parametrul SPAN este implicit unul. Etichetă în plus, vă permite să setați parametrul VALIGN, care determină alinierea verticală a datelor în celule. Valorile valide pentru VALIGN sunt MIDDLE, TOP și BOTTOM. Diferența dintre etichete Și este că primul dintre ele, pe lângă setarea parametrilor de aliniere a datelor pentru coloane, realizează și o unire condiționată a mai multor coloane într-un grup. Efectul acestei combinații se vede atunci când se utilizează parametrul RULES, care este descris mai jos. În mod implicit, toate coloanele din tabel sunt considerate un singur grup. Etichetă ar trebui utilizat numai pentru a determina alinierea datelor în coloane individuale dintr-un grup. Să dăm un exemplu. Să presupunem că trebuie să construiți un tabel care să conțină 6 coloane, iar datele din primele trei dintre ele ar trebui să fie aliniate la dreapta, iar următoarele trei - la mijloc. Pentru a rezolva această problemă, ar trebui să scrieți următorul fragment de 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 a datelor î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 ar trebui să fie aliniată la mijloc, iar toate cele trei coloane ar trebui combinate într-un grup. Următoarele trei coloane ar trebui să fie, de asemenea, grupate și să aibă o aliniere similară cu primul grup. Pentru a rezolva această problemă, ar trebui să scrieți următorul fragment de cod HTML: (date pentru tabel) În acest exemplu, după etichetă

  , din care este clar sensul combinării în grupuri.

  Sfat

  Deoarece domeniul de aplicare al etichetelor

  Și limitat la un singur browser, Microsoft Internet Explorer, ar trebui să le utilizați cu precauție. Comoditatea utilizării acestor etichete este evidentă, dar în practică majoritatea tabelelor sunt construite folosind parametrul de aliniere ALIGN corespunzător pentru fiecare celulă de tabel unde este necesar, ceea ce mărește semnificativ dimensiunea codului sursă al tabelului, dar asigură că acesta poate fi vizualizat în orice browser.

  
  

  Orez. 4.17. Tabel cu coloane grupate

  Setarea culorii marginii tabelului

  Mai multe opțiuni, unice pentru Microsoft Internet Explorer, vă permit să selectați culoarea chenarelor tabelului - BORDERCOLOR, BORDERCOLORLIGHT și BORDERCOLORDARK. Acești parametri pot fi specificați în etichete

  , . Valoarea acestor parametri poate fi numele culorii sau valoarea sa hexazecimală. Parametrul BORDERCOLOR specifică culoarea tuturor elementelor de margine a tabelului, iar ceilalți doi parametri specifică culoarea marginilor componentelor individuale, 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 specifică culorile marginilor opuse. Datorită combinației acestor parametri, tabelul va apărea ușor ridicat deasupra suprafeței paginii sau îngropat. Totul depinde de combinația de culori aleasă.

  Notă

  Versiunea 4.x a browserului Netscape acceptă și setarea BORDERCOLOR.

  Setați o imagine de fundal pentru un tabel

  Microsoft Internet Explorer (precum și versiunea Netscape 4.x) vă permite să utilizați parametrul BACKGROUND, care specifică o imagine de fundal pentru un tabel în același mod în care poate fi utilizat pentru un întreg document HTML. Acest parametru poate fi setat în etichete

  ,	Și

  , , w

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

  Etichete

  , Și setați structura descrierii tabelului mai strict, evidențiind celulele antetului tabelului, conținutul principal al tabelului și linia de rezumat. Aceste etichete pot apărea numai în descrierile 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 nu mai mult de o dată în tabel. Eticheta finală pentru acestea poate fi omisă. Utilizarea acestor etichete este convenabilă atunci când creați tabele mari care se extind dincolo de o pagină.

  Etichetă poate apărea de mai multe ori într-o descriere a unui tabel, necesitând utilizarea unei etichete de sfârșit. Această etichetă realizează gruparea logică a datelor în același mod ca și , care realizează o grupare a coloanelor adiacente.

  Folosind etichete noi, puteți controla mai flexibil marginile și liniile de grilă ale tabelului.

  Desenarea cadrelor în jurul mesei este controlată de parametrul etichetei FRAME

  , și linii de grilă de tabel - prin parametrul RULES. De exemplu, devine posibil să se deseneze doar linii verticale între coloane și în loc de un cadru î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 pe toate cele patru laturi
  • DE MAI SUS - doar din partea de sus
  • DE MAI JOS - doar din 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ă
  • R.H.S. - doar pe partea dreaptă
  • NUL - masa fara rame exterioare

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

  • TOATE - toate liniile interne sunt trasate
  • GRUPURI - sunt trasate numai 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ă

  Liniile și cadrele grilei de tabel vor fi desenate numai dacă este prezent parametrul etichetei BORDER

  . 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:

  Exemplu de management flexibil al liniilor
  masa grilă

  Antetul coloanei 1	Titlul coloanei 2	Antetul coloanei 3
  Date	Date	Date
  Date	Date	Date
  Date	Date	Date
  Date	Date	Date
  Date	Date	Date
  Date	Date	Date
  Concluzie	Concluzie	Concluzie

  
  

  Orez. 4.18. Desen flexibil al liniilor grilei de tabel folosind browser-ul Microsoft Internet Explorer

  În acest exemplu, a cărui afișare de către browser este prezentată în Fig. Figura 4.18 prezintă una dintre opțiunile posibile pentru controlul liniilor și marginilor grilei din jurul mesei. Un cadru gros de 5 pixeli (BORDER=S) este desenat în jurul mesei numai pe părțile de sus și de jos (FRAME=HSIDES). Liniile de grilă sunt desenate în interiorul tabelului pentru a separa grupuri de date (RULES=GROUPS). Grupurile de date sunt definite, în primul rând, prin prezența a trei etichete , fiecare dintre ele declară o singură coloană de tabel grup. În al doilea rând, etichetele , Și<тгоот>De asemenea, ele împart datele din tabel în grupuri, ceea ce determină trasarea liniilor orizontale interne.

  Setarea numărului de coloane din tabel

  Browserul Microsoft Internet Explorer (precum și versiunea browser 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 procedura de aranjare a tabelului atunci când este afișat într-un browser, deoarece devine posibil să determinați numărul de coloane înainte de a încărca codul de descriere a tabelului. În prezent, activarea acestei opțiuni nu afectează în niciun fel progresul încărcării documentului.

  Alinierea pe verticală a meselor

  Ultimul parametru de etichetă

  , unic pentru Microsoft Internet Explorer, este VALIGN, care determină alinierea verticală a tabelului în raport cu textul. Efectul său este similar cu același parametru pentru imagini.

  Notă

  Rețineți că utilizarea aceluiași parametru poate varia semnificativ atât ca scop, cât și în valori posibile pentru diferite etichete, chiar și pentru același browser și în cadrul specificațiilor de limbă. Prin urmare, este imposibil de compilat masă rotativă privind utilizarea diverșilor parametri în afara contextului aplicării acestora. De exemplu, parametrul ALIGN numai în tabele este utilizat în trei moduri diferite:

  • pentru etichetă

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

  pentru etichetă

  ,

  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 mese a devenit o caracteristică răspândită a browserelor Web, așa că există puține motive pentru a evita utilizarea acestuia. Cu toate acestea, vom lua în considerare opțiuni posibile pentru prezentarea alternativă a datelor care pot fi utilizate în locul tabelelor sau în plus față de acestea. Alte metode care nu folosesc conceptul de tabele: Utilizați text preformatat. Această metodă a fost folosită în mod tradițional în versiuni anterioare Limbajul HTML când suportul pentru tabele nu exista încă. 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 de oricine editor de text sau chiar afișate de un browser Web și apoi salvate ca imagine într-unul dintre formate grafice. Aceasta nu este cea mai bună opțiune, deoarece își pierde toată flexibilitatea de a configura dinamic afișarea tabelelor. În plus, este nevoie de depozitare fișier suplimentar cu o imagine, a cărei dimensiune, de regulă, va fi semnificativ 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 foarte posibil să te descurci cu unul dintre tipurile de liste disponibile în limbajul HTML. Pregătirea meselor Orice editor poate fi folosit pentru a pregăti tabele HTML, majoritatea având 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, selectați pur și simplu elementul Tabele din meniul Inserare, după care caseta de dialog prezentată în Fig. 4.19. Crearea unui tabel constă în completarea câmpurilor corespunzătoare din fereastră. După ce ați determinat numărul de rânduri și coloane din tabel, puteți continua la completarea directă a celulelor individuale ale tabelului, care vor fi afișate în aceeași casetă de dialog. Fereastra de dialog are un buton Previzualizare, făcând clic care vă permite să vizualizați tabelul rezultat utilizând 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ă ce ați finalizat pregătirea datelor pentru tabel, faceți clic pe 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ă) 3 anteturi de tabel Coloana 1 Coloana 2 Coloana 3 Coloana 4 1 2 3 4 Această sarcină este rezolvată într-un mod similar când se utilizează componenta Netscape Composer a programului Netscape Communicator. În fig. Figura 4.21 prezintă o casetă de dialog în care trebuie să completați câmpurile necesare. A intra parametri suplimentari etichetă Există un buton HTML suplimentar. După completarea câmpurilor din caseta de dialog, faceți clic pe butonul Aplicați și apoi vi se va oferi posibilitatea de a completa celulele din tabel (Fig. 4.22). Orez. 4.21. Caseta de dialog pentru setarea opțiunilor tabelului Netscape Composer Orez. 4.22. Poziția inițială a cursorului de intrare într-un tabel gol Programe Siguranță Știri Interesant Sfat Știri Recenzii Alăturaţi-ne! Peste 6.000 de persoane s-au abonat deja. Obțineți cele mai recente articole. ABONATI-VA