Formatarea tabelelor într-un document html. Afișarea browserului
colspan tag - combinarea coloanelorCea mai comună utilizare a tabelelor cu structuri complexe este marcarea paginilor web. Uită-te la poză:
Se pare că avem nevoie ca primul și al treilea rând să aibă câte o coloană fiecare. Acest lucru se realizează cu ajutorul parametrului colspan etichetă
De exemplu,
Pentru exemplul nostru:
Titlul documentului
| antetul site-ului | |
| meniu | conţinut |
| partea de jos a site-ului | |
Observați că primul și al treilea rând conțin acum câte o coloană fiecare.
Să ne uităm la un alt exemplu de marcare a paginii web:
| antetul site-ului | |||||
| meniu | meniu | meniu | meniu | meniu | meniu |
| ştiri | conţinut | ||||
Număr - câte rânduri și coloane sunt în acest tabel? Pentru a face acest lucru, aplicați mental o grilă desenului.
Acest lucru va avea ca rezultat trei rânduri și șase coloane.
Primul rând este format dintr-o coloană, care include șase coloane. Să scriem asta:
Al doilea rând este format din șase coloane:
A treia linie este formată din două coloane, prima incluzând două coloane și a doua patru:
Nu este atât de greu. Suprapunem vizual grila pe desen și scriem rândurile unul câte unul de sus în jos, descriind numărul necesar de coloane în fiecare.
Rowspan tag - concatenare de rânduri
Ce se întâmplă dacă avem nevoie de markup ca acesta?
Vă rugăm să rețineți că în al doilea rând avem o singură coloană, deoarece prima coloană se extinde din primul rând, incluzând pur și simplu două.
La prima vedere, acest lucru poate părea dificil, dar cu puțină practică veți putea crea tabele de orice complexitate.
| Să ne uităm la un alt exemplu: | meniu |
| conţinut | |
| partea de jos a site-ului | |
capac
Deci, în primul rând avem două coloane, cu a doua coloană concatenând cele două rânduri. Să scriem asta:
Al doilea rând este o coloană (doar că o parte a acestuia este ascunsă de a doua coloană a primului rând):
În cele din urmă, al treilea rând este o singură coloană care include trei coloane: Folosind aceste două opțiuni lungimea rândurilor colspanŞi
Puteți crea tabele de orice complexitate. Practica.
Tabele imbricate
După cum sugerează și numele, un tabel poate fi plasat în altul sau în orice coloană. Să facem asta folosind ultimul nostru marcaj ca exemplu.
Deci avem acest cod.
Instrumente pentru descrierea tabelelor în HTML
Pe măsură ce WWW s-a dezvoltat, a devenit clar că fondurile conținute în HTML nu erau suficiente pentru afișarea de înaltă calitate diverse tipuri 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 au avut nu doar un instrument pentru plasarea textului și a datelor numerice, ci și un instrument puternic de proiectare pentru plasarea imaginilor grafice și a textului în locul potrivit pe ecran.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>.
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>. Numărul de etichete<ТD>într-un rând definește numărul de celule
Masă
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<ТН>(TableHeader, titlul tabelului). Aceste etichete sunt similare<Т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>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 caractere 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ă
| Text sau date | Text sau date | Text sau date | Text sau date |
| Text sau date | Text sau date | Text sau date |
Atributul NOWRAP
În mod obișnuit, orice text care nu se încadrează pe o singură 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>lungimea rândurilor<ТН>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>lungimea rândurilor<ТН>, 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 ca procent. 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% |
| Text sau date - lățime 50% |
| Text sau date - 200 pixeli lățime |
| Text sau date - 100 pixeli lățime |
Aplicarea celulelor goale
Dacă o celulă nu conține date, nu va avea margini. Dacă doriți ca o celulă să aibă margini, dar fără conținut, trebuie să puneți ceva în ea care nu va fi vizibil atunci când este vizualizat. Puteți folosi un șir gol<ВR>. Puteți chiar să specificați coloane goale prin definirea lățimii lor în pixeli sau unități relative și fără introducerea de date în celulele rezultate. Acest instrument poate fi util atunci când plasați text și elemente grafice pe o pagină.
atributul CELLADDING
Acest atribut determină lățimea spațiului gol dintre conținutul celulei și marginile acesteia, adică stabilește marginile din interiorul celulei.
| Text sau date | Text sau date | Text sau date |
| Text sau date | Text sau date | Text sau date |
| Text sau date | Text sau date | Text sau date |
| Text sau date | Text sau date | Text sau date |
Atributele ALIGN și VALIGN
Etichete<ТR>, <ТD>lungimea rândurilor<ТН>poate fi modificat folosind atributele ALIGN și VALIGN. Atributul ALIGN determină dacă textul și graficele sunt aliniate orizontal, adică la stânga sau la dreapta sau centrate. Alinierea orizontală poate fi setată în mai multe moduri:
ALIGN=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ă. Alinierea verticală poate fi setată î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 a unui text, puteți seta exclusiv chenare îndrăznețe. Când creați tabele imbricate, trebuie să faceți chenare de diferite grosimi pentru diferite tabele pentru a le face mai ușor de distins.
Atributul CELLSPACING
Atributul CELLSPACING specifică lățimea spațiilor dintre celule în pixeli. Dacă acest atribut nu este specificat, valoarea implicită este de doi pixeli. Folosind atributul CELLSPACING=, puteți plasa text și imagini oriunde aveți nevoie de ele. Dacă doriți să lăsați un spațiu gol, puteți scrie un spațiu în celulă.
| Text sau date | Text sau date | Text sau date |
| Text sau date | Text sau date | Text sau date |
| Text sau date | Text sau date | Text sau date |
| Text sau date | Text sau date | Text sau date |
| Text sau date | Text sau date | Text sau date |
| Text sau date | Text sau date |
Atributul BGCOLOR
Acest atribut vă permite să setați culoarea de fundal. În funcție de ce etichetă (TABLE, TR, TD) este utilizată, culoarea de fundal poate fi setată pentru întregul tabel, pentru un rând sau pentru o celulă individuală. Valoarea acestui atribut este codul RGB sau nume standard culorile.
| 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. Sensul lui 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 designerii de pagini tipărite. Tabelele sunt cea mai bună modalitate de a vă îndepărta de aranjarea ierarhică a textului de 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 UralBun 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 o culoare specificată. Ca urmare 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.
Sarcină
Creați un tabel și specificați parametrii acestuia (margini și distanță dintre celule) prin stiluri.
Soluţie
Un tabel este format din rânduri și coloane de celule care pot conține text și imagini. Pentru a adăuga un tabel la o pagină web, utilizați eticheta
| . Tabelul trebuie să conțină cel puțin o celulă (exemplul 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 1: Crearea unui tabel HTML5 IE Cr Op Sa Fx
Ordinea celulelor și aspectul lor este prezentată în Fig. 1. Orez. 1. Rezultatul creării unui tabel cu patru celule atributul etichetei de frontieră
Un tabel cu câmpuri și distanța dintre celule este prezentat în Fig. 2. Un rezultat similar poate fi obținut folosind un cadru alb în jurul celulelor.
Orez. 2. Câmpurile din celulele tabelului Folosind atributele COLSPAN și ROWSPAN, puteți combina mai multe celule adiacente ale unei coloane sau ale unui rând într-o singură celulă mare. Atributul etichetei COLSPAN
, | vă permite să îmbinați celulele mai multor coloane într-un singur rând.
| Atribut ROWSPAN - celule de mai multe rânduri într-o coloană. Numărul specificat în aceste atribute indică numărul de celule care vor fi îmbinate. Deoarece Atunci când se efectuează operațiuni de îmbinare este foarte ușor să se încurce, recomand cu tărie realizarea unei schițe preliminare a tabelului pe hârtie. Exemplu:
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
