2. Proprietatea Background \u003d "URL" - stabilește desenul de fundal. În locul adresei URL, trebuie să fie scrisă adresa imaginii de fundal.

Exemplu

Tabelul de probă

Coloana 1.

Coloana 2.

Convertite la pagina următoare:

În exemplul examinat, imaginea noastră de fundal este localizată în folderul IMG (care se află în același director ca și pagina HTML), iar imaginea se numește fon.gif. Vă rugăm să rețineți că în eticheta am adăugat stil \u003d "Culoare: alb;" . Deoarece fundalul este aproape negru, astfel încât textul nu fuzionează cu fundalul, am făcut text alb.

3. Proprietate Bgcolor \u003d "Culoare" - Setează fundalul culorilor tabelului. Ca o culoare, puteți alege oricare dintre toate paletele (vezi codurile și titlurile HTML Culori)

4. Border \u003d "Număr" proprietate - stabilește grosimea cadrului de masă. În exemplele anterioare, am arătat frontierei \u003d "1", ceea ce înseamnă grosimea cadrului - 1 pixel.

5. BorderColor \u003d Proprietatea "Culoare" - Setează culoarea cadrului. Dacă frontiera \u003d "0", cadrul nu va și culoarea cadrului nu va avea sens.

6. Proprietatea CellPadding \u003d "Număr" - Indentare din cadru la conținutul celulei în pixeli.

7. Proprietatea CellSpacking \u003d "Număr" - Distanța dintre celule în pixeli.

8. Proprietatea Cols \u003d "Număr" este numărul de coloane. Dacă nu o specificați, browserul în sine va determina numărul de coloane. Singura diferență este că specificația acestui parametru este probabil să accelereze descărcarea tabelului.

9. Proprietatea Frame \u003d "Parametru" - Cum să afișați frontierele în jurul mesei. Pot lua următoarele valori:

• void - nu atrage frontierele
• border - frontieră în jurul mesei
• deasupra frontierei pe marginea superioară a mesei
• de mai jos - frontieră din partea de jos a tabelului
• hsides - Adăugați numai granițe orizontale (partea superioară și inferioară a tabelului)
• vSides - Desenați numai frontiere verticale (stânga și dreapta de la masă)
• rHS - Frontieră numai în partea dreaptă a mesei
• lHS - Frontieră numai pe partea stângă a mesei

10. Înălțime \u003d "Număr" proprietate - Setează înălțimea tabelului: fie în pixeli, fie în procente.

11. Proprietatea este reguli \u003d "parametru" - unde să se afișeze limitele dintre celule. Pot lua următoarele valori:

• toate liniile atrage în jurul fiecărei mese celulare
• grupuri - linia este afișată între grupuri care sunt formate din etichete.

Atribute și proprietăți

1. Proprietatea align \u003d "Parametrul" - stabilește alinierea unei celule de masă separate. Pot lua următoarele valori:

• nivelul stâng la marginea din stânga
• centrul - alinierea centrului
• dreapta - alinierea pe marginea dreaptă

2. Proprietatea de fundal \u003d "URL" - stabilește imaginea de fundal a celulelor. În locul adresei URL, trebuie să fie scrisă adresa imaginii de fundal.

3. Bgcolor \u003d Proprietatea "Culoare" - Setează culoarea fundalului celulei.

4. BorderColor \u003d "Culoare" Proprietate - Setează culoarea cadrului celular.

5. Char \u003d "Letter" Proprietate - stabilește scrisoarea de la care trebuie să faceți alinierea. Valoarea atributului align trebuie instalată ca char.

6. Proprietatea Colspan \u003d "Număr" - stabilește numărul de celule orizontale combinate.

7. Înălțime \u003d "Număr" Proprietate - Setează înălțimea tabelului: fie în pixeli, fie procentaj%.

8. Lățime \u003d "Număr" Proprietate - Setează lățimea tabelului: fie în pixeli, fie procentaj%.

9. Rowspan \u003d "Număr" proprietate - stabilește numărul de celule verticale unite.

10. Proprietate Valign \u003d "Parametru" - Aliniați conținutul celulei pe verticală.

• sus - Aliniați conținutul celulei de pe marginea superioară a liniei
• alinierea mediului în mijloc
• partea inferioară - alinierea la marginea inferioară
• linia de bază - alinierea inițială

Pentru etichetă

Cum se face limitele celulelor din tabel nu lipite

În cazul utilizării frontierei (granița celulelor) și a liniilor zero între celule, ele sunt încă lipici și se dovedește o frontieră dublă. Pentru a evita acest lucru, trebuie să vă înregistrați în colapsul frontal al stilurilor: colaps:

...

Dragă cititor, acum ați învățat mult mai multe despre eticheta de masă HTML. Acum vă sfătuiesc să mergeți la următoarea lecție.

Tabelul este un set de date distribuite prin linii și celule. În majoritatea celulelor, sunt plasate date tabulare, restul conține anteturi pentru corzi și coloane care descriu conținutul.

Eticheta este utilizată pentru a crea o masă în documentul HTML

Este un container în care este întregul conținut al mesei.

Crearea unui tabel începe întotdeauna cu rânduri care sunt determinate utilizând eticheta

Fiecare linie, la rândul său, constă din celule. Etichetă Poate conține numai etichete pentru a crea celule.

În HTML există două etichete diferite pentru a crea celule, primul dintre ele este

. Această pereche înseamnă că am creat o linie în masă și câte astfel de etichete vor fi scrise, atât de multe rânduri și va fi.

Ei bine, înăuntru

Acum punem un alt cuplu - . Această pereche înseamnă că am creat o coloană în această linie, iar dacă în fiecare tr, ei vor înregistra câteva TD, apoi în această linie vor exista mai multe coloane. Clar? Dacă nu, să ne uităm la exemplul, deoarece totul este aranjat aici ... Să presupunem că vreau să creez un tabel de studenți și marcaje. Apoi scriem următoarele în interiorul etichetei :

Vă permite să creați anteturi de masă. În mod implicit, titlurile sunt centrate și plasate fie (<САРТION АLIGN=top>), fie sub masă (<САРТION ALIGN=bottom>). Titlul poate consta din orice text și imagini. Textul va fi împărțit în șiruri corespunzătoare lățimii mesei. Uneori etichetă<САРТION> Folosit pentru semnătură sub desen. Pentru a face acest lucru, este suficient să descrieți masa fără frontiere.

Titlu peste masă

Text sau date.

Text sau date.

Text sau date.

Text sau date.

Titlu sub masă

Text sau date.

Text sau date.

Text sau date.

Atribut norap.

De obicei, orice text care nu se potrivește într-o singură linie din tabelul mesei merge la următorul șir. Cu toate acestea, atunci când utilizați atributul NowRAP cu etichete<ТН> sau<ТD> Lungimea celulei se extinde atât de mult încât textul introdus într-o singură linie.

Atribut solspan.

Etichete<ТD> și<ТН> Modificat utilizând atributul Colspan (interval de coloană, compus coloană). Dacă doriți să faceți o celulă mai largă decât cea superioară sau inferioară, puteți utiliza atributul solspan pentru ao întinde asupra oricărui număr de celule obișnuite.

Dacă doriți să faceți o celulă mai largă decât cea de sus sau de jos,	puteți utiliza atributul Colspan \u003d 2,
să o întindeți asupra oricărui număr de celule obișnuite.

Atributul Rowspan.

Atributul Rowspan folosit în etichete<ТD> și<ТН>, similar cu atributul Slspan \u003d, numai acesta stabilește numărul de linii la care celula este întinsă. Dacă ați specificat în numărul atributului Rowspan \u003d s, mai multe unități, atunci numărul corespunzător de rânduri ar trebui să fie sub o celulă întinsă. În partea de jos a tabelului este imposibil de plasat.

Atribut widn.

Atributul WIDN este aplicat în două cazuri. Puteți să-l puneți în etichetă<ТАВLЕ>pentru a da lățimea întregii mese și poate fi folosit în etichete<ТD> sau<ТН>Pentru a seta lățimea celulelor sau grupul de celule. Lățimea poate fi indicată în pixeli sau procente. De exemplu, dacă ați specificat în etichetă<ТАВLЕ> Lățime \u003d 250, veți primi o masă cu o lățime de 250 de pixeli, indiferent de dimensiunea paginii de pe monitor. Când specificați widn \u003d 50% în etichetă<ТАВLЕ> Tabelul va ocupa jumătate din lățimea paginii la orice dimensiune a imaginii de pe ecran. Așadar, indicând lățimea mesei ca procent, rețineți că, dacă utilizatorul are o zonă îngustă, pagina dvs. poate să arate oarecum ciudată. Dacă utilizați pixeli, tabelul se dovedește a fi mai larg decât zona de vizualizare, bara de derulare va apărea în partea de jos pentru a vă deplasa spre dreapta și spre stânga pe pagină. În funcție de sarcini și una și de alt mod de a seta lățimea tabelului poate fi utilă.

Text sau date - lățime de 100%

sau

Text sau date - lățime de 50%

sau

Text sau date - lățime 200 pixeli

sau

Text sau date - lățime 100 pixeli

Aplicarea celulelor goale

Dacă celula nu conține date, nu va avea granițe. Dacă este necesar ca celulele să aibă frontiere, dar nu a existat niciun conținut, este necesar să punem ceva care nu va fi vizibil la vizualizare. Puteți utiliza un șir gol<ВR>. Puteți chiar să specificați coloanele goale prin definirea lățimii acestora în pixeli sau unități relative și fără a introduce date în celulele selectate. Acest instrument poate fi util atunci când este plasat pe pagina de text și grafică.

Atribut de cellRaldding.

Acest atribut determină lățimea spațiului gol între conținutul celulei și limitele sale, adică câmpurile din interiorul celulei.

Text sau date.	Text sau date.	Text sau date.
Text sau date.	Text sau date.	Text sau date.

Text sau date.	Text sau date.	Text sau date.
Text sau date.	Text sau date.	Text sau date.

Atributele aliniază și valixa

Etichete<ТR>, <ТD> și<ТН> Puteți modifica utilizând atributele Aliniere și valixare. Atributul align definește alinierea textului și a graficelor orizontal, adică pe marginea stângă sau dreaptă sau în centru. Alinierea orizontală poate fi specificată în mai multe moduri:

Align \u003d Blydleft. Faceți clic pe conținutul celulei aproape de marginea din stânga.

Align \u003d stânga. ALiniază conținutul celulei de-a lungul marginii stângi, ținând cont de incitarea specificată de atributul celular.

Align \u003d chinner. Există un conținut de celule în centru.

Align \u003d dreapta. ALiniază conținutul celulei de pe marginea din dreapta, ținând cont de depozitul specificat de atributul celular.

Text sau date.	Text sau date.	Text sau date.
Text sau date.	Text sau date.	Text sau date.
Text sau date.	Text sau date.	Text sau date.
Text sau date.	Text sau date.	Text sau date.
Text sau date.	Text sau date.	Text sau date.

Atributul Valign efectuează alinierea textului și grafică în interiorul celulei verticale. Alinierea verticală poate fi specificată în mai multe moduri:

Valigna \u003d partea de sus. Aliniază conținutul celulei la granița superioară.

Valign \u003d mijloc de mijloc Centrați conținutul celulei pe verticală.

Valign \u003d Bottom Aliniază conținutul celulei la limita inferioară.

Atributul Valign efectuează alinierea textului și grafică în interiorul celulei verticale.	top,	mijloc	fund.
Valign \u003d linii de sus Conținutul celulei la marginea superioară.	top,	top,	top.
Valign \u003d Centrul de mijloc centrează conținutul celulei pe verticală.	mijloc	mijloc	mijloc.
Valign \u003d Linii de jos Conținutul celulei la limita inferioară.	fund,	fund,	fund.

Atributul de graniță

În Teg.<ТАВLЕ> Deseori, determină cum vor arăta cadrele, adică liniile care înconjoară mesele tabelului și tabelul în sine. Dacă nu specificați cadrul, veți primi o masă fără linii, dar spațiul de sub ei va fi atribuit. Același rezultat poate fi realizat prin întrebarea<ТАВLЕ ВОRDER=0>. Uneori doriți să faceți frontiera cu atenție, astfel încât să se remarce mai bine. Este posibil să se atragă granițe extrem de grăsime pentru a atrage atenția asupra desenului sau textului. La crearea tabelelor încorporate, este necesar să se facă pentru diferite tabele ale limitelor diferitelor grosimi, astfel încât acestea să fie mai ușor de distins.

Atribute Cellspacing.

Atributul CellSpacking determină lățimea decalajelor dintre celule în pixeli. Dacă acest atribut nu este specificat, valoarea implicită este setată la două pixeli. Folosind atributul CellSpacking \u003d puteți plasa text și programare unde aveți nevoie. Dacă doriți să lăsați un loc gol, puteți introduce un spațiu la celulă.

Text sau date.	Text sau date.	Text sau date.
Text sau date.	Text sau date.	Text sau date.

Text sau date.	Text sau date.	Text sau date.
Text sau date.	Text sau date.	Text sau date.

Text sau date.	Text sau date.	Text sau date.
Text sau date.		Text sau date.

Atribut bgcolor.

Acest atribut vă permite să setați culoarea de fundal. În funcție de care se utilizează eticheta (tabelul, TR, TD), culoarea de fundal poate fi setată pentru întreaga masă, pentru un șir sau pentru o celulă separată. Valoarea acestui atribut este codul RGB sau numele de culoare standard.

Text sau date.	Text sau date.	Text sau date.
Text sau date.	Text sau date.	Text sau date.

Atribute fundal.

Acest atribut stabilește imaginea de fundal pentru tabele. Aplicați la etichetele Tabelului și TD. Valoarea sa este o adresă URL de fișier cu o imagine de fundal. Utilizarea acestui atribut este discutată mai jos.

Folosind tabele în proiectarea paginii

Tabelele sunt bune în faptul că, dacă doriți, puteți face granițele lor invizibile. Acest lucru permite eticheta<ТАВLЕ> Postați frumos pe pagina de text și grafică. În timp ce eticheta.<ТАВLЕ> Rămâne singurul instrument puternic pentru formatarea în HTML. Designerii de pagini web au acum aproape aceeași libertate de a utiliza "spațiul gol" ca creatori de pagini tipărite. Tabelele care ajută cel mai bine să se îndepărteze de la plasarea ierarhică a textului pe paginile web.

Dacă browserul acceptă tabele, de obicei, afișează corect cele mai interesante efecte obținute de la ele.

Universitatea Pedagogică de Stat Ural Bine ati venit! Curs de instruire "Bazele de mastering web"

Crearea de mese multi-colorate

Unele browsere fac posibilă afișarea culorilor. Există mai multe modalități de a picta masa, în cea mai mare parte depind de browserul utilizat.

Frontierele de culoare în Netscape Navigator. Nu veți înconjura doar masa cu un cadru frumos, dar și pentru a cere culoarea ei, diferită de culorile și fundalul textului. Creați un GIF simplu gri (sau orice GIF pe care doriți să îl aveți ca fundal) și să îl definiți în etichetă<ВODY> Ca și fundalul paginilor. Apoi setați culoarea de fundal a culorilor. Ca rezultat, eticheta ta<ВОDY> Va arăta așa:

Ați creat un fundal dublu - GIF și o culoare specificată. Ca rezultat, culoarea de fundal va fi vizibilă la toate granițele tabelelor și liniilor orizontale (<НR>). Indiferent dacă GIF-ul dvs. de fundal este gri sau nu, liniile colorate și limitele tabelelor vor ieși evident. Dacă giful de fundal nu este prea dificil, timpul de încărcare a paginii va crește doar un pic.

Bun tot timpul zilei, dragi prieteni. Cum merge vara? Sper că toată lumea este bine. Ei bine, astăzi vom continua să studiem fundamentele HTML și astăzi va fi probabil ultima lecție pe această temă, pentru că atunci vom plânge în CSS. Deci, vorbind despre HTML, nu pot spune despre masă, deoarece sunt, de asemenea, un subiect destul de semnificativ.

Luați cel puțin aceeași cuvânt. În mod implicit, tabelul nu poate fi creat în acest motor. Am nevoie fie un plus special (plugin), fie un cod special de program (script). Dar puteți face doar ceea ce vrem cu ajutorul etichetelor simple. În general, astăzi vă voi spune cum să creați o masă în HTML, deoarece într-adevăr vă poate ajuta foarte mult.

Îmi amintesc cum primele mele site-uri pe care le avertizează cu un aspect de masă, adică. Cap, barele laterale, blocul și blocul de conținut au fost doar elementele tabelului. Am menționat acest lucru în articolul meu despre. Adevărat astăzi, site-urile nu sunt luate deloc cu ajutorul tabelelor, dar acest lucru nu înseamnă că nu sunt necesare. Mai degrabă, dimpotrivă.

Ce este bun, deci asta nu vei avea nici măcar să desenezi nimic. Totul se face în notebook-ul obișnuit (bine sau altul, cum ar fi Notepad ++) și destul de ușor. În general, hai să mergem să lucrăm.

Etichete

Aici, marcajul are loc oarecum mai complicat decât în \u200b\u200balte etichete, dar este rapid amintit. Așa că arătăm și nu ne distragem.

Orice tabel se află întotdeauna într-o etichetă de perechi

. Acestea. Aceste semne oferă echipei că tabelul va fi localizat aici.

În interiorul mesei puneți o etichetă de perechi

, Creează celule obișnuite cu date. Implicit, conținutul etichetei	Frunze spre marginea din stânga. A doua etichetă pentru crearea celulelor este o etichetă	Acesta vă permite să determinați celulele care conțin anteturi pentru coloane sau șiruri de caractere, conținutul acestor celule sunt afișate în text îndrăzneț și este aliniat în centru. Etichete	și	Acestea includ orice elemente HTML care sunt disponibile pentru utilizare în corpul documentului. Primul titlu Al doilea antet rândul 1, celula 1 rândul 1, celula 2 rândul 2, celula 1 rândul 2, celula 2 Încerca Tabel în interiorul mesei HTML are capacitatea de a crea tabele imbricate, adică astfel de mese situate în alte mese. Pentru a face tabelul imbricat, aveți nevoie de un cod de masă pe care doriți să îl încorporați, puneți în interiorul oricărei etichete	. De exemplu, vom lua masa care anterior mai devreme și vom pune acest cod în a doua linie a doua cea de-a doua linie: Primul titlu Al doilea antet rândul 1, celula 1 rândul 1, celula 2 rândul 2, celula 1 rândul 2, celula 2 Primul titlu Al doilea antet rândul 1, celula 1 rândul 1, celula 2 rândul 2, celula 1 rândul 2, celula 2 În această prelegere, principiile de aplicare a tabelelor în marcajul HTML sunt luate în considerare în detaliu. Aceasta este o organizație de tabel a textului și o rețea de coordonate de masă și organizată în tabelul grafic. Tabele Descrieri în HTML După cum se dezvoltă WWW, acesta a devenit clar că fondurile care sunt așezate în NTML nu sunt suficiente pentru a afișa calitativ diferite tipuri de documente. Dezavantajul NTML a fost absența instrumentelor de afișare a tabelului. În acest scop, textul preformat a fost utilizat în mod obișnuit (etichetă ), în care tabelul a fost descris de caracterele ASII. Dar această formă de prezentare a tabelelor nu a fost suficientă de înaltă calitate și a ieșit din stilul general al documentului. După introducerea meselor în HTML, meșteșugurile web nu au apărut doar un instrument de plasare a datelor text și numerice, ci un instrument de design puternic pentru a găzdui în locul dorit de imagini grafice și text. Crearea de tabele în HTML Eticheta este utilizată pentru a descrie tabelele<ТАВLЕ>. Etichetă<ТАВLЕ>, ca mulți alții, traduce automat șirul înainte și după masă. Crearea unui rând de masă - Etichetă<ТR> Etichetă<ТR> (Rândul de masă, șirul de masă) creează un șir de masă. Toate textele, alte etichete și atribute care trebuie plasate într-o singură linie trebuie plasate între etichetele lt; tr\u003e. Definiția celulelor de table - Etichetă<ТD> În interiorul liniei tabelului, a plasat, de obicei, celule cu date. Fiecare celulă care conține text sau imagine trebuie să fie înconjurată de etichete<ТD>. Numărul de Tagov.<ТD> Linia determină numărul de celule Masa Dacă tabelul este două etichete TR, atunci există două linii în el. Dacă linia este trei etichete TD, că în NE. trei coloane. Tabelul coloanei de masă - Etichetă<ТН> Anteturile pentru coloane și rânduri ale mesei sunt setate utilizând eticheta de titlu<ТН> (Toble NaAdeer, titlu de masă). Aceste etichete sunt ca<ТD>. Diferența este că textul anexat între etichete<ТН>Înregistrat automat de Bold și locația implicită este situată în mijloc. Centrarea poate fi anulată și aliniată text pe marginea stângă sau dreaptă. Dacă utilizați<ТD> cu etichetă<В> și atributul<АLIGN=center>Textul va arăta, de asemenea, ca un antet. Cu toate acestea, ar trebui să se țină cont de faptul că nu toate browserele sunt menținute în tabelele Format Font, deci este mai bine să setați titlurile de tabel folosind<ТН>. Antetul este centrat în mod implicit Titlul poate combina coloanele Titlul poate fi amplasat în fața coloanelor. Text sau date. Text sau date. Titlul poate combina linii Text sau date. Text sau date. Text sau date. Text sau date. Text sau date. Text sau date. Utilizarea anteturilor de masă - Etichetă<САРТIОN> Etichetă

	Matematică	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 linii (TR), fiecare dintre care conține patru mese (TD). În primul bloc TR, am scris numele disciplinelor de antrenament, lăsând în același timp prima coloană necompletată pentru a nu întrerupe masa.

Lângă fiecare primă pereche tD. Introducem numele studenților și toate celelalte tD. Completați estimările din celula corespunzătoare. În general, scrieți-l și salvați fișierul, apoi deschideți-l în browser, apoi vă înțelegeți totul așa cum se întâmplă.

Dar mergem la document, vedem că tabelul nu este destul de asemănător cu ceea ce am planificat. Și ce lipsește aici? Corect - frontierele. Dar nu vă faceți griji. Îți voi spune despre asta chiar mai jos.

Dar, pentru decență, vă voi arăta o altă etichetă care evidențiază și centrează datele din tabele. Această etichetă este scrisă ca