Atributi HTML width përdoret për të vendosur gjerësinë e një qelize tabele, e cila anashkalon parazgjedhjen. Është i përçmuar. Përdorni CSS për të kontrolluar paraqitjen e qelizave në tabelat HTML.
Rregullimi i gjerësisë së një kolone tabele
Atributi gjerësi, tani i vjetëruar, ishte dikur metodë standarde rregullimi i gjerësisë së kolonave të tabelës. Si parazgjedhje, shfletuesi do të rregullojë kolonat e tabelës për t'iu përshtatur përmbajtjes së saj. Por nëse keni nevojë të kontrolloni gjerësinë e secilës kolonë, mund ta bëni këtë duke rregulluar gjerësinë për secilin element.
| I hollë | Really Really Really Wide |
|---|---|
| Pak |
Siç mund ta shihni, në rastin e parë, ne nuk kemi aplikuar gjerësi td CSS ose HTML. Çfarë do të bëjë shfletuesi me një tabelë të tillë?
| I hollë | Really Really Really Wide |
| Pak |
Shfletuesi ka ndarë shumë më tepër hapësirë për kolonën e dytë sesa për të parën. Tani le të bëjmë të njëjtën gjë, por përdorim atributin gjerësi për të detyruar kolonat të kenë të njëjtën madhësi:
| I hollë | Really Really Really Wide |
|---|---|
| Pak | Shumë e shumë, shumë e shumë përmbajtje, aq shumë sa mund të kemi nevojë edhe për një ndërprerje rreshti. |
Në të dyja rastet, shfletuesi duhet t'i japë çdo kolone të njëjtën gjerësi. Por tabela e parë duhet të ndryshojë madhësinë automatikisht për të mbushur hapësirën e disponueshme, ndërsa e dyta ka një gjerësi fikse.
| I hollë | Really Really Really Wide |
| Pak | Shumë e shumë, shumë e shumë përmbajtje, aq shumë sa mund të kemi nevojë edhe për një ndërprerje rreshti. |
Shumë mirë. Fatkeqësisht, ky është HTML i pavlefshëm sepse tabela HTML gjerësia është zhvlerësuar. Por ju mund të bëni të njëjtën gjë me kod i thjeshtë CSS:
| I hollë | Really Really Really Wide |
|---|---|
| Pak |
Le të shohim se si shfletuesi do të japë një tabelë duke përdorur CSS në vend të atributit width:
| I hollë | Really Really Really Wide |
| Pak | Shumë e shumë, shumë e shumë përmbajtje, aq shumë sa do të kërkojë një ndërprerje rreshti. |
Lartësia e rregullueshme e rreshtit të tavolinës
Një atribut tjetër i lidhur ngushtë me gjerësinë është lartësia ( lartësia). Ky atribut është gjithashtu i vjetëruar, kështu që nuk duhet të përdoret. Por meqenëse po flasim për rregullimin e gjerësisë së kolonave, duhet të konsiderojmë gjithashtu rregullimin e lartësive të rreshtave. Ja se si bëhej më parë me atributin e vjetëruar:
| I hollë | Really Really Really Wide |
|---|---|
| Pak | Shumë e shumë, shumë e shumë përmbajtje, aq shumë sa do të kërkojë një ndërprerje rreshti. |
Si e shfaq shfletuesi këtë shembull:
Për të qenë i sinqertë, nuk mund ta imagjinoj pse ka nevojë për të kontrolluar lartësinë e linjës duke përdorur HTML td gjerësi. Ka shumë më tepër kuptim të personalizosh pjesën e jashtme dhe mbushje e brendshme për përmbajtjen e elementit
Parametrat
align Përcakton shtrirjen horizontale të përmbajtjes së qelizës. sfondi Përcakton imazhin e sfondit në qelizë. bgcolor Ngjyra e sfondit të qelizës. bordercolor Ngjyra e kufirit. colspan Lidh qelizat horizontale. lartësia Lartësia e qelizës. nowrap Parandalon mbështjelljen e linjës. rowspan Lidh qelizat vertikale. valign Rreshtimi vertikal i përmbajtjes së qelizës. gjerësia Gjerësia e qelizës.Etiketa e fundit
Nuk kërkohet.
Shembull 1. Përdorimi i një etikete
| ... | |
| ... | ... |
Përshkrimi i parametrave të etiketës
Parametri ALIGN
HTML:
3.2
4
XHTML:
1.0
1.1
Përshkrim
Përcakton shtrirjen horizontale të përmbajtjes së qelizës.
Sintaksë
...
Argumentet
majtas Rreshton përmbajtjen e qelizës në të majtë. Rreshtimi në qendër në qendër. djathtas Rreshton djathtas. justifikoni Arsyetoni gjerësinë (djathtas dhe majtas në të njëjtën kohë). Vlera e paracaktuar
CSS analoge
Parametri ALIGN
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Përshkrim
Përcakton shtrirjen horizontale të përmbajtjes së qelizës.
Sintaksë
Shembulli 2. Përafrimi i përmbajtjes së një qelize
| ... | ... |
Parametri i Sfondit
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Përshkrim
Specifikon imazhin që do të përdoret si imazhi i sfondit të qelizës së tabelës. Ndryshe nga imazhet e zakonshme, sfondi nuk vendoset në gjerësi dhe lartësi dhe shfaqet gjithmonë në madhësinë e plotë dhe shkallëzohet në 100%. Nëse fotografia është në madhësi më të vogël se gjerësia ose lartësia e qelizës, atëherë fotografia përsëritet horizontalisht djathtas dhe poshtë, duke u rreshtuar si një mozaik. Për këtë arsye, në kryqëzim fotot e sfondit mund të ketë rënie të dukshme që janë të dukshme për vizitorët e faqes. Kur zgjidhni një imazh të sfondit, sigurohuni që të ketë kontrast të mjaftueshëm midis tij dhe përmbajtjes së qelizës. Lejohet përdorimi i imazheve të animuara si sfond në Formati GIF por ato shpërqendrojnë vëmendjen e lexuesve.
Sintaksë
Argumentet
Çdo adresë e vlefshme imazhi - mund të përdorni një shteg relative ose absolute.
Vlera e paracaktuar
CSS analoge
sfond-imazh
Shembull 3. Letër-muri në një qelizë
| sfond = "/ imazhe / rregullat.gif"> ... |
Parametri BGCOLOR
Përshkrim
Vendos ngjyrën e sfondit të qelizës.
Sintaksë
Argumentet
Vlera e ngjyrës mund të vendoset në dy mënyra.
1. Me emrin e saj
Shfletuesit mbështesin disa ngjyra me emër.
2. Sipas vlerës heksadecimal
Numrat heksadecimal përdoren për të vendosur ngjyrat. Sistemi heksadecimal, ndryshe nga sistemi dhjetor, bazohet, siç sugjeron emri i tij, në numrin 16. Numrat do të jenë si më poshtë: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9. , A, B, C , D, E, F. Shifrat 10 deri në 15 zëvendësohen me shkronja latine... Numrat më të mëdhenj se 15 në heksadecimal formohen duke kombinuar dy numra në një. Për shembull, dhjetori 255 korrespondon me FF in sistemi heksadecimal... Për të shmangur konfuzionin në përcaktimin e sistemit të numrave, më parë numër heksadecimal përdorni simbolin hash #, për shembull # 666999. Secila nga tre ngjyrat - e kuqe, jeshile dhe blu - mund të variojë nga 00 në FF. Kështu, emërtimi i ngjyrës ndahet në tre komponentë #rrggbb, ku dy karakteret e para shënojnë përbërësin e kuq të ngjyrës, dy të mesit - jeshile dhe dy të fundit - blu.
Vlera e paracaktuar
Varet nga shfletuesi dhe versioni i tij, i përdorur zakonisht Ngjyra e bardhë sfond.
CSS analoge
ngjyrë e sfondit
Shembulli 4. Ngjyra e sfondit të qelizës
| ... |
| ... |
Parametri BORDERCOLOR
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Përshkrim
Vendos ngjyrën e kufirit rreth qelizës. Korniza shfaqet kur instalohet parametri i kufirit me një vlerë jo zero për etiketën
| ... | ||||||||||||||||||
| ... | ... |
Parametri COLSPAN
Oriz. 1. Një shembull i një tabele ku përdoret lidhja horizontale e qelizave
Tabela në figurën 1 përmban dy rreshta dhe dy kolona, me qelizat e sipërme horizontale të lidhura duke përdorur parametrin colspan.
Sintaksë
Argumentet
Vlera e paracaktuar
Shembulli 6. Bashkimi i qelizave
| qeliza 1 | |
| qeliza 2 | qeliza 3 |
Parametri LARTËSIA
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Përshkrim
Vetë shfletuesi vendos lartësinë e tabelës dhe qelizave të saj bazuar në përmbajtjen e tyre. Sidoqoftë, përdorimi i parametrit të lartësisë do të ndryshojë lartësinë e qelizave. Këtu ka dy mundësi. Nëse vlera e lartësisë është më e vogël se përmbajtja e qelizës, atëherë ky parametër do të shpërfillet. Kur lartësia e qelizës vendoset të jetë më e lartë se përmbajtja e saj, shtohet hapësira vertikale e bardhë.
Sintaksë
Argumentet
Vlera e paracaktuar
Lartësia llogaritet në bazë të përmbajtjes së qelizës.
CSS analoge
Shembulli 7. Lartësia e qelizës
| ... |
Parametri NOWRAP
Përshkrim
Shtimi i një parametri nowrap në një etiketë
Sintaksë
Argumentet
Vlera e paracaktuar
Opsioni nowrap nuk është vendosur si parazgjedhje.
CSS analoge
Shembulli 8. Përdorimi i parametrit nowrap
| ... |
Parametri ROWSPAN
Oriz. 2. Një shembull i një tabele ku përdoret lidhja vertikale e qelizave
Në atë të paraqitur në Fig. Tabela 2 përmban dy rreshta dhe dy kolona, me qelizat vertikale të majta duke u bashkuar duke përdorur parametrin e hapësirës së rreshtit.
Sintaksë
Argumentet
Çdo numër i plotë pozitiv më i madh se 2.
Vlera e paracaktuar
Shembulli 9. Bashkimi i qelizave
| qeliza 1 | qeliza 2 |
| qeliza 3 |
Parametri VALIGN
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Përshkrim
Vendos shtrirjen vertikale të përmbajtjes së qelizës. Si parazgjedhje, përmbajtja e një qelize është e përqendruar vertikalisht.
Sintaksë
Argumentet
lart Rreshton përmbajtjen e qelizës në krye të rreshtit. mes Rreshtoni në mes. fund Rreshton në fund. bazë Rreshton me vijën bazë, e cila ankoron përmbajtjen e qelizës në një rresht të vetëm.Vlera e paracaktuar
CSS analoge
Shembulli 10. Rreshtimi në një qelizë
| ... | ... |
Parametri WIDTH
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Përshkrim
Përcakton gjerësinë e qelizës. Nëse gjerësia totale e përmbajtjes tejkalon gjerësinë e specifikuar të qelizës, atëherë shfletuesi do të përpiqet të "shtrydhë" në dimensionet e dhëna duke formatuar tekstin. Në rastin kur kjo nuk është e mundur, për shembull, ka imazhe në qelizë, parametri i gjerësisë do të shpërfillet dhe gjerësia e re e qelizës do të llogaritet në bazë të përmbajtjes së saj.
Sintaksë
Argumentet
Çdo vlerë e plotë në pixel ose një përqindje e hapësirës së disponueshme.
Vlera e paracaktuar
Gjerësia llogaritet në bazë të përmbajtjes së qelizës.
CSS analoge
Shembulli 11. Gjerësia e qelizave
| ... | ... |
Etiketat e tabelave
Align atribut
atribut rreshtoj vendos shtrirjen në qelizë. Më poshtë është një tabelë vlerash dhe një shembull:
| Qeliza 1 | Qeliza 2 |
Atributi i sfondit
atribut sfond përcakton imazhin që do të vendoset në qelizë. Analogu në CSS është pronë sfond-imazh... Ja një shembull:
| Qeliza 1 | Qeliza 2 |
Atributi Bgcolor
atribut bgcolor shton një ngjyrë të sfondit në qelizën e specifikuar. Vlera duhet të specifikojë ngjyrën e sfondit. Analogu në CSS është pronë ngjyrë e sfondit... Ja një shembull:
| Qeliza 1 | Qeliza 2 |
Atributi Colspan
atribut colspan përdoret për të kombinuar qelizat horizontalisht. Atributi përdoret shpesh, për ta kuptuar atë, merrni parasysh një shembull:
| Rreshti 1 | ||
| Rreshti 2 | Rreshti 2 | |
| Rreshti 3 | Rreshti 3 | Rreshti 3 |
Atributi i lartësisë
atribut lartësiaështë përgjegjës për lartësinë e qelizës. Pranon vlerat në piksel dhe përqindje. Është e vjetëruar dhe konsiderohet se është më mirë të përdoret CSS, me të cilën jam dakord. Ja një shembull:
| Qeliza 1 | Qeliza 2 |
Atributi Rowspan
atribut shtrirja e rreshtaveështë përgjegjës për bashkimin vertikal të qelizave. Atributi është i dobishëm për krijimin e tabelave komplekse. Ja një shembull:
| Qeliza 1 | Qeliza 2 |
| Qeliza 3 |
Atributi Valign
atribut valign të aplikojnë për shtrirje vertikale përmbajtjen e qelizave. Më poshtë është një tabelë vlerash dhe një shembull:
| Hej | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dhe egestas orci. Vivamus vitae pretium neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut finibus commodo nibh, në accumsan nulla finibus në. Etiam nec lacus eu turpis volutpat sodale. Ut pretium dui lacus, non commodo est malesuada placerat. Nulla bibendum quam elit, në placerat ex placerat ut. Curabitur non aliquet masë. Cum sociis natoque penatibus et magnis dis lindore montes, nascetur ridiculus mus. Nam gravida mi quis enim vulputate, sed convallis magna ultrices. Proin purus enim, fermentum vel tincidunt id, bibendum eget felis. |
Atributi i gjerësisë
atribut gjerësiaështë përgjegjës për gjerësinë e qelizës. Pranon vlerat në piksel dhe përqindje. Është e vjetëruar dhe konsiderohet se është më mirë të përdoret CSS, me të cilën jam dakord. Ja një shembull:
| Qeliza 1 | Qeliza 2 |
Përshëndetje të dashur lexues të faqes së blogut. Unë sjell në vëmendjen tuaj një artikull tjetër, i cili do t'i kushtohet asaj se çfarë është një tabelë në Html, çfarë etiketash përdoren për ta krijuar atë (Tr, Th, Td, Tabela, Colspan, Cellpadding, Cellspacing), si të vendosni një sfond dhe kufij për të, dhe shumë më tepër.
Përkundër faktit se paraqitja e tabelës së faqes () në gjuha html() zëvendësohet sistematikisht nga blloku, ju ende duhet të dini etiketat kryesore dhe aftësinë për të personalizuar tabelat. Për shembull, motori ende përdor paraqitjen e vjetëruar, dhe nëse doni të bëni ndonjë ndryshim në pamjen faqet e saj, kjo njohuri do t'ju ndihmojë.
Madje futja më e thjeshtë hit counter code mund t'ju kërkojë të kuptoni parimet e ndërtimit të tabelave në html. Më lejoni t'ju kujtoj se tashmë kemi arritur të marrim parasysh, po ashtu.
Tabelat në Html - Elementet Tabela, Tr, Th, Td
Në ditët e sotme, faqosja e tabelës është zbehur në sfond me ardhjen e CSS, por megjithatë, shpesh është më në një mënyrë të përshtatshme prezantimi i informacionit është ende një pjatë e mirë e vjetër dhe ju ende duhet të dini etiketat kryesore të tij.
Më herët, më parë Injeksion CSS, webmasterët nuk mund të bënin fare pa to, sepse e gjithë faqosja e faqeve bazohej në to. Ne përdorëm jo vetëm etiketat bazë Table, Tr, Th dhe Td, por edhe të gjithë gamën e pasur të elementeve ndihmëse (Col, Tbody, Caption, Rowspan, Colspan, etj.). Ju ende mund të gjeni në faqet e internetit dhe forumet e krijuara në bazë të paraqitjes së tabelave, të cilat mund të shërbejnë si një nxitje shtesë për ju për të mësuar bazat e ndërtimit të tyre.
Tabelat në gjuhën Html janë një element i veçantë, sepse në thelb elementi Table është një element blloku, por në të njëjtën kohë nuk zë të gjithë hapësirën e disponueshme për të në gjerësi, siç bëjnë të tjerët. elementet e bllokut... Në gjerësi, ajo merr vetëm hapësirën që nevojitet për të akomoduar përmbajtjen - jo më shumë, as më pak.
Sidoqoftë, etiketa Table përndryshe do të sillet saktësisht si një element blloku. Për shembull, shenjat që ndjekin njëra pas tjetrës në kod do të jenë në faqen e internetit të vendosen njëra nën tjetrën, edhe nëse madhësia e tyre do t'i lejonte ata të ishin në të njëjtën linjë. Një veçori tjetër është se ato kanë një strukturë mjaft komplekse, në të cilën lehtë mund të hutoheni.
Ato formohen sipas parimit të mëposhtëm. E gjithë tabela është e përshtatur nga etiketat e tabelës hapëse dhe mbyllëse, brenda së cilës, duke përdorur Tr, krijohen rreshtat e saj, për shembull, si kjo:
Por tashmë brenda Tr, qelizat krijohen duke përdorur Td. Ato gjithashtu mund të krijohen duke përdorur Th, dhe ndryshimi midis këtyre qelizave nga ato të krijuara duke përdorur elementët Td do të jetë thjesht vizual. Funksionalisht, elementët Td dhe Th funksionojnë në të njëjtën mënyrë.
Por përmbajtja (përmbajtja) e qelizës së krijuar me etiketën Td do të lihet e rreshtuar, dhe përmbajtja e qelizës së krijuar me Th do të jetë e përqendruar dhe gjithashtu e theksuar në fontin e përdorur. Vetë elementët Th u prezantuan pikërisht për të siguruar titujt e kolonave dhe rreshtave për tabelat.
Dhe është brenda qelizave Td ose Th që përmbajtja është. Gjithçka që shihni në faqen e internetit brenda tabelës do të vendoset saktësisht brenda qelizave, të cilat formohen nga hapja dhe mbyllja e etiketave Td ose Th:
Por në vetvete, krijimi i pllakave ndodh rresht pas rreshti - hapni Tr, dhe më pas mbyllni Tr. Sa çifte të tilla elementësh Tr keni, sa rreshta merrni. Sa kolona do të ketë?
Saktësisht aq sa krijoni në çdo rresht (Tr) qelizash (Td ose Th). Nëse dëshironi të bëni një pllakë të thjeshtë dhe simetrike (shih figurën e mësipërme), atëherë duhet të bëni të njëjtë numrin e qelizave (Td ose Th) në secilën rresht.
Pra, tabelat në Html formohen rresht pas rreshti - Tr janë përgjegjës për formimin e rreshtave, dhe Td ose Th janë përgjegjës për formimin e kolonave. Ajo që vlen të përmendet, brenda Td ose Th, mund të futni absolutisht çdo përmbajtje - tekst, elementë inline ose bllok (, imazhe me ndihmë, tituj, paragrafë), etj.
Se. rezulton se nuk mund të ketë një tabelë në kodin Html që do të përbëhet nga më pak se tre elementë - Tabela, Tr, Td (ose Th).
Tabela - elementi kryesor i tabelës
Le të fillojmë duke parë etiketën Table, përkatësisht atributet që ka:
Në fakt, këto nuk janë të gjitha atributet, por vetëm ato më të rëndësishmet dhe më të përdorurat ky moment... Maksimumi informacion i detajuar nga të gjitha llojet e atributeve të etiketës Table, si dhe çdo element tjetër.
Sepse tabela është një element blloku që nuk kërkon të zërë të gjithë hapësirën e disponueshme në gjerësi, që do të thotë se ne mund të aplikojmë shtrirje horizontale te etiketa Table duke përdorur atributin Rreshtoni.
Por gjithçka nuk është aq e thjeshtë këtu, sepse përdorimi i vlerave majtas dhe djathtas në Align nuk do të çojë në shtrirjen e pllakës sonë në skajin e majtë ose të djathtë, por në mbështjelljen e tekstit rreth tij, në analogji të plotë me atë që pamë. në të. Epo, nëse përdorni vlerën Qendra për Align, ajo thjesht do të përqendrohet pa asnjë mbështjellje.
Nëpërmjet Atributi i gjerësisë ju mund të vendosni gjerësinë e tabelës, ndërsa mund të përdorni të dyja vlerat absolute në piksel dhe relative në përqindje (100% do të korrespondojë me të gjithë hapësirën e disponueshme në gjerësi).
Shkoni përpara. Mbushje celulare ju lejon të vendosni dhëmbëzimin e përmbajtjes në qeliza (Td ose Th) nga skajet e saj (në të katër anët në të njëjtën kohë) dhe Cellspacing ju lejon të vendosni distancën midis qelizave ngjitur të tabelës në piksel (parazgjedhja është dy piksel) . Unë mendoj se ideja është e qartë, por megjithatë do të jetë më e qartë ta tregojmë këtë me një shembull:
Atributet e mëposhtme të etiketës Table janë përgjegjëse për sfondin e tabelës sonë - këto janë elementet Bgcolor dhe Background. Siç e mbani mend me siguri, me ndihmën e Sfondit (i cili, nga rruga, përdoret vetëm në etiketën dhe elementët Body - Tabela, Tr, Th ose Td), mund të zgjidhni çdo foto nga skedari si sfond, shtegun. të cilit do t'i specifikohet si vlerë ky atribut.
Kjo foto, si një pllakë, do të mbulojë të gjithë faqen e internetit (në rast Etiketa e trupit) ose të gjithë tabelën (në rastin e Tabelës), për shembull, si kjo:
Kur përdorni atributin Bgcolor në një tabelë, do t'ju duhet të specifikoni ngjyrën me të cilën dëshironi të mbushni tabelën tuaj si vlerë. shikoni lidhjen e dhënë.
Shkoni përpara. Më pas në rresht kemi një atribut Kufiri, e cila është përgjegjëse për formimin e kornizës. Ka hollësi në shpjegimin e vizatimit të kornizave, por për thjeshtësi, mund të themi se korniza do të vizatohet rreth qelizave dhe rreth vetë tabelës. Në Border, do të mund të vendosni trashësinë e këtij kufiri në piksel. Si parazgjedhje, nuk vizatohet asnjë kufi (kufiri = 0).
Por duhet pasur parasysh se në Korniza HTML tavolina është e stampuar. Ai do të ketë ngjyrat e anëve të lehta dhe të errëta, të cilat duken si nga rënia këndi i sipërm drita e ekranit. Në këtë drejtim, duhet pasur parasysh se në Border nuk vendosni gjerësinë e të gjithë kufirit. Në këtë trashësi, të lehta dhe ana e erret... Në përgjithësi, është pak konfuze, por duhet parë me një shembull.
Me elementin Table, do të supozojmë se kemi mbaruar dhe është koha për të kaluar te tjetra. E veçanta e Tr është se është thjesht shërbim dhe nuk është i dukshëm në faqen e internetit. Në thelbin e tij, Tr është një enë e padukshme për Td ose Th, e cila do të jetë e vendosur në të.
Tr - elementi i rreshtit të tabelës në Html
Duke përdorur etiketën Tr, ne thjesht vendosim të gjitha qelizat e mbyllura në të (Td ose Th) në një rresht dhe kaq, vetë Tr nuk është e dukshme. Një përfundim i rëndësishëm rrjedh nga kjo - të gjitha atributet e kësaj etikete zbatohen posaçërisht në qelizat e mbyllura në këtë enë. Atributet më të përdorura aktualisht Tr janë paraqitur në figurë:
Align punon në të në të njëjtën mënyrë si për paragrafët ose titujt, përmbajtja në të gjitha qelizat (Td ose Th) të një rreshti të caktuar (Tr) është rreshtuar majtas ose djathtas ose në qendër.
Valign vendos shtrirjen vertikale të përmbajtjes në të gjitha qelizat (Td ose Th) të rreshtit të dhënë (Tr). Vlerat e sipërme, të mesme dhe të poshtme vendosin shtrirjen në pjesën e sipërme, të mesme dhe të poshtme, përkatësisht. Shtrirja e paracaktuar është në mes të lartësisë - Mesi.
Vlera Baseline specifikon përafrimin e tekstit në Td ose Th të rreshtit të dhënë me vijën bazë të shkronjave. Kjo mund të jetë e përshtatshme kur keni qeliza të ndryshme teksti ka madhësi të ndryshme font, dhe rreshtimi Baseline në Valign do ta bëjë një tabelë të tillë më të përdorshme për lexuesit (për mendimin tim):
Vetëm rreshtat e parë të përmbajtjes në qeliza (Td ose Th) do të përputhen me vijën bazë të shkronjave, dhe të gjitha linjat e tjera të përmbajtjes do të renditen ashtu siç janë.
Ju gjithashtu mund të përdorni atributin Bgcolor në etiketën Tr, duke i mbushur këto rreshta me ngjyrën e sfondit që dëshironi. Se. të gjitha qelizat në këtë rresht janë të mbushura me ngjyrën e zgjedhjes suaj:
Siç mund ta shihni, është Td ose Th brenda këtij elementi Tr që është e mbushur me ngjyrën e sfondit, sepse vetë linja nuk është e dukshme në pllakë.
Td ose Th - elementet e qelizave të tabelës në HTML
Epo, tani le të kalojmë te elementi më i rëndësishëm - qeliza, përkatësisht te atributet e etiketave Td dhe Th, të cilat janë ende në përdorim sot:
Align dhe Valign në etiketat Td ose Th i tregojnë shfletuesit saktësisht se si duhet të rreshtohet përmbajtja në gjerësi dhe lartësi, dhe jo në të gjithë rreshtin, siç kemi konsideruar së fundmi. Për më tepër, atributet e një qelize specifike do të kenë përparësi atribute të ngjashme vargjet.
ato. në të gjithë rreshtin, përmbajtja e qelizave mund të rreshtohet djathtas, por në ndonjë rresht të veçantë mund të vendosni një shtrirje të ndryshme dhe do të ketë përparësi (ndërprerje) ndaj shtrirjes që ishte vendosur në etiketën Tr.
Gjerësia dhe Lartësia ju lejojnë të vendosni lartësinë dhe gjerësinë e qelizës, si në piksel ashtu edhe në përqindje (në gjerësi). Bgcolor dhe Sfondi në elementët Html Td ose Th ju lejojnë të vendosni një sfond të veçantë (në formën e një ngjyre ose një fotografie) për çdo qelizë specifike:
Nowrap në Td ose Th ndalon transferimin e përmbajtjes në një qelizë në linjë e re, përveç nëse kjo përmbajtje gjendet në tekst. Dmth në këtë rast karaktere të hapësirës së bardhë nuk do të përdoret për mbështjelljen automatike të tekstit. Ndoshta, ky atribut mund të konsiderohet si një lloj analog i atij të përshkruar.
Epo, këtu jemi me ju për atribute shumë interesante dhe, më e rëndësishmja, të dobishme - Colspan dhe Rowspan. Ata nënkuptojnë mbulim. Hapësira e rreshtit është hapësira e linjës dhe Colspan është hapësira e kolonës. Ato shërbejnë, përkatësisht, për të kombinuar qelizat në një kolonë ose në një rresht.
Nëse dëshironi të kombinoni disa qeliza në një kolonë të tabelës, atëherë do t'ju duhet të përdorni Rowspan, sepse ju shtrini linja të shumta me një qelizë. Dhe nëse doni të kombinoni disa qeliza me radhë, atëherë do t'ju duhet të përdorni Colspan, sepse për të shtrirë një qelizë ju nevojiten disa kolona.
Colspan dhe Rowspan janë si parazgjedhje e barabartë me një, d.m.th. çdo qelizë i referohet një kolone dhe një rreshti. Sapo të keni bashkuar qelizat, ato tashmë fillojnë t'u referohen disa kolonave ose disa rreshtave (ose të dyjave në të njëjtën kohë).
Caption - mbishkrimi i tabelës
Ekziston edhe një element shtesë i quajtur "Html header tabela" dhe është formuar duke përdorur etiketat Caption. Ky element përdoret jo më shumë se një herë (ose nuk përdoret fare) dhe vendoset menjëherë pas etiketës së tabelës hapëse. Vetëm përmbajtja inline mund të jetë brenda nëntitullit dhe nuk duhet të ketë asnjë element blloku në të.
Pozicioni i titrave mund të vendoset duke përdorur atributin Align. Vlerat e sipërme dhe të poshtme do të vendosin pozicionin e kokës, përkatësisht, sipër dhe poshtë tabelës. Vlerat e majta dhe të djathta nuk përdoren tani, sepse punojnë krejtësisht ndryshe në shfletues të ndryshëm... Do të ishte më mirë t'i harroni ato. ato. në në përgjithësi mbishkrimi mund të vendoset vetëm ose nën shenjën, ose mbi të (kjo vlerë përdoret si parazgjedhje):
Në përgjithësi, mund të jepni bllok diagramin e mëposhtëm të ndërtimit:
Le të marrim tani një shembull se si mund të krijoni një tabelë me qeliza me madhësi të ndryshme, disa prej të cilave do të përfshijnë kolona ose rreshta të shumëfishtë. Siç thamë me ju pak më parë, ato krijohen rresht pas rreshti në Html. Le të mbështetemi në paraqitjen e treguar në figurën pak më lart.
Si fillim shkruajmë etiketën hapëse Table dhe menjëherë pas saj hapim etiketën e rreshtit të parë Tr. Rreshti i parë i tabelës sonë të ardhshme përbëhet nga një qelizë që përfshin dy kolona njëherësh, kështu që atributi Colspan = 2 do të duhet të shtohet në etiketën e kësaj qelize:
Më pas mbyllim etiketën e rreshtit të parë (Tr) dhe hapim etiketën e rreshtit tjetër, i cili tashmë do të ketë dy qeliza. Qeliza e parë e rreshtit të dytë nuk është e dukshme dhe do të përbëhet nga etiketat e zakonshme të shkëputjes ose mbylljes Td ose Th, midis të cilave do të mbyllet përmbajtja e saj.
Por qeliza e dytë e rreshtit të dytë është e jashtëzakonshme, sepse përfshin dy rreshta njëherësh, dhe për këtë arsye do të na duhet të shtojmë atributin Rowspan = 2 në etiketën e tij:
Epo, dhe ne duhet të përshkruajmë vetëm rreshtin e tretë. Qeliza e parë e kësaj rreshti, përsëri, nuk përfaqëson asgjë të veçantë, por e dyta tashmë është përshkruar nga ne në rreshtin e dytë, që do të thotë se nuk do të jetë më këtu. Çdo qelizë mund të përshkruhet vetëm një herë. shpresoj se kjo është e qartë. Se. rreshti i tretë i tabelës do të duket kështu:
Epo, tani le t'i kombinojmë të gjitha këto në një kod dhe të shohim se çfarë ndodh:
Në fakt, doli ashtu siç e kishim planifikuar. Është e qartë se këtu nuk ka asgjë të komplikuar - mjafton të kuptojmë logjikën e funksionimit të atributeve Colspan dhe Rowspan.
Paraqitje tabelare (e vjetëruar).
Tani le të flasim për një koncept të tillë si paraqitja e tabelës dhe pse saktësisht ata u bënë mjeti kryesor në gjuhën e shënjimit të hipertekstit në mungesë të CSS (tani, natyrisht, kudo). Gjë është se vetëm tabelat bënë të mundur zgjidhjen mjaft të thjeshtë dhe fleksibël të problemit kryesor në paraqitjen e faqes - vendosjen e elementeve të bllokut në një rresht në kodin Html.
Siç e dini tashmë, elementët e bllokut, kur vendosen njëri pas tjetrit në kodin Html, do të vendosen njëri nën tjetrin dhe në faqen e internetit. Nga rruga, të njëjtat shenja janë gjithashtu elementë blloku dhe mund të përdorni dy metoda për t'i vendosur ato në një rresht.
E para prej tyre konsiston në përshkrimin e të parës nga tabelat me atributin Align me vlerën Left në etiketën Table, si rezultat i së cilës e dyta tashmë do të qëndrojë në të djathtë të së parës dhe do të struket kundër saj. Pasi të kemi regjistruar Align = majtas dhe të dytin në etiketën Table, mund të vendosim deri në tre pjesë në një rresht.
Por mënyra e parë nuk na lejon t'i largojmë ato nga njëri-tjetri, sepse në atë kohë CSS nuk ishte përdorur ende. Prandaj, mënyra më e përshtatshme për të vendosur disa tabela (ose ndonjë element tjetër blloku) në një rresht ishte krijimi i një Tabele me një rresht (Tr) dhe numrin e qelizave që na duhen (Td ose Th), në përpjesëtim me numrin e bllokut. elementet që do të na duhet t'i vendosim në një rresht.
Pra, për vendosjen më të thjeshtë të disa pjesëve me radhë, do t'ju duhet të krijoni të ashtuquajturat tabela të mbivendosura, kur një qelizë tjetër futet si përmbajtje në një qelizë:
Tani te Elementet HTML, të vendosura në qelizat e tabelës që krijuam, do të jetë e mundur të aplikohen të gjitha atributet e përshkruara më sipër, si për etiketat Tr ashtu edhe për etiketat Td ose Th. Do të jetë e mundur të poziciononi përmbajtjen në qeliza, të vendosni dhëmbëzimet e nevojshme, të mbushni me një sfond, etj.
ato. tani pa duke përdorur CSS(që nuk ekzistonte më parë) ju mund të rreshtoni përmbajtjen (elementët tanë të bllokut), dhe duke e bërë kornizën e pllakës të padukshme, ne mund ta pozicionojmë përmbajtjen në faqen e internetit. Për shembull, nuk do të jetë e vështirë të krijosh një prezantim me tre kolona të tekstit, ose, në përgjithësi, çfarëdo që të dojë zemra.
Nëse hapni burimi të ndonjë faqeje të vjetër, apo edhe më mirë një forumi, atëherë me një shkallë të lartë probabiliteti do të shihni atje shumë pllaka të mbivendosura në të tjera dhe kështu me radhë deri në konfuzion të plotë.
Në paraqitjen tabelare, ndërtime të tilla përdoreshin kudo dhe disa vendime të asaj kohe, të cilat tani do të bëheshin brenda një kohe të shkurtër, kërkonin dizajne shumë të rënda nga pllakat e vendosura brenda njëra-tjetrës. Në tavolinë, horizontale dhe menytë vertikale për faqet, ndarjen e paragrafëve me tekste në kolona dhe shumë më tepër
Tbody, Thead dhe Tfoot - kontejnerë për rreshtat në një tabelë Html
Por le të kthehemi përsëri te ramët tanë dhe të shqyrtojmë disa elementë të tjerë që lejuan më parë (kur nuk kishte ende CSS) të vendosnin vetitë menjëherë për një numër i madh linjat në etiketën Table. Tr janë vetë kontejnerë të padukshëm për Td ose Th, por ka tre lloje të tjera kontejnerë që nga ana e tyre shërbejnë si kontejnerë për Tr.
Me ndihmën e tyre, ne do të jemi në gjendje të vendosim pronat menjëherë për grup i madh linjat, për shembull, mbushini ato me një sfond, caktoni shtrirjen e dëshiruar, etj. Po flas për elementë si Thead (për kokën), Tbody (për përmbajtjen) dhe Tfoot (për fundin e tij). Kur krijoni një tabelë, fillimisht shkruhet një grup rreshtash që lidhen me kokën (të mbyllur në etiketat Thead), më pas një grup rreshtash që lidhen me fundin e tij (Tfoot) dhe vetëm më pas një grup rreshtash që lidhen me përmbajtjen e tij kryesore (Tbody ).
V Tabela HTML seksioni Thead mund të regjistrohet vetëm një herë ose mund të mos ekzistojë fare. E njëjta gjë vlen edhe për një enë me elementë Tfoot. Por të paktën një seksion Tbody duhet të jetë i pranishëm.
Por, për shembull, tabelat në këtë faqe shfaqen në mënyrë të përsosur, megjithëse nuk u mërzita të vendosja etiketat e hapjes dhe mbylljes Tbody. Gjithçka është shumë e thjeshtë - kur analizon kodin, vetë shfletuesi shtoi elementët Tbody, të cilat mund të shihen duke parë këtë kod që rezulton:
Por në praktikë, nëse webmasterët e mëparshëm bënin tabela komplekse, atëherë Tbody ishte shumë i dobishëm për ta. Le të themi se keni një tabelë me disa mijëra rreshta dhe duhet të rregulloni shtrirjen në të gjitha qelizat në një mënyrë të ndryshme nga ajo e paracaktuar. Pa përdorimin e Tbody, do t'ju duhet të shtoni atributin e duhur disa mijëra herë në të gjitha etiketat e rreshtave.
Por, në fund të fundit, ju mund t'i mbyllni të gjitha këto mijëra rreshta në një enë Tbody dhe të shkruani vetëm në të atributi i kërkuar me shtrirjen e duhur. Kjo mund të lehtësojë shumë kodin Html nga përsëritjet e panevojshme. Në përgjithësi, në tabela të thjeshta elementët Tbody, Thead dhe Tfoot mund të neglizhohen, por në ato komplekse, përdorimi i tyre është ende i rëndësishëm edhe në kohën tonë, kur ka të tilla mjet i fuqishëm si CSS.
Col - vendosni gjerësinë e kolonave të tabelës
Col dhe Colgroup tani kanë pothuajse të njëjtin ndikim, kështu që le të flasim për përdorimin e tyre duke përdorur elementin Col si shembull. Është e nevojshme për të vendosur me lehtësi gjerësinë e kolonave dhe rreshtave. Col ka dy atribute kryesore, Span dhe Width, të cilat ju lejojnë të vendosni një gjerësi të ndryshme për të gjitha kolonat e mbyllura në etiketat Col.
Span vendos hapësirën (madhësinë e kontejnerit) duke specifikuar numrin e kolonave për të cilat do të aplikohet gjerësia e specifikuar në Gjerësia. Për shembull, si kjo:
ato. Vendosa gjerësinë në 50 piksel për dy kolonat e para të tabelës, 200 pikselë për kolonën e tretë dhe 100 pikselë për dy kolonat e mbetura. Gjithçka është shumë e thjeshtë dhe e drejtpërdrejtë, për mendimin tim. Por në fakt, gjerësia e kolonës, e specifikuar përmes elementeve Col, është vetëm deklarata juaj, sepse kur dritarja e shfletuesit ndryshohet, gjerësia e kolonës do të ndryshojë.
Paç fat! Shihemi së shpejti në faqet e faqes së blogut
mund të shikoni më shumë video duke shkuar te");">
Ju mund të jeni të interesuar
Zgjidh, Option, Textarea, Label, Fieldset, Legend - etiketat Format HTML dropdowns dhe textbox 
Si vendosen ngjyrat në kodin Html dhe CSS, përzgjedhja e hijeve RGB në tabela, Yandex dhe programe të tjera 
MailTo - çfarë është dhe si të krijoni një lidhje në Html për dërgimin e një emaili 
Format HTML për sitin - etiketat Form, Input dhe Select, Option, Textarea, Label dhe të tjera për krijimin e elementeve të formave të internetit
Çdo etiketë
Si të bëni një tabelë në html
Le të japim një shembull, kodin html:
Tabela shembull Kolona 1 Kolona 2
Kushtojini vëmendje qelizës
Tani le të hedhim një vështrim më të afërt në të gjitha atributet e etiketës.
| ose vargje | ||||||||||
| ... | ... |
...
2. Sfondi i pronës = "URL" - vendos foto sfondi... Në vend të URL-së, duhet të shkruhet adresa e imazhit të sfondit. Shembull
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:
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:
|
