Si të vendosni gjerësinë e tabelës.

Një shembull i krijimit të tabelave në HTML

Rezultati në shfletues

Tani le të kontrollojmë supozimet tuaja. Dhe përsëri ju them - mos u përpiqni të mësoni përmendësh gjithçka, mos, gjëja kryesore është të kuptoni. Kështu që:

Etiketë

Etiketë

Kur krijoni tabela, gjithmonë kushtojini vëmendje faktit që të gjitha rreshtat kanë të njëjtin numër qelizash. Sasi të ndryshme nuk është në Gabim HTML, por në raste të tilla, pjata juaj thjesht mund të "shkojë" dhe gjithçka do të shfaqet aspak ashtu siç keni dashur.

Tabelat HTML në qendër, majtas, djathtas

Si parazgjedhje, shfletuesit rregullojnë tabela në anën e majtë elementi prind në të cilën ndodhet. Në shumicën e rasteve, kjo është e mirë, veçanërisht nëse tabela shtrihet në gjerësinë e saj të plotë. Por megjithatë, ndonjëherë ju dëshironi të vendosni një tabelë HTML në qendër ose në të djathtë.

Në të kaluarën, etiketa

Tani do të shpjegoj. Duke përdorur këto vlera, ne ndryshojmë madhësinë e kufijve të jashtëm (mbushjes) të tabelës. Meqenëse tabela është një element HTML i bllokut, dhe blloqet kanë katër anë, parametrat janë specifikuar për të katër anët në drejtim të akrepave të orës: style = "margjina: lart djathtas poshtë majtas"... Epo, çfarë është zero, mendoj se e kuptoni, por "auto" i thotë shfletuesit të llogarisë madhësinë e hapësirës boshe nga kjo anë, bazuar në vlerat e anëve të tjera. Pra, rezulton se nëse ka zero në tre anët, atëherë pjesa tjetër e hapësirës është në të katërtën, dhe nëse "auto" është në të dy anët, atëherë ne ndajmë kufijtë e jashtëm në gjysmë.

Më e rëndësishmja, mos kini frikë të përdorni CSS në vend të HTML të pastër dhe, në shumë situata, "të drurë" dhe të vjetëruar. Meqenëse me këtë ju po investoni në zhvillimin tuaj dhe nuk po ktheheni në sëpata guri! Për më tepër, unë ju paraqes gjithçka "në një pjatë argjendi". :)

Një shembull i vendosjes së një tavoline në qendër

Rezultati në shfletues

Ndryshoni gjerësinë e tabelave dhe qelizave HTML

Si parazgjedhje, shfletuesit llogaritin gjerësinë e një tabele bazuar në përmbajtjen e qelizave të saj, dhe ju mund ta ndryshoni atë duke përdorur atributin gjerësi me të cilin jeni njohur, sintaksa e përgjithshme është:

Megjithatë, nëse gjerësia e specifikuar është më e vogël se e nevojshme për të akomoduar të gjithë përmbajtjen e tabelës HTML, atëherë shfletuesit do ta injorojnë atë dhe do ta rrisin atë në madhësinë e dëshiruar.

Por nuk ka asnjë atribut width për ndryshimin e gjerësisë së qelizave, ose më saktë ishte, por është i vjetëruar, kështu që ne do të aplikojmë përsëri stilet (CSS).

Kornizë tavoline

Nga HTML e paracaktuar tabela në faqen e internetit jepet pa kufi, për të shtuar një kufi në tabelë, si të gjithë elementët e tjerë, përdorni veçorinë kufitare CSS. Por duhet t'i kushtoni vëmendje faktit që nëse i shtoni një kufi vetëm elementit

Për fat të mirë, epoka e vizatimeve me një piksel dhe të gjitha llojet e ndarësve të bazuar në to ka kaluar. Shfletuesit punojnë mjaft saktë me tabelat pa praninë e përmbajtjes së qelizës.

Bashkimi i qelizave

Supozoni se duhet të përdorim lidhjen e disa qelizave në një tabelë, siç tregohet më poshtë. Për më tepër, lartësia e qelizave portokalli dhe gri është e koduar fort dhe është e barabartë me 30 piksele.

dhe	. Tabela, th, td (kufiri: 1px e zezë e fortë;) Provojeni " Tani si tabela ashtu edhe qelizat kanë kufij, ndërsa secila qelizë dhe tabelë kanë kufijtë e tyre. Si rezultat, midis kornizave u shfaq një hapësirë ​​boshe; vetia e ndarjes kufitare ju lejon të kontrolloni madhësinë e kësaj hapësire, e cila është vendosur për të gjithë tabelën. Me fjalë të tjera, ju nuk mund të kontrolloni boshllëqet midis qelizave të ndryshme individualisht. Edhe nëse heqim boshllëqet midis qelizave duke përdorur vlerën 0 të veçorisë së ndarjes kufitare, atëherë kufijtë e qelizave do të prekin njëri-tjetrin, duke u dyfishuar. Vetia e kolapsit të kufirit përdoret për të bashkuar kufijtë e qelizave. Mund të marrë dy vlera: veç: është e paracaktuar. Qelizat janë hartuar në distancë e shkurtër veçmas, çdo qelizë ka kufirin e vet. kolaps: lidh kornizat ngjitur në një, të gjitha boshllëqet midis qelizave, si dhe midis qelizave dhe kornizës së tabelës shpërfillen. Emri Mbiemri Homeri Simpson Marge Simpson Emri Mbiemri Homeri Simpson Marge Simpson provo" Madhësia e tryezës Pas shtimit të kornizave në qelizat e tabelës, u bë e dukshme që përmbajtja e qelizave ishte shumë afër skajeve. Për shtimin hapesire e lire midis skajeve të qelizave dhe përmbajtjes së tyre, mund të përdorni veçorinë e mbushjes: Th, td (mbushje: 7px;) Provojeni " Madhësia e tabelës varet nga përmbajtja e saj, por shpesh lindin situata kur tabela është shumë e ngushtë dhe bëhet e nevojshme ta zgjasni atë. Gjerësia dhe lartësia e tabelës mund të ndryshohen duke përdorur vetitë e gjerësisë dhe lartësisë duke vendosur madhësive të kërkuara ose vetë tabela ose qelizat: Tabela (gjerësia: 70%;) th (lartësia: 50 px;) Provojeni " Rreshtimi i tekstit Si parazgjedhje, teksti në qelizat e kokës së tabelës është i rreshtuar në qendër dhe teksti në qelizat normale është i rreshtuar majtas, duke përdorur veçorinë e rreshtimit të tekstit mund të kontrolloni shtrirjen horizontale të tekstit. Vetia CSS e rreshtimit vertikal ju lejon të kontrolloni shtrirjen vertikale të përmbajtjes së tekstit. Si parazgjedhje, teksti është rreshtuar vertikalisht në qendër të qelizave. Shtrirja vertikale mund të anashkalohet me një nga vlerat për vetinë vertikale të rreshtimit: krye: teksti është rreshtuar në krye të qelizës mes: rreshton tekstin në qendër (parazgjedhja) fund: teksti është rreshtuar në fund të qelizës Emri Mbiemri Homeri Simpson Marge Simpson provo" Alternimi i ngjyrës së sfondit të rreshtave të tabelës Kur skanoni tabela të mëdha që përmbajnë shumë rreshta me sasi e madhe informacion, mund të jetë e vështirë të mbash gjurmët se cilat të dhëna i përkasin një rreshti të caktuar. Për të ndihmuar përdoruesit të lundrojnë, mund të përdorni dy ngjyra të ndryshme sfondi në mënyrë alternative. Për të krijuar efektin e përshkruar, mund të përdorni përzgjedhësin e klasës, duke e shtuar atë në çdo rresht të dytë të tabelës: Emri Mbiemri Pozicioni Homeri Simpson babai Marge Simpson nënë Bart Simpson një djalë Lisa Simpson vajza provo" Shtimi i një atributi të klasës në çdo rresht të dytë është një detyrë e lodhshme. Pseudo-klasa e fëmijës së nëntë është shtuar në CSS3 për të trajtuar këtë çështje në një mënyrë alternative. Efekti i alternimit tani mund të arrihet ekskluzivisht duke përdorur CSS pa pasur nevojë të ndryshoni shënjimin HTML të dokumentit. Me pseudo-klasën: fëmija i nëntë është e mundur të zgjidhni të gjitha rreshtat tek ose çift të një tabele duke përdorur një nga fjalë kyçe: çift (çift) ose tek (tek): Tr: fëmija i nëntë (tek) (ngjyra e sfondit: # EAF2D3;) Provojeni " Ndrysho sfondin e linjës kur rri pezull Një mënyrë tjetër për të përmirësuar lexueshmërinë e të dhënave tabelare është ndryshimi ngjyrë e sfondit linjat kur rri pezull mbi të me kursorin e miut. Kjo do të ndihmojë në nxjerrjen në pah të përmbajtjes së dëshiruar të tabelës dhe në përmirësimin e perceptimit vizual të të dhënave. Është shumë e lehtë të zbatohet ky efekt, për këtë ju duhet të shtoni: rri pezull pseudo-klasën në përzgjedhësin e rreshtit të tabelës dhe vendosni ngjyra e dëshiruar sfond: Tr: rri pezull (ngjyra e sfondit: # E0E0FF;) Provojeni " Shtrirja në qendër të tabelës Rreshtimi HTML përqendrimi i një tabele është i mundur vetëm nëse gjerësia e tabelës është më e vogël se gjerësia e elementit të saj mëmë. Për të rreshtuar tabelën në qendër, duhet të përdorni vetinë e marzhit, duke i vendosur të paktën dy vlera: vlera e parë do të jetë përgjegjëse për mbushje e jashtme tabelat lart dhe poshtë, dhe e dyta është për shtrirjen automatike të qendrës: Tabela (diferenca: 10 px automatike;) Provojeni " Nëse keni nevojë për margjina të ndryshme në krye dhe në fund të tabelës, mund ta vendosni veçorinë marzh në tre vlera: e para do të jetë përgjegjëse për margjinën e sipërme, e dyta për shtrirjen horizontale dhe e treta për margjinën e poshtme: Tabela (diferenca: 10px automatike 30px;) Vlad Merzheviç Kur shtroni duke përdorur tabela, duhet të dini disa nga veçoritë që janë të natyrshme në tabela. Kjo është e nevojshme për të kuptuar se si të ndërtoni një plan urbanistik në një rast ose në një tjetër, të krijoni kod efektiv dhe të parandaloni gabimet e drejtpërdrejta në punë. Besohet se paraqitja e tabelës është më e lehtë se metodat e tjera, si p.sh. përdorimi i shtresave. Sidoqoftë, tabelat janë gjithashtu të mbushura me shumë truke që, në një mënyrë ose në një tjetër, ndikojnë në shfaqjen e faqes. Gjerësia e tabelës Gjerësia e tabelës, nëse nuk specifikohet në mënyrë eksplicite, vendoset nga shfletuesi automatikisht bazuar në përmbajtjen e qelizave. Kur një tabelë përdoret për të krijuar një rrjet referimi në një faqe, kjo qasje nuk është e dëshirueshme sepse varet nga të dhënat e ndryshueshme. Prandaj, gjerësia e tabelës tregohet gjithmonë - si përqindje, nëse përdoret një paraqitje "gome", ose në piksel për një paraqitje gjerësi fikse. Gjerësia e qelizës Gjerësia e qelizave përcaktohet atributin gjerësi etiketë	, dhe kjo vlerë duhet të vendoset nëse do të specifikohet gjerësia e qelizës. Le të shqyrtojmë një shembull të rastit kur duhet të specifikohet madhësia e qelizave. Le të themi se duam të krijojmë dy kolona në një faqe interneti, njëra prej tyre duhet të jetë 200 piksele në madhësi dhe tjetra duhet të zërë hapësirën e mbetur. Krijoni një tabelë me dy qeliza dhe vendosni parametrin gjerësi = "200" për qelizën e majtë (shembulli 1). Nuk ka nevojë të vendosni njësitë, vetë shfletuesi e kupton që nëse specifikohet një numër, atëherë përdoren piksele. Shembull 1. Gjerësia e qelizave Kolona e majtë Kolona e djathtë Meqenëse në këtë shembull, gjerësia e tabelës është specifikuar si 100%, tabela do të marrë të gjithë gjerësinë e lirë të dritares së shfletuesit. ku kolona e majtë merr 200 piksele për vete, dhe e duhura - hapësira e mbetur e lirë. Gjerësia e qelizës ndonjëherë mund të ndryshojë, pavarësisht nga fakti se është specifikuar në mënyrë të ngurtë. Kjo ndodh, për shembull, nëse një fotografi i shtohet një qelize që është më e madhe se gjerësia e qelizës. Për të akomoduar imazhin, qeliza do të detyrohet të zgjerohet. Madhësia e një qelize mund të ndikohet gjithashtu nga përmbajtja e tekstit, e cila përmban një fjalë shumë të gjatë. Për të shmangur këtë situatë, përdoren disa mjete. Mos shtoni imazhe në një qelizë me gjerësi fikse që janë më të mëdha se gjerësia e qelizës. Metoda, natyrisht, tingëllon e rëndomtë, megjithatë, duke ditur tiparet e qelizave, mund të shmangni problemet me shfaqjen e tyre. Për tag përdorni veçorinë e stilit të paraqitjes së tabelës e vendosur në fikse. Përdorimi i kësaj vetie ju lejon të prisni një foto nëse nuk përshtatet plotësisht në qelizë (shembulli 2). Shembulli 2. Vetia tabel-layout ... Rezultati ky shembull treguar në fig. një. Shfletuesit modernë (Firefox 3+, Internet Explorer 8+, Chrome dhe Safari) tregojnë tabelën në një mënyrë paksa të ndryshme (Fig. 2). Oriz. 2. Shfaqja e një fotografie në shfletuesin Safari Përdorni stilin prona e tejmbushjes me rrotullën e vlerës. Kjo veçori shton shirita lëvizës në përmbajtje, por për shkak se zbatohet për elementët e bllokut, nuk mund të përdoret për një etiketë	... Prandaj, duhet ta futni etiketën brenda qelizës dhe vendosni një veçori stili për të (shembulli 3). Kjo sigurisht nuk është plotësisht e saktë dhe e përshtatshme, por mund të japë rezultatin e dëshiruar. Shembulli 3. Shiritat e lëvizjes në qeliza ... Rezultati i këtij shembulli është paraqitur në Fig. 3. Përmbajtja e qelizës Shfletuesit shfaqin një qelizë ndryshe pa asgjë brenda. "Asgjë" në këtë rast do të thotë që asnjë fotografi ose tekst nuk është shtuar në qelizë dhe hapësira nuk merret parasysh. Natyrisht, pamja e qelizave ndryshon vetëm nëse vendoset një kufi rreth tyre. Kur përdorni një kufi të padukshëm, pamja e qelizave, pavarësisht nëse ka diçka në to apo jo, është e njëjtë. Shfletuesit e vjetër nuk shfaqnin ngjyrën e sfondit qeliza boshe të llojit

Për qartësi, kodi për këtë tabelë është paraqitur në shembullin 4.

Shembulli 4. Tabela me qeliza të bashkuara

Megjithëse lartësia e qelizës portokalli duket se është fikse, ajo mund të ndryshojë në mënyrë arbitrare në varësi të sasisë së informacionit në qelizat e tjera. Një shqetësim i ngjashëm shihet në disa shfletues.

Ndërsa kompleksiteti i tabelës rritet për shkak të rritjes së numrit të qelizave dhe lidhjeve të tyre, gjasat e gabimeve në shfaqjen e dokumentit gjithashtu rriten. Për shkak të kësaj, bashkimi vertikal i qelizave përdoret rrallë edhe në rastin kur lartësia e qelizave nuk ka një efekt të rëndësishëm në paraqitjen e faqes.

Për të marrë ende rezultatin e dëshiruar, një tabelë ndahet në disa tabela të vogla ose tabela futet brenda qelizës së një tabele tjetër. Tabelat e mbivendosura janë bërë të përhapura pikërisht për arsyen se japin një rezultat të qëndrueshëm dhe uniform.

Shpejtësia e ngarkimit të tabelës

Derisa tabela të jetë ngarkuar plotësisht, përmbajtja e saj nuk do të fillojë të shfaqet. Fakti është se shfletuesi, përpara se të tregojë përmbajtjen e tabelës, duhet të llogarisë madhësitë e kërkuara të qelizave, gjerësinë dhe lartësinë e tyre. Dhe për këtë ju duhet të dini se çfarë është në këto qeliza. Prandaj, shfletuesi pret derisa të ngarkohet gjithçka në qeliza dhe vetëm atëherë shfaq tabelën.

Bazuar në këtë fakt, tabelat nuk përdoren për ruajtje informacion i madh(nga 100 kB). Dhe për të shpejtuar ngarkimin e paraqitjes së tabelës, ajo ndahet në tabela të veçanta ose përdoret vetia e paraqitjes së tabelës, përdorimi i së cilës ju lejon të rrisni pak shpejtësinë e shfaqjes së përmbajtjes së tabelës.

3.5. Gjerësia dhe lartësia e tabelës dhe qelizave

Gjerësia e tabelës përcaktohet nga atributi width të elementit TABLE. Vlera mund të specifikohet si në njësi absolute (gjerësia = "2 5 0") dhe në njësi relative (gjerësia = "80%"). Për shembull, duke vendosur gjerësinë në 600 piksele, mund të jeni i sigurt që tabela do të përshtatet në dritaren e shfletuesit në çdo rezolucion të monitorit. Nëse gjerësia është e specifikuar në përqindje, atëherë ato llogariten nga gjerësia e dritares së shfletuesit ose nga gjerësia e qelizës së një tabele tjetër në të cilën është futur ajo e dhënë. E njëjta gjë mund të bëhet me lartësinë e tabelës duke përdorur atributin lartësi.

E gjithë sa më sipër vlen edhe për qelizat e tabelës. Ju vetëm duhet të përdorni elementë me atributet e duhura. Në këtë rast, nuk është aspak e nevojshme të specifikoni madhësinë e secilës qelizë individuale. Kur ndryshoni gjerësinë ose lartësinë e një qelize, të gjitha qelizat ngjitur brenda kolonës do të shfaqen me vlerën e re.

Kur vendosni gjerësinë dhe lartësinë e tabelës shumë të vogla, shfletuesi përcakton vlerat minimale që lejojnë që të dhënat të shfaqen normalisht.

Në fig. 3.9 dhe 3.10 tregojnë dy tabela me të njëjtën përmbajtje, por gjerësi dhe lartësi të ndryshme.

Oriz. 3.9. Gjerësia e tabelës është 80% e gjerësisë së dritares së shfletuesit

Oriz. 3.10. Gjerësia dhe lartësia e tabelës është 300 piksele

Gjerësia e tabelës së parë është 80% e madhësisë së dritares së shfletuesit dhe kolona e parë e kësaj tabele është 50% e të gjithë gjerësisë së tabelës. Rreshti i parë është 100 piksele i lartë.

Tabela e dytë është katrore, me gjerësi anësore 300 piksele. Listimet 3.4 dhe 3.5 tregojnë kodet për faqet që përmbajnë tabelat e përshkruara.

Listimi 3.4. Kodi i tabelës 80% i gjerë i gjerësisë së dritares së shfletuesit

Listimi 3.5. Kodi i tabelës me gjerësi 300 pikselësh

Shfletuesi do të shfaqet

Qëllimi i tabelave në html

Karakteristikat dhe parametrat e tabelave html: dhëmbëzimi, gjerësia, ngjyra e sfondit, kufiri (korniza)

gjerësia- gjerësia e tabelës. mund të jetë në piksel ose% të gjerësisë së ekranit.
bgcolor- ngjyra e sfondit të qelizave të tabelës
sfond- plotëson sfondin e tabelës me një figurë
kufiri- korniza dhe kufijtë në tabelë. Trashësia është e specifikuar në pixel.
mbushje celulare- mbushje në pixel midis përmbajtjes së qelizës dhe kufirit të saj të brendshëm
Si më parë, shkruani vlerën e atributit në thonjëza.

Le të shqyrtojmë zbatimin e këtyre atributeve me shembull. Për ta bërë këtë, krijoni një tabelë (por tashmë pa mbishkrimin dhe etiketat th të përdorura jashtëzakonisht rrallë) dhe vendosni parametrin në atribut kufiri (kufiri), gjerësia (gjerësia e tabelës, rreshtit ose qelizës) dhe bgcolor (ngjyra e qelizës)

Si rezultat, shfletuesi do të shfaqë një tabelë të formës së mëposhtme

kornizë- atribut që tregon një kufi rreth tabelës. Ekzistojnë vlerat e mëposhtme:

E pavlefshme - pa kornizë,
sipër - vetëm korniza e sipërme,
poshtë - vetëm korniza e poshtme,
hside - vetëm kornizat e sipërme dhe të poshtme,
vsides - vetëm korniza majtas dhe djathtas,
lhs - vetëm kufiri i majtë,
rhs - vetëm kufiri i djathtë,
kuti - të katër pjesët e kutisë.

rregullat- një atribut që tregon kufijtë brenda një tabele, midis qelizave. Ekzistojnë vlerat e mëposhtme:

Asnjë - nuk ka kufij midis qelizave,
grupet - kufijtë vetëm midis grupeve të rreshtave dhe grupeve të kolonave (do të diskutohet pak më vonë),
rreshtat - kufijtë vetëm midis rreshtave,
cols - kufijtë vetëm midis kolonave,
të gjitha - shfaq të gjitha kufijtë.

Merrni parasysh kodin shembull

Rezultati

Tani le të përpiqemi të krijojmë një tryezë të bukur. Për ta bërë këtë, le të fillojmë të përdorim rreshtimi në tabelë... Për këtë, ekzistojnë parametrat e mëposhtëm tashmë të njohur:

rreshtoj- shtrirje tavoline. Mund të pozicionohet majtas (majtas), djathtas (djathtas), qendër (qendër)
hapësira e qelizave- distanca midis qelizave të tabelës. Specifikuar në piksel (e parazgjedhur 0 piksele)
mbushje celulare- mbushja me pikselë midis përmbajtjes së qelizës dhe kufirit të saj të brendshëm (si parazgjedhje 0 pikselë)
Le të shqyrtojmë një shembull

Shfletuesi shfaq një tabelë të përqendruar që duket si kjo

Vargjet Tr dhe qelizat td në tabelat HTML

rreshtoj- rreshtimi i tekstit brenda qelizës. Majtas, djathtas, qendër
valign- rreshtimi vertikal i tekstit brenda qelizës. Lart (lart), poshtë (poshtë), qendër (në mes)
bgcolor- vendos ngjyrën e vijës
gjerësia- gjerësia e kolonës (të gjitha qelizat më poshtë do të pranojnë këtë parametër) është specifikuar në piksel ose në përqindje, ku 100% është gjerësia e të gjithë tabelës
lartësia- lartësia e qelizës (të gjitha qelizat në rresht do ta pranojnë këtë parametër)

Konsideroni një kod ku përmbajtja e qelizave (td) është rreshtuar në skaje të ndryshme: në të parën në të majtë, në të dytën në të djathtë:

Rezultati

Me ndihmën e tabelave mund të bëni një faqe shumë të mirë. Mos harroni se mund të futni jo vetëm tekst në qeliza, por edhe imazhe, lidhje, etj.!)

Faleminderit per vemendjen! Shpresoj se materiali ishte i dobishëm!

Artikujt kryesorë të lidhur

Zgjedhja e një shpërndarjeje Linux: Rekomandime për një fillestar Cili version Linux është më i miri

Si të gjeni një skedar në një kompjuter Windows Konfigurimi i opsioneve të kërkimit në Windows 7

Si të kontrolloni një kompjuter pa një mi?