... |
| ... |
...
2. Proprietate background="URL" - seturi imagine de fundal. În loc de URL, trebuie scrisă adresa imaginii de fundal.
Exemplu
Exemplu de tabel |
Coloana 1 |
Coloana 2 |
Se convertește în următoarele pe pagină:
În exemplul de mai sus, imaginea noastră de fundal se află în folderul img (care se află în același director cu pagina html), iar imaginea se numește fon.gif. Vă rugăm să rețineți că în etichetă am adăugat style="color:white;" . Deoarece fundalul este aproape negru, pentru a preveni amestecarea textului cu fundal, am făcut textul alb.
3. Proprietatea bgcolor="color" - setează culoarea de fundal a tabelului. Puteți alege orice culoare din întreaga paletă (vezi codurile și denumirile culorilor html)
4. Property border="number" - setează grosimea chenarului tabelului. În exemplele anterioare, am specificat border="1" , ceea ce înseamnă că grosimea marginii este de 1 pixel.
5. Proprietate bordercolor="color" - setează culoarea chenarului. Dacă border="0" atunci nu va fi nicio chenar și culoarea chenarului nu va avea nicio semnificație.
6. Proprietate cellpadding="number" - indentare de la cadru la conținutul celulei în pixeli.
7. Proprietate cellspacing="number" - distanța dintre celule în pixeli.
8. Proprietatea cols="number" - numărul de coloane. Dacă nu îl setați, browserul însuși va determina numărul de coloane. Singura diferență este că specificarea acestui parametru va grăbi cel mai probabil încărcarea tabelului.
9. Proprietate frame="parameter" - cum să afișați chenarele în jurul tabelului. Poate lua următoarele valori:
- gol - nu desenați granițe
- chenar - chenar în jurul mesei
- deasupra - chenar de-a lungul marginii de sus a mesei
- dedesubt - chenar în partea de jos a tabelului
- hsides - adăugați doar margini orizontale (sus și jos a tabelului)
- vssides - desenați doar chenaruri verticale (în stânga și în dreapta tabelului)
- rhs - chenar numai pe partea dreapta Mese
- lhs - chenar numai pe partea stângă a mesei
10. Proprietate height="number" - setează înălțimea tabelului: fie în pixeli, fie în procente.
11. Reguli de proprietate="parametru" - unde se afișează chenarele dintre celule. Poate lua următoarele valori:
- toate - se trasează o linie în jurul fiecărei celule de tabel
- grupuri - este afișată o linie între grupurile formate din etichete , , ,
sau
- cols - linia este afișată între coloane
- niciunul - toate granițele sunt ascunse
- rânduri - este trasată o chenar între rândurile de tabel create prin etichetă
12. Property width="number" - setează lățimea tabelului: fie în pixeli, fie în procente.
13. Proprietate class="class_name" - puteți specifica numele clasei căreia îi aparține tabelul.
14. Property style="styles" - stilurile pot fi setate individual pentru fiecare tabel.
Acum este timpul să vă scufundați în interiorul tabelului și să priviți atributele celulelor din tabel. Aceste atribute ar trebui să fie scrise în eticheta de deschidere
.
Atribute și proprietăți Și
1. Proprietatea align="parameter" - setează alinierea unei celule individuale de tabel. Poate lua următoarele valori:
- alinierea stânga - stânga
- aliniament centru - centru
- alinierea dreapta - dreapta
2. Proprietate background="URL" - setează imaginea de fundal a celulei. În loc de URL, trebuie scrisă adresa imaginii de fundal.
3. Proprietatea bgcolor="color" - setează culoarea de fundal a celulei.
4. Proprietate bordercolor="color" - setează culoarea marginii celulei.
5. Proprietatea char="letter" - specifică litera din care trebuie făcută alinierea. Valoarea atributului align trebuie setată la char.
6. Proprietatea colspan="număr" - setează numărul de celule orizontale care trebuie îmbinate.
7. Proprietate height="number" - setează înălțimea tabelului: fie în pixeli, fie ca procent.
8. Property width="number" - setează lățimea tabelului: fie în pixeli, fie ca procent.
9. Proprietate rowspan="number" - setează numărul de celule verticale care trebuie îmbinate.
10. Proprietatea valign="parameter" - alinierea verticală a conținutului celulei.
- sus - aliniați conținutul celulei la marginea de sus a rândului
- aliniament mijloc - mijloc
- jos - alinierea la marginea de jos
- linia de bază - alinierea la linia de bază
Nota 1 Pentru etichetă | Sunt disponibile aceleași opțiuni ca și pentru . Parametri pentru o etichetă | va fi aplicat ierarhic tuturor înăuntrul lui
Cum să preveniți lipirea marginilor celulelor dintr-un tabel
Dacă utilizați o chenar (chenar de celulă) și zero padding între celule, acestea sunt încă lipite împreună și obțineți un chenar dublu. Pentru a evita acest lucru, trebuie să specificați border-collapse: collapse în stilurile de tabel:
...
Dragă cititor, acum ați aflat mult mai multe despre etichetă html masa. Acum vă sfătuiesc să treceți la următoarea lecție.
Datorită versatilității meselor, un numar mare parametrii care le controlează aspectul, tabelele au devenit de mult un standard cert pentru aspectul paginilor web. Masa cu frontieră invizibilă reprezintă parcă grilă modulară, în blocurile cărora este convenabil să plasați elemente de pagină web. Cu toate acestea, acest lucru nu este în totalitate abordarea corectă, pentru că toată lumea obiect HTML definit în scopuri proprii și dacă nu este utilizat în scopul propus și peste tot, aceasta înseamnă că nu există alternative. Așa a fost pentru o lungă perioadă de timp până când straturile au înlocuit tabelele în aspectul site-ului web. Acest lucru nu înseamnă că acum straturile sunt folosite tot timpul, dar tendința a apărut deja în mod clar - tabelele sunt folosite pentru a plasa date tabulare, iar straturile sunt folosite pentru aspect și design.
Crearea unui tabel
Un tabel este format din rânduri și coloane de celule care pot conține text și imagini. Tabelele sunt de obicei folosite pentru a organiza și prezenta date, dar tabelele nu se limitează la asta. Folosind tabele, este convenabil să dispuneți machetele de pagină prin aranjare în mod corect fragmente de text și imagini.
Pentru a adăuga un tabel la o pagină web, utilizați eticheta . Acest element servește ca un container pentru elementele care definesc conținutul tabelului. Orice tabel este format din rânduri și celule, care sunt specificate, respectiv, folosind etichete Și . Tabelul trebuie să conțină cel puțin o celulă (exemplul 12.1). Permis în loc de etichetă | utilizați eticheta | . Text într-o celulă stilată cu o etichetă | , este afișat de browser cu caractere aldine și aliniat la centrul celulei. În caz contrar, diferențele dintre celule create prin etichete | Și | Nu.
Exemplul 12.1. Crearea unui tabel
Eticheta TABLE
Celula 1 |
Celula 2 |
Celula 3 |
Celula 4 |
Ordinea celulelor și aspectul lor este prezentată în Fig. 12.1.
Această prelegere discută în detaliu principiile utilizării tabelelor în marcajul HTML. Aceasta include o organizare tabelară a textului, o grilă de coordonate tabelară și grafice organizate în tabele.
Instrumente pentru descrierea tabelelor în HTML
La fel de Dezvoltare WWW a devenit clar că fondurile incluse în HTML nu sunt suficiente pentru afișarea de înaltă calitate tipuri variate documente. Dezavantajul HTML a fost lipsa instrumentelor pentru afișarea tabelelor. În acest scop, textul preformatat (tag ), în care tabelul a fost conturat cu caractere ASCII. Dar această formă de prezentare pe masă nu a fost suficientă Calitate superioarăși s-a remarcat din stilul general al documentului. După introducerea tabelelor în HTML, webmasterii aveau acum nu doar un instrument pentru plasarea de text și date numerice, ci și un instrument puternic de proiectare pentru plasarea în in locul potrivit ecran de imagini grafice și text.
Crearea tabelelor în HTML
Eticheta este folosită pentru a descrie tabelele<ТАВLЕ>. Etichetă<ТАВLЕ>, ca multe altele, traduce automat linia de dinainte și de după tabel.
Crearea unui rând de tabel - etichetă<ТR>
Etichetă<ТR>(Table Row) creează un rând de tabel. Toate textul, alte etichete și atribute care trebuie plasate pe o singură linie trebuie plasate între etichetele lt;TR>ТR>.
Definirea celulelor tabelului - tag<ТD>
Celulele cu date sunt de obicei plasate într-un rând de tabel. Fiecare celulă care conține text sau imagine trebuie să fie înconjurată de etichete<ТD>ТD>. Numărul de etichete<ТD>ТD>într-un rând definește numărul de celule
Masa
Dacă un tabel are două etichete TR, atunci are două rânduri. |
Dacă există trei etichete TD într-o linie, |
apoi în ea |
trei coloane. |
Titluri de coloană din tabel - etichetă<ТН>
Titlurile pentru coloanele și rândurile tabelului sunt setate folosind eticheta antet<ТН>ТН>(Antetul tabelului, titlul tabelului). Aceste etichete sunt similare<ТD>ТD>. Diferența este că textul inclus între etichete<ТН>ТН>, este scris automat cu caractere aldine și este plasat implicit în mijlocul celulei. Puteți decentra textul și puteți alinia textul la stânga sau la dreapta. Dacă utilizați<ТD>ТD>cu eticheta<В>si atribut<АLIGN=center>, textul va arăta și ca un titlu. Cu toate acestea, rețineți că nu toate browserele acceptă în tabele font aldine, deci este mai bine să setați antetele tabelului folosind<ТН>.
Antetul este centrat în mod implicit |
Antetul poate uni coloane |
Antetul poate fi plasat înaintea coloanelor |
Text sau date |
Text sau date |
Antetul poate concatena linii |
Text sau date |
Text sau date |
Text sau date |
Text sau date |
Text sau date |
Text sau date |
Utilizarea antetelor de tabel - tag<САРТIОN>
Etichetă vă permite să creați anteturi de tabel. În mod implicit, titlurile sunt centrate și plasate fie deasupra (<САРТION АLIGN=top>), sau sub masă (<САРТION ALIGN=bottom>). Titlul poate consta din orice text și imagini. Textul va fi împărțit în linii corespunzătoare lățimii tabelului. Uneori etichetați<САРТION>folosit pentru a semna o poză. Pentru a face acest lucru, este suficient să descrii un tabel fără margini.
Antet deasupra tabelului
Text sau date |
Text sau date |
Text sau date |
Text sau date |
Sub tabel
Text sau date |
Text sau date |
Text sau date |
Atributul NOWRAP
În mod obișnuit, orice text care nu se încadrează pe o linie a unei celule de tabel merge la rândul următor. Cu toate acestea, atunci când utilizați atributul NOWRAP cu etichete<ТН>sau<ТD>Lungimea celulei este extinsă astfel încât textul conținut în ea să se potrivească pe o singură linie.
Atributul COLSPAN
Etichete<ТD>Și<ТН>modificat folosind atributul COLSPAN (Column Span, conexiune coloane). Dacă doriți să faceți o celulă mai lată decât partea de sus sau de jos, puteți utiliza atributul COLSPAN pentru a o întinde peste orice număr de celule obișnuite.
Dacă doriți să faceți orice celulă mai lată decât partea de sus sau de jos, |
puteți folosi atributul COLSPAN=2, |
pentru a-l întinde peste orice număr de celule obișnuite. |
Atributul ROWSPAN
Atributul ROWSPAN utilizat în etichete<ТD>Și<ТН>, este similar cu atributul COLSPAN=, doar că specifică numărul de linii peste care este întinsă celula. Dacă ați specificat un număr mai mare decât unu în atributul ROWSPAN=s, atunci numărul corespunzător de rânduri trebuie să fie sub celula extinsă. Nu poate fi plasat în partea de jos a mesei.
Atributul WIDTH
Atributul WIDTH este utilizat în două cazuri. Îl poți pune într-o etichetă<ТАВLЕ>pentru a da lățimea întregului tabel sau poate fi folosit în etichete<ТD>sau<ТН>pentru a seta lățimea unei celule sau a unui grup de celule. Lățimea poate fi specificată în pixeli sau procente. De exemplu, dacă setați eticheta<ТАВLЕ>WIDTH=250, veți obține un tabel cu o lățime de 250 de pixeli, indiferent de dimensiunea paginii de pe monitor. Când setați WIDТН=50% în etichetă<ТАВLЕ>tabelul va ocupa jumătate din lățimea paginii la orice dimensiune a imaginii de pe ecran. Deci, atunci când specificați lățimea tabelului ca procent, rețineți că, dacă utilizatorul are o fereastră de vizualizare îngustă, pagina dvs. poate arăta puțin ciudată. Dacă utilizați pixeli și tabelul este mai lat decât zona de vizualizare, va apărea o bară de defilare în partea de jos pentru a vă deplasa la stânga și la dreapta pe pagină. În funcție de sarcinile la îndemână, oricare dintre metodele de setare a lățimii mesei poate fi utilă.
Text sau date - lățime 100% |
sau
Text sau date - lățime 50% |
sau
Text sau date - 200 pixeli lățime |
sau
Text sau date - 100 pixeli lățime |
Aplicarea celulelor goale
Dacă o celulă nu conține date, nu va avea margini. Dacă doriți ca o celulă să aibă chenare, dar fără conținut, trebuie să puneți ceva în ea care nu va fi vizibil când este vizualizat. Puteți folosi un șir gol<ВR>. Puteți chiar să definiți coloane goale specificând lățimea lor în pixeli sau unități relativeși fără a introduce date în celulele rezultate. Acest instrument poate fi util atunci când plasați text și elemente grafice pe o pagină.
atributul CELLADDING
Acest atribut determină lățimea spațiului gol dintre conținutul celulei și marginile acesteia, adică stabilește marginile din interiorul celulei.
Text sau date |
Text sau date |
Text sau date |
Text sau date |
Text sau date |
Text sau date |
Text sau date |
Text sau date |
Text sau date |
Text sau date |
Text sau date |
Text sau date |
Atributele ALIGN și VALIGN
Etichete<ТR>, <ТD>Și<ТН>poate fi modificat cu ALIGN atributeși VALIGN. Atributul ALIGN determină dacă textul și graficele sunt aliniate orizontal, adică la stânga sau la dreapta sau centrate. Aliniere orizontala poate fi specificat în mai multe moduri:
ALIGN=sângerare la stânga apasă conținutul celulei aproape de marginea stângă.
ALIGN=stânga Aliniază conținutul unei celule la stânga, ținând cont de indentarea specificată de atributul CELLPADDING.
ALIGN=centru Centrează conținutul celulei.
ALIGN=dreapta Aliniază conținutul unei celule la dreapta, ținând cont de indentarea specificată de atributul CELLPADDING.
Text sau date |
Text sau date |
Text sau date |
Text sau date |
Text sau date |
Text sau date |
Text sau date |
Text sau date |
Text sau date |
Text sau date |
Text sau date |
Text sau date |
Text sau date |
Text sau date |
Text sau date |
Atributul VALIGN aliniază vertical textul și graficele într-o celulă. Aliniere verticală poate fi specificat în mai multe moduri:
VALIGN=sus Aliniază conținutul unei celule la chenarul superior al acesteia.
VALIGN=mijloc Centrează conținutul celulei pe verticală.
VALIGN=de jos Aliniază conținutul unei celule la chenarul inferior.
Atributul VALIGN aliniază vertical textul și graficele într-o celulă. |
top, |
mijloc, |
fund. |
VALIGN=top Aliniază conținutul unei celule la chenarul superior al acesteia. |
top, |
top, |
top. |
VALIGN=middle Centrează conținutul unei celule pe verticală. |
mijloc, |
mijloc, |
mijloc. |
VALIGN=bottom Aliniază conținutul unei celule la marginea de jos. |
fund, |
fund, |
fund. |
Atribut BORDER
În etichetă<ТАВLЕ>adesea determină cum vor arăta marginile, adică liniile care înconjoară celulele tabelului și tabelul în sine. Dacă nu specificați un cadru, veți obține un tabel fără linii, dar le va fi alocat spațiu. Același rezultat poate fi obținut prin setare<ТАВLЕ ВОRDER=0>. Uneori doriți să faceți chenarul mai gros, astfel încât să iasă mai bine în evidență. Pentru a atrage atenția asupra unei imagini sau text, puteți seta exclusiv chenare îndrăznețe. Când creați tabele imbricate, trebuie să faceți pentru mese diferite margini de diferite grosimi pentru a le face mai ușor de distins.
Atributul CELLSPACING
Atributul CELLSPACING specifică lățimea spațiilor dintre celule în pixeli. Dacă acest atribut nu este specificat, valoarea implicită este de doi pixeli. Folosind atributul CELLSPACING=, puteți plasa text și elemente grafice oriunde aveți nevoie de ele. Dacă vrei să pleci loc gol, puteți introduce un spațiu în celulă.
Text sau date |
Text sau date |
Text sau date |
Text sau date |
Text sau date |
Text sau date |
Text sau date |
Text sau date |
Text sau date |
Text sau date |
Text sau date |
Text sau date |
Text sau date |
Text sau date |
Text sau date |
Text sau date |
|
Text sau date |
Atributul BGCOLOR
Acest atribut vă permite să setați culoarea de fundal. În funcție de ce etichetă (TABLE, TR, TD) este utilizată, culoarea de fundal poate fi setată pentru întregul tabel, pentru un rând sau pentru o celulă individuală. Sens a acestui atribut este codul RGB sau numele culorii standard.
Text sau date |
Text sau date |
Text sau date |
Text sau date |
Text sau date |
Text sau date |
Atributul BACKGROUND
Acest atribut specifică imaginea de fundal pentru tabele. Se aplică etichetelor TABLE și TD. Valoarea sa este adresa URL a fișierului cu imagine de fundal. Utilizarea acestui atribut este discutată mai jos.
Utilizarea tabelelor în designul paginii
Lucrul bun despre mese este că puteți face marginile lor invizibile dacă doriți. Acest lucru permite utilizarea etichetei<ТАВLЕ>plasați frumos textul și graficele pe pagină. Pa tag<ТАВLЕ>rămâne singurul instrument puternic de formatare în HTML. Designerii de pagini web au acum aproape aceeași libertate în ceea ce privește utilizarea spațiului alb ca și creatorii de pagini web. pagini tipărite. Tabelele sunt cea mai bună modalitate de a vă îndepărta de plasarea ierarhică a textului pe paginile Web.
Dacă browserul acceptă tabele, de obicei va afișa corect cele mai multe efecte interesante obtinute cu ajutorul lor
Universitatea Pedagogică de Stat din Ural
Bine ati venit!
|
Crearea de mese colorate
Unele browsere vă permit să afișați culori. Există mai multe moduri de a colora un tabel, mai ales în funcție de browserul pe care îl utilizați.
Chenarele colorate în Netscape Navigator. Nu numai că poți înconjura masa cadru frumos, dar și setați o culoare pentru aceasta, diferită de culorile textului și de fundal. Creați un GIF simplu gri (sau orice GIF pe care doriți să îl aveți ca fundal) și definiți-l într-o etichetă<ВODY>ca fundal de pagină. Apoi setați culoarea de fundal a paginii. Drept urmare, eticheta dvs<ВОDY>va arata cam asa:
Ați creat un fundal dublu - GIF și culoarea specificată. Ca rezultat, culoarea de fundal va fi vizibilă pe toate marginile tabelului și linii orizontale (<НR>). Indiferent dacă GIF-ul de fundal este gri sau nu, liniile colorate și chenarele tabelului vor ieși în evidență. Dacă GIF-ul de fundal nu este prea complex, timpul de încărcare a paginii va crește doar ușor.
Cele mai bune articole pe această temă
|
| |
|