Cum se creează un tabel în css. Lista numerotata pe mai multe niveluri
29.03.2019
știri
Exemple online
formă
Acest exemplu demonstrează cum să creați un tabel într-un document HTML.
(Puteți găsi mai multe exemple în partea de jos a acestei pagini.)
tabel HTML
Formă definită de
etichetă. Fiecare tabel are un număr de linii (definite de tag), fiecare linie este împărțită într-un număr de celule (definite de etichetă). Se referă la conținutul literelor td date table (date table), adică celula de date. Celula de date poate conține text, imagini, liste, paragrafe, formulare, orizontale, tabele și așa mai departe.Instanță de tabel
rândul 1, celula 1 |
rândul 1, celula 2 |
rândul 2, celula 1 |
rândul 2, celula 2 |
Browserul afișează următoarele :: | rândul 1, celula 1 | rândul 1, celula 2 |
| rândul 2, celula 1 | rândul 2, celula 2 |
Tabelele HTML și proprietățile marginilorDacă nu definiți atributul de margine, tabelul nu se va afișa. Uneori, acest lucru este util, dar de cele mai multe ori, vrem să arătăm granița. Utilizați proprietatea border pentru a afișa un tabel cu chenare:
Rândul 1, celula 1 |
Rândul 1, celula 2 |
Antetul tabelului HTMLAntetul tabelului folosind | eticheta este definită. Majoritatea browserelor vor afișa textul antetului cu caractere aldine centrate:
Antetul 1 |
Antetul 2 |
|---|
rândul 1, celula 1 |
rândul 1, celula 2 |
rândul 2, celula 1 |
rândul 2, celula 2 |
Browserul afișează următoarele: | Antetul 1 | Antetul 2 |
|---|
| rândul 1, celula 1 | rândul 1, celula 2 |
| rândul 2, celula 1 | rândul 2, celula 2 |
Fără masă de chenar
Acest caz nu a demonstrat o margine a tabelului. Antet tabel (Tit)
Acest exemplu demonstrează cum să afișați antetul tabelului. Tabel cu titluri
Acest exemplu demonstrează cu un titlu (titlu) al formularului Interbancare între coloane sau celulă de tabel
Acest exemplu demonstrează cum să definiți coloanele încrucișate sau între coloane ale unei celule de tabel. Etichete în tabel
Acest exemplu demonstrează cum să afișați elemente în diferite elemente. Umplutură celulară (Umplutură celulară)
Acest exemplu demonstrează cum să utilizați umplutura de celule pentru a crea un conținut de celulă necompletat și marginile dintre acestea. Spațiere dintre celule (Spațiere dintre celule)
Acest exemplu demonstrează cum se utilizează Spațierea dintre celule pentru a crește distanța între celule.
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 ... Acest element servește ca un container pentru elementele care definesc conținutul tabelului. Orice tabel constă din rânduri și celule, care sunt stabilite în consecință folosind etichete și | ... Tabelul trebuie să conțină cel puțin o celulă (exemplul 1). Permis în loc de etichetă | utilizați eticheta | ... Text într-o celulă decorată cu o etichetă | , afișat de browser în font îndrăzneţși este 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
Etichetă de masă
| Celula 1 |
Celula 2 |
| Celula 3 |
Celula 4 |
Ordinea celulelor și aspectul lor este prezentată în Fig. unu.
Orez. 1. Rezultatul creării unui tabel cu patru celule
Atributul de margine al etichetei este permisă adăugarea numai cu valoare goală () sau egal cu 1. Toate celelalte valori nu sunt validate.
Proprietatea stil de umplutură este folosită pentru a controla marginile din celule, care este adăugată la selectorul td. Spațierea dintre celule este modificată de proprietatea de spațiere a marginilor (exemplul 2) adăugată la selectorul de tabel, browserul IE o înțelege doar din versiunea 8.0.
Exemplul 2. Câmpuri din celule
HTML5 CSS 2.1 IE Cr Op Sa Fx
Etichetă de masă
| Titlul 1 | Titlul 2 |
|---|
| Celula 3 | Celula 4 |
Un tabel cu câmpuri și distanță între celule este prezentat în Fig. 2. Un rezultat similar se poate obține cu ajutorul cadrului albîn jurul celulelor.
Orez. 2. Câmpurile din celulele tabelului
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ă este ca grilă modulară, în blocurile cărora este convenabil să plasați elemente ale paginii web. Cu toate acestea, acest lucru nu este cu adevărat abordarea corectă pentru că toată lumea obiect HTML este definită în scopuri proprii și dacă este folosită în alte scopuri și, mai mult, înseamnă că nu există alternative. Și așa a fost pentru mult timp până când straturile au venit să înlocuiască tabelele în aspectul site-ului. Acest lucru nu înseamnă că acum straturile sunt folosite tot timpul, dar tendința a fost deja conturată clar - tabelele sunt folosite pentru a plasa date tabelare, 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. De obicei, tabelele sunt folosite pentru a organiza și prezenta date, dar capacitățile tabelelor nu se limitează la aceasta. Cu ajutorul tabelelor, este convenabil să tipăriți machetele de pagină prin plasare calea cea buna 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 constă din rânduri și celule, care sunt stabilite în consecință 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ă decorată cu o etichetă | , afișat cu caractere aldine de browser ș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. este corpul mesei. Corpul este format din rânduri și coloane. Tabelul este completat rând cu rând.
Fiecare etichetă | creează linie nouă... Mai departe în imbricat sunt create coloane. Pot fi create mai multe coloane. În acest caz, trebuie să urmăriți numărul de coloane din fiecare rând. De exemplu, dacă primul rând avea 5 coloane, atunci următoarele rânduri ar trebui să fie 5 coloane. În caz contrar, masa va pluti. Este posibilă combinarea celulelor.
Cum se face un tabel în html
Să dăm un exemplu, cod html:
| Exemplu de tabel |
| Coloana 1 |
Coloana 2 |
Acordați atenție celulei | ... Folosim atribut special colspan pentru a combina celulele pe orizontală. Valoarea sa numerică indică numărul de coloane de combinat. Există și un analog al acestui atribut: tag | (antetul tabelului), unde trebuie să scrieți și colspan. Rezultatul va fi același. Dar td-ul obișnuit este adesea folosit.
Acum să aruncăm o privire mai atentă la toate atributele etichetei.
.
Etichetați atributele și proprietățile
La eticheta de deschidere poti scrie diverse atribute.
1. Property align = "parametru" - setează alinierea tabelului. Poate lua următoarele valori:
În exemplul de mai sus, am aliniat tabelul în centru align = "center".
Acest atribut poate fi aplicat nu numai unui tabel, ci și celulelor individuale ale tabelului. sau corzi | ... Astfel, în celule diferite alinierea va fi diferită.
de exemplu
| ... |
| ... |
...
2. Fundalul proprietății = „URL” - seturi imagine de fundal... În loc de URL, trebuie scrisă adresa imaginii de fundal.
Exemplu
| Exemplu de tabel |
| Coloana 1 |
Coloana 2 |
Convertit pe pagină în următoarele:
În exemplul considerat, nostru imagine de fundal situat în folderul img (care se află în același director cu pagina html), iar imaginea se numește fon.gif. Rețineți că în etichetă am adăugat stil = "culoare: alb;" ... Deoarece fundalul este aproape negru, astfel încât textul să nu se îmbine cu fundalul, am făcut textul alb.
3. Proprietatea bgcolor = "culoare" - setează culoarea de fundal a tabelului. Ca culoare, puteți alege oricare din întreaga paletă (vezi codurile și numele culorilor html)
4. Chenar de proprietate = „număr” - setează grosimea chenarului tabelului. În exemplele anterioare, am specificat chenar = „1”, ceea ce înseamnă că lățimea chenarului este de 1 pixel.
5. Proprietate bordercolor = "culoare" - setează culoarea chenarului. Dacă chenar = „0”, atunci nu va fi nicio chenar și culoarea chenarului nu va avea sens.
6. Proprietate cellpadding = „număr” - indentare de la cadru la conținutul celulei în pixeli.
7. Proprietate cellspacing = „număr” - distanța dintre celule în pixeli.
8. Proprietate cols = „număr” - numărul de coloane. Dacă nu îl specificați, browserul va determina singur numărul de coloane. Singura diferență este că specificarea acestui parametru este probabil să accelereze încărcarea tabelului.
9. Cadru de proprietate = „parametru” - cum să afișați chenarele în jurul tabelului. Poate lua următoarele valori:
- gol - nu desenați granițe
- chenar - chenarul din jurul mesei
- deasupra - chenar în partea de sus a tabelului
- dedesubt - chenar în partea de jos a tabelului
- hsides - adăugați doar margini orizontale (sus și jos ale tabelului)
- vssides - desenați doar margini verticale (stânga și dreapta tabelului)
- rhs - chenar numai pe partea dreapta Mese
- lhs - chenar numai pe partea stângă a mesei
10. Înălțimea proprietății = „număr” - setează înălțimea tabelului: fie în pixeli, fie în procente.
11. Reguli de proprietate = „parametru” – unde se afișează chenarele dintre celule. Poate lua următoarele valori:
- toate - se trasează o linie în jurul fiecărei celule din tabel
- grupuri - linia este afișată între grupurile care sunt formate din etichete , , ,
sau
- cols - linia este afișată între coloane
- niciunul - toate granițele sunt ascunse
- rânduri - chenarul este trasat între rândurile de tabel create prin etichetă
12. Lățimea proprietății = „număr” - setează lățimea tabelului: fie în pixeli, fie în procente.
13. Property class = "class_name" - puteți specifica numele clasei căreia îi aparține tabelul.
14. Stil de proprietate = "stiluri" - stilurile pot fi setate individual pentru fiecare tabel.
Acum este momentul să vă scufundați în tabel și să priviți atributele celulelor din tabel. Aceste atribute trebuie să fie scrise în eticheta de deschidere.
.
Atribute și proprietăți și |
1. Property align = "parametru" - setează alinierea unei celule individuale în tabel. Poate lua următoarele valori:
- aliniament stânga - stânga
- aliniament centru - centru
- alinierea dreapta - dreapta
2. Fundalul proprietății = „URL” - setează imaginea de fundal a celulei. În loc de URL, trebuie scrisă adresa imaginii de fundal.
3. Proprietatea bgcolor = "culoare" - setează culoarea de fundal a celulei.
4. Proprietate bordercolor = "culoare" - setează culoarea marginii celulei.
5. Proprietatea char = "litera" - setează litera din care ar trebui făcută alinierea. Sens atributul de aliniere trebuie setat la char.
6. Proprietatea colspan = „număr” - setează numărul de celule orizontale de combinat.
7. Înălțimea proprietății = „număr” - setează înălțimea tabelului: fie în pixeli, fie în procente%.
8. Lățimea proprietății = „număr” - setează lățimea tabelului: fie în pixeli, fie în procente%.
9. Proprietate rowspan = „număr” - setează numărul de celule verticale îmbinate.
10. Proprietate valign = „parametru” - alinierea verticală a conținutului celulei.
- sus - aliniază conținutul celulei cu partea de sus a liniei
- aliniament mijloc - mijloc
- de jos - aliniați cu partea de jos
- linia de bază - alinierea liniei de bază
Nota 1 Pentru etichetă | sunt disponibile aceleasi optiuni ca si pentru | ... Parametri pentru o etichetă | va fi aplicat ierarhic tuturor inauntru
Cum să preveniți lipirea celulelor din tabel
În cazul utilizării chenar (border de celule) și zero padding între celule, acestea sunt încă lipite împreună și obțineți un chenar dublu. Pentru a evita acest lucru, trebuie să înregistrați tabelul border-collapse: collapse în foaia de stil:
...
Dragă cititor, acum ați aflat mult mai multe despre etichetă html masa. Acum vă sfătuiesc să treceți la următoarea lecție.
Top articole similare
| |
|
| | |
