Si të krijoni një tabelë në css. Lista e numëruar me shumë nivele
29.03.2019
Lajme
Shembuj në internet
formë
Ky shembull tregon se si të krijoni një tabelë në një dokument HTML.
(Mund të gjeni më shumë shembuj në fund të kësaj faqeje.)
tabela HTML
Forma e përcaktuar nga
etiketë. Çdo tabelë ka një numër rreshtash (të përcaktuara nga etiketë), çdo rresht ndahet në një numër qelizash (të përcaktuara nga etiketë). I referohet përmbajtjes së shkronjave td të dhënat e tabelës (të dhënat e tabelës), domethënë qeliza e të dhënave. Qeliza e të dhënave mund të përmbajë tekst, imazhe, lista, paragrafë, forma, horizontale, tabela etj.Shembull i tabelës
rreshti 1, qeliza 1 |
rreshti 1, qeliza 2 |
rreshti 2, qeliza 1 |
rreshti 2, qeliza 2 |
Shfletuesi shfaq sa vijon: | rreshti 1, qeliza 1 | rreshti 1, qeliza 2 |
| rreshti 2, qeliza 1 | rreshti 2, qeliza 2 |
Tabelat HTML dhe vetitë e kufiritNëse nuk e përcaktoni atributin e kufirit, tabela nuk do të shfaqet. Ndonjëherë kjo është e dobishme, por shumicën e kohës, ne duam të tregojmë kufirin. Përdorni vetinë e kufirit për të shfaqur një tabelë me kufij:
Rreshti 1, qeliza 1 |
Rreshti 1, qeliza 2 |
Kreu i tabelës HTMLKreu i tabelës duke përdorur | etiketa është përcaktuar. Shumica e shfletuesve do të shfaqin tekstin e kokës me shkronja të theksuara në qendër:
Kreu 1 |
Kreu 2 |
|---|
rreshti 1, qeliza 1 |
rreshti 1, qeliza 2 |
rreshti 2, qeliza 1 |
rreshti 2, qeliza 2 |
Shfletuesi shfaq sa vijon: | Kreu 1 | Kreu 2 |
|---|
| rreshti 1, qeliza 1 | rreshti 1, qeliza 2 |
| rreshti 2, qeliza 1 | rreshti 2, qeliza 2 |
Nuk ka tabelë kufitare
Ky rast nuk demonstroi një kufi të tabelës. Kreu i tabelës (Titulli)
Ky shembull tregon se si të shfaqni kokën e tabelës. Tabela me titujt
Ky shembull demonstron me një titull (titull) të formularit Ndërbankare nëpër kolona ose qeliza tabele
Ky shembull tregon se si të përcaktohen kolonat e kryqëzuara ose të tërthorta të një qelize tabele. Etiketat brenda tabelës
Ky shembull tregon se si të shfaqen elementet në elementë të ndryshëm. Mbushje qelize (mbushje qelize)
Ky shembull tregon se si të përdoret mbushja e qelizave për të krijuar një përmbajtje qelize bosh dhe kufijtë e saj ndërmjet. Hapësira e qelizave (Harësia e qelizave)
Ky shembull tregon se si të përdoret hapësira e qelizave për të rritur distancën ndërmjet qelizat.
Detyrë
Krijoni një tabelë dhe specifikoni parametrat e saj (kufijtë dhe distancën midis qelizave) përmes stileve.
Zgjidhje
Një tabelë përbëhet nga rreshta dhe kolona qelizash që mund të përmbajnë tekst dhe fotografi. Për të shtuar një tabelë në një faqe interneti, përdorni etiketën ... Ky element shërben si një enë për elementet që përcaktojnë përmbajtjen e tabelës. Çdo tabelë përbëhet nga rreshta dhe qeliza, të cilat vendosen në përputhje me rrethanat duke përdorur etiketat dhe | ... Tabela duhet të përmbajë të paktën një qelizë (shembulli 1). Lejohet në vend të etiketës | përdor etiketën | ... Teksti në një qelizë të zbukuruar me një etiketë | , shfaqur nga shfletuesi në font të guximshme dhe është rreshtuar në qendër të qelizës. Përndryshe, ndryshimet midis qelizave krijohen përmes etiketave | dhe | nr.
Shembull 1. Krijimi i një tabele
HTML5 IE Cr Op Sa Fx
Etiketa e tabelës
| Qeliza 1 |
Qeliza 2 |
| Qeliza 3 |
Qeliza 4 |
Rendi i qelizave dhe pamja e tyre është paraqitur në Fig. një.
Oriz. 1. Rezultati i krijimit të një tabele me katër qeliza
Atributi kufitar i etiketës lejohet të shtohet vetëm me vlerë boshe () ose e barabartë me 1. Të gjitha vlerat e tjera nuk janë vërtetuar.
Vetia e stilit të mbushjes përdoret për të kontrolluar kufijtë brenda qelizave, e cila shtohet në përzgjedhësin td. Hapësira ndërmjet qelizave ndryshohet nga vetia e ndarjes kufitare (shembulli 2) e shtuar në përzgjedhësin e tabelës, shfletuesi IE e kupton atë vetëm që nga versioni 8.0.
Shembulli 2. Fushat brenda qelizave
HTML5 CSS 2.1 IE Cr Op Sa Fx
Etiketa e tabelës
| Kreu 1 | Kreu 2 |
|---|
| Qeliza 3 | Qeliza 4 |
Një tabelë me fusha dhe hapësira midis qelizave është paraqitur në Fig. 2. Një rezultat i ngjashëm mund të arrihet me ndihmën e kornizës të bardhë rreth qelizave.
Oriz. 2. Fushat në qelizat e tabelës
Për shkak të shkathtësisë së tabelave, një numër i madh parametrat që kontrollojnë pamjen e tyre, tabelat janë bërë prej kohësh një standard i caktuar për paraqitjen e faqeve në internet. Tabela me kufi i padukshëmështë si rrjet modular, në blloqet e të cilave është e përshtatshme të vendosen elementë të faqes së internetit. Megjithatë, kjo nuk është në të vërtetë qasja e duhur sepse të gjithë objekt HTMLështë përcaktuar për qëllimet e veta dhe nëse përdoret për qëllime të tjera, e për më tepër, do të thotë se nuk ka alternativa. Dhe kështu ishte për një kohë të gjatë derisa shtresat erdhën për të zëvendësuar tabelat në paraqitjen e faqes. Kjo nuk do të thotë që shtresat tani përdoren gjatë gjithë kohës, por tendenca tashmë është përshkruar qartë - tabelat përdoren për të vendosur të dhëna tabelare, dhe shtresat përdoren për paraqitje dhe dizajn.
Krijimi i një tabele
Një tabelë përbëhet nga rreshta dhe kolona qelizash që mund të përmbajnë tekst dhe fotografi. Në mënyrë tipike, tabelat përdoren për të organizuar dhe paraqitur të dhënat, por aftësitë e tabelave nuk janë të kufizuara në këtë. Me ndihmën e tabelave, është i përshtatshëm për të shtypur paraqitjet e faqeve duke vendosur rruga e duhur fragmente teksti dhe imazhesh.
Për të shtuar një tabelë në një faqe interneti, përdorni etiketën ... Ky element shërben si një enë për elementet që përcaktojnë përmbajtjen e tabelës. Çdo tabelë përbëhet nga rreshta dhe qeliza, të cilat vendosen në përputhje me rrethanat duke përdorur etiketat dhe | ... Tabela duhet të përmbajë të paktën një qelizë (shembulli 12.1). Lejohet në vend të etiketës | përdor etiketën | ... Teksti në një qelizë të zbukuruar me një etiketë | , shfaqet me shkronja të zeza nga shfletuesi dhe rreshtuar në qendër të qelizës. Përndryshe, ndryshimet midis qelizave krijohen përmes etiketave | dhe | nr.
Shembulli 12.1. Krijimi i një tabele
Etiketa TABLE
| Qeliza 1 |
Qeliza 2 |
| Qeliza 3 |
Qeliza 4 |
Rendi i qelizave dhe pamja e tyre është paraqitur në Fig. 12.1. është trupi i tryezës. Trupi përbëhet nga rreshta dhe kolona. Tabela plotësohet rresht pas rreshti.
Çdo etiketë | krijon linjë e re... Më tej në fole janë krijuar kolonat. Mund të krijohen kolona të shumta. Në këtë rast, ju duhet të mbani gjurmët e numrit të kolonave në çdo rresht. Për shembull, nëse rreshti i parë kishte 5 kolona, atëherë rreshtat e mëposhtëm duhet të ketë 5 kolona. Përndryshe, tabela do të notojë. Është e mundur të kombinohen qelizat.
Si të bëni një tabelë në html
Le të japim një shembull, kodi html:
| Tabela shembull |
| Kolona 1 |
Kolona 2 |
Kushtojini vëmendje qelizës | ... Ne përdorim atribut i veçantë colspan për të kombinuar qelizat horizontalisht. Vlera e saj numerike tregon numrin e kolonave që duhen kombinuar. Ekziston edhe një analog i këtij atributi: etiketa | (kreu i tabelës), ku duhet të shkruani edhe colspan. Rezultati do të jetë i njëjtë. Por shpesh përdoret td e zakonshme.
Tani le të hedhim një vështrim më të afërt në të gjitha atributet e etiketës.
.
Etiketoni atributet dhe vetitë
Tek etiketa e hapjes ju mund të shkruani atribute të ndryshme.
1. Property align = "parameter" - vendos shtrirjen e tabelës. Mund të marrë vlerat e mëposhtme:
Në shembullin e mësipërm, ne rreshtuam tabelën në qendër align = "center".
Ky atribut mund të zbatohet jo vetëm për një tabelë, por edhe për qelizat individuale të tabelës. ose vargje | ... Kështu, në qeliza të ndryshme rreshtimi do të jetë i ndryshëm.
për shembull
| ... |
| ... |
...
2. Sfondi i pronës = "URL" - vendos foto sfondi... Në vend të URL-së, duhet të shkruhet adresa e imazhit të sfondit.
Shembull
| Tabela shembull |
| Kolona 1 |
Kolona 2 |
Konvertuar në faqe në sa vijon:
Në shembullin e konsideruar, tonë imazhi i sfondit ndodhet në dosjen img (e cila është në të njëjtin direktorium me faqen html), dhe imazhi quhet fon.gif. Vini re se në etiketën kemi shtuar style = "color: white;" ... Meqenëse sfondi është pothuajse i zi, në mënyrë që teksti të mos bashkohet me sfondin, ne e bëmë tekstin të bardhë.
3. Vetia bgcolor = "color" - vendos ngjyrën e sfondit të tabelës. Si ngjyrë, mund të zgjidhni cilindo nga të gjithë paletën (shih kodet dhe emrat e ngjyrave html)
4. Property border = "number" - vendos trashësinë e kufirit të tabelës. Në shembujt e mëparshëm, ne specifikuam kufirin = "1", që do të thotë se gjerësia e kufirit është 1 piksel.
5. Property bordercolor = "color" - vendos ngjyrën e kufirit. Nëse kufiri = "0", atëherë nuk do të ketë kufi dhe ngjyra e kufirit nuk do të ketë kuptim.
6. Property cellpadding = "numër" - dhëmbëzimi nga korniza në përmbajtjen e qelizës në pixel.
7. Propertycellpacing = "numër" - distanca ndërmjet qelizave në pixel.
8. Property cols = "number" - numri i kolonave. Nëse nuk e specifikoni, shfletuesi do të përcaktojë vetë numrin e kolonave. I vetmi ndryshim është se specifikimi i këtij parametri ka të ngjarë të përshpejtojë ngarkimin e tabelës.
9. Property frame = "parameter" - si të shfaqen kufijtë rreth tabelës. Mund të marrë vlerat e mëposhtme:
- i pavlefshëm - mos vizatoni kufij
- kufi - kufiri rreth tryezës
- sipër - kufiri në krye të tabelës
- më poshtë - kufiri në fund të tabelës
- hsides - shtoni vetëm kufijtë horizontalë (sipër dhe fund të tabelës)
- vsides - vizatoni vetëm kufijtë vertikalë (majtas dhe djathtas të tabelës)
- rhs - vetëm në kufi anën e djathtë tabelat
- lhs - kufiri vetëm në anën e majtë të tabelës
10. Property height = "number" - vendos lartësinë e tabelës: ose në pixel ose në përqindje.
11. Rregullat e vetive = "parametër" - ku të shfaqen kufijtë midis qelizave. Mund të marrë vlerat e mëposhtme:
- të gjitha - një vijë është tërhequr rreth çdo qelize në tabelë
- grupe - shfaqet linja midis grupeve që formohen nga etiketat , , ,
ose
- cols - vija shfaqet midis kolonave
- asnjë - të gjithë kufijtë janë të fshehur
- rows - kufiri vizatohet ndërmjet rreshtave të tabelës të krijuara përmes etiketës
12. Property width = "number" - vendos gjerësinë e tabelës: ose në pixel ose në përqindje.
13. Property class = "class_name" - mund të specifikoni emrin e klasës së cilës tabela i përket.
14. Property style = "styles" - stilet mund të vendosen individualisht për secilën tabelë.
Tani është koha për të zhytur në tabelë dhe për të parë atributet e qelizave të tabelës. Këto atribute duhet të shkruhen në etiketën hapëse.
.
Atributet dhe vetitë dhe |
1. Property align = "parameter" - vendos shtrirjen e një qelize individuale në tabelë. Mund të marrë vlerat e mëposhtme:
- shtrirje majtas - majtas
- shtrirje qendër - qendër
- shtrirje djathtas - djathtas
2. Property background = "URL" - vendos imazhin e sfondit të qelizës. Në vend të URL-së, duhet të shkruhet adresa e imazhit të sfondit.
3. Vetia bgcolor = "color" - vendos ngjyrën e sfondit të qelizës.
4. Property bordercolor = "color" - vendos ngjyrën e kufirit të qelizës.
5. Vetia char = "shkronjë" - vendos shkronjën nga e cila duhet të bëhet rreshtimi. Kuptimi atribut align duhet të vendoset në char.
6. Vetia colspan = "numër" - vendos numrin e qelizave horizontale për t'u kombinuar.
7. Property height = "number" - vendos lartësinë e tabelës: ose në pixel ose në përqindje.
8. Property width = "number" - vendos gjerësinë e tabelës: ose në pixel ose në përqindje.
9. Property rowspan = "number" - vendos numrin e qelizave vertikale të bashkuara.
10. Property valign = "parametër" - shtrirje vertikale e përmbajtjes së qelizës.
- sipër - rreshton përmbajtjen e qelizës në krye të rreshtit
- shtrirje mes - mes
- fund - rreshtoni në fund
- bazë - shtrirje bazë
Shënim 1 Për tag | të njëjtat opsione janë në dispozicion si për | ... Parametrat për një etiketë | do të zbatohet në mënyrë hierarkike për të gjithë brenda saj
Si të parandaloni që qelizat e tabelës të ngjiten së bashku
Në rastin e përdorimit të kufirit (kufirit të qelizave) dhe mbushjes zero midis qelizave, ato janë ende të ngjitura së bashku dhe ju merrni një kufi të dyfishtë. Për të shmangur këtë, duhet të regjistroni tabelën e kolapsit të kufirit: palosni në fletën e stilit:
...
I dashur lexues, tani keni mësuar shumë më tepër rreth etiketa html tabela. Tani ju këshilloj të kaloni në mësimin tjetër.
Artikujt kryesorë të lidhur
| |
|
| | |
