Madhësia e kolonës së tabelës HTML.

Vlad Merzheviç

Kur vendosni duke përdorur tabela, duhet të dini disa veçori 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 të caktuar, të krijoni kod efektiv dhe të parandaloni gabimet e drejtpërdrejta në punë. Besohet se paraqitja e tabelës është më e thjeshtë se metodat e tjera, për shembull, përdorimi i shtresave. Sidoqoftë, tabelat janë gjithashtu të mbushura me shumë truke që, në një mënyrë apo tjetër, ndikojnë në shfaqjen e faqes.

Gjerësia e tryezës

Gjerësia e tabelës, përveç nëse specifikohet në mënyrë eksplicite, vendoset automatikisht nga shfletuesi 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ë plan urbanistik "fluid", ose në piksel për një paraqitje gjerësi fikse.

Gjerësia e qelizës

Gjerësia e qelizave përcaktohet nga atributi width të etiketës , dhe kjo vlerë duhet të vendoset nëse duhet të specifikohet gjerësia e qelizës.

Le të marrim një shembull të rastit kur duhet të specifikohet madhësia e qelizës. Le të supozojmë se duhet të krijojmë dy kolona në një faqe interneti, njëra prej tyre duhet të ketë një madhësi prej 200 pikselësh dhe e dyta duhet të zërë hapësirën e mbetur. Ne krijojmë një tabelë me dy qeliza dhe vendosim parametrin width = "200" për qelizën e majtë (shembulli 1). Nuk ka nevojë të vendosni njësitë e matjes, vetë shfletuesi e kupton që nëse specifikohet një numër, atëherë përdoren pikselët.

Shembull 1. Gjerësia e qelizës

Meqenëse gjerësia e tabelës është vendosur në 100% në këtë shembull, tabela do të zërë të gjithë gjerësinë e disponueshme të dritares së shfletuesit. Në të njëjtën kohë kolona e majtë merr 200 piksele, dhe e djathta merr hapësirën e mbetur të 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 është shtuar në një qelizë, madhësia e së cilës tejkalon gjerësinë e qelizës. Për të akomoduar imazhin, qeliza do të detyrohet të zgjerohet. Përmbajtja e tekstit të një qelize që përmban një fjalë shumë të gjatë mund të ndikojë gjithashtu në madhësinë e një qelize.

• Për të shmangur këtë situatë, përdoren disa mjete.
• Imazhet që janë më të mëdha se gjerësia e qelizës nuk shtohen në një qelizë me gjerësi fikse. Metoda, natyrisht, tingëllon e parëndësishme, megjithatë, duke ditur tiparet e qelizave, mund të shmangni problemet me shfaqjen e tyre. përdorni veçorinë e stilit të paraqitjes së tabelës me vlerën fikse .

  Përdorimi i kësaj vetie ju lejon të shkurtoni figurën nëse nuk përshtatet plotësisht në qelizë (shembulli 2).

  ...

  Shembulli 2. Vetia tabel-layout Rezultati ky shembull

  treguar në Fig. 1. Shfletuesit modernë (Firefox 3+, Internet Explorer

  

  8+, Chrome dhe Safari) e tregojnë tabelën pak më ndryshe (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ëvizjeje në përmbajtje, por për shkak se zbatohet për elementët e bllokut, ajo nuk mund të përdoret në një etiketë
    .

  Prandaj, duhet të vendosni një etiketë brenda qelizës

  ...

  dhe vendosni një veti stili për të (shembulli 3). Kjo, natyrisht, nuk është plotësisht e saktë dhe e përshtatshme, por mund të japë rezultatin e kërkuar.

  

  Shembulli 3: Shiritat e lëvizjes në qeliza

  Rezultati i këtij shembulli është paraqitur në Fig. 3.

  Përmbajtja e qelizave Shfletuesit shfaqin ndryshe një qelizë pa asgjë brenda saj. "Asgjë" në këtë rast do të thotë që as foto dhe as tekst nuk është shtuar brenda qelizës 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 ndonjë gjë në to apo jo, është e njëjtë. Shfletuesit e vjetër nuk shfaqnin ngjyrën e sfondit të qelizave të pamjes së zbrazët, kështu që kur ishte e nevojshme të lihej një qelizë pa përmbajtje, por të shfaqej ngjyra e sfondit, një hapësirë ​​jo e ndarë () u shtua brenda qelizës.

  Hapësira nuk është gjithmonë e përshtatshme, veçanërisht kur duhet të vendosni lartësinë e qelizës në 1-2 piksel, kjo është arsyeja pse

  vizatim transparent

  një piksel në madhësi. Në të vërtetë, një fotografi e tillë mund të shkallëzohet sipas gjykimit tuaj, por nuk shfaqet në asnjë mënyrë në faqen e internetit.

  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 funksionojnë mjaft saktë me tabelat edhe pa praninë e përmbajtjes së qelizës.
  Bashkimi i qelizave
  Supozoni se donim të përdorim një bashkim të disa qelizave në një tabelë, siç tregohet më poshtë. Për më tepër, lartësia e qelizave portokalli dhe gri është vendosur në mënyrë të ngurtë dhe e barabartë me 30 piksele.

  Qeliza 1

  Qeliza 2

  Qeliza 3	Qeliza 4
  Për qartësi, kodi për këtë tabelë është paraqitur në shembullin 4.
  Shembulli 4: Tabela me qeliza të bashkuara

  Edhe pse lartësia e qelizës portokalli duket të jetë fikse, ajo mund të ndryshojë në mënyrë arbitrare në varësi të sasisë së informacionit në qelizat e tjera. Një bezdi e tillë shihet në disa shfletues.

  Ndërsa kompleksiteti i tabelës rritet duke rritur numrin e qelizave dhe bashkimet e tyre, gjasat e gabimeve gjatë shfaqjes së dokumentit rriten. Për shkak të kësaj, bashkimi i qelizave vertikalisht përdoret mjaft rrallë dhe në rastet kur lartësia e qelizave nuk ka një ndikim 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 një tabelë është e vendosur brenda një qelize të një tabele tjetër. Tabelat e mbivendosura janë bërë të përhapura pikërisht sepse 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 gjithçka në qeliza të ngarkohet dhe vetëm atëherë shfaq tabelën. Bazuar në këtë fakt, tabelat nuk përdoren për ruajtje shumë informacion

  (nga 100 kB). Dhe për të përshpejtuar 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.

  1. Çfarë janë tabelat HTML dhe pse janë të nevojshme? tabelat html - ky është një nga komponentët më themelorë të çdo faqet html

  dhe në përputhje me rrethanat çdo vend. Për shembull, i gjithë faqja përbëhet nga tabela: fotografi, tekste, lidhje, formularë regjistrimi - gjithçka vendoset në lidhje me njëra-tjetrën duke përdorur tabela html (në fakt, i gjithë faqja ndodhet gjithashtu në një tabelë të madhe).

  2. Çfarë etiketash kanë tabelat html? Etiketa

  , duke përcaktuar tabelën html janë shkruar kështu:

  Por meqenëse e dimë që të gjitha tabelat përbëhen nga rreshta dhe kolona (qeliza), kështu që duhet të vendosim etiketa edhe për to:
  - rreshti i tabelës html

  - kolona (qeliza) e një tabele html.

  Tani le të përpiqemi të kombinojmë të gjitha etiketat në një tabelë. Për ta bërë këtë, ne do të krijojmë një tabelë html që përbëhet nga dy rreshta dhe tre kolona:

  
  
  
  

  Bërja e një tabele të tillë html është shumë e lehtë. Së pari, le të vendosim etiketat e vetë tabelës, brenda së cilës vendosim numrin e kërkuar të rreshtave (në shembullin tonë, 2 rreshta):

  
  
  Pastaj ne ndajmë çdo rresht në qeliza duke përdorur etiketat e kolonave:
  - qeliza 1.1
  - qeliza 1.3
  
  
  - qeliza 2.1
  - qeliza 2.2
  - qeliza 2.3
  
  

  Në fakt, shifra e parë në mbishkrime është numri i rreshtit, dhe i dyti është numri i qelizës (1x2 - rreshti i parë, qeliza e dytë, etj.).

  3. Si të vendosni ngjyrën e sfondit të tabelave html?

  Tani le të kuptojmë se si të vendosim sfondin e tabelës ose secilës qelizë veç e veç.

  Pra, për të vendosur sfondin përdoret atributi bgcolor="background_color".

  Për shembull, nëse duhet të vendosim një ngjyrë për të gjithë shenjën, atëherë e bëjmë kështu:

  bgcolor="background_color">
  
  Pastaj ne ndajmë çdo rresht në qeliza duke përdorur etiketat e kolonave:
  - qeliza 1.1
  - qeliza 1.3
  
  
  - qeliza 2.1
  - qeliza 2.2
  - qeliza 2.3
  
  

  Për shembull, nëse duhet të bëni një shenjë të verdhë, pastaj shkruajmë:

  Nëse është e nevojshme vendosur ngjyra e sfondit një numër i tabelën html, pastaj atributin bgcolor="background_color" aplikoni në etiketë :

  bgcolor="#FFFF00"> bgcolor="#0000FF"> 1.1 1.2 1.3 2.1 2.2 2.3

  1.1	1.2	1.3
  2.1	2.2	2.3

  Në këtë rast, atributi numri i celularit grupe të bardhë teksti i vendosur brenda etiketës.

  Pikërisht në të njëjtën mënyrë është specifikuar ngjyra e secilës qelizë veç e veç. Për shembull, nëse dëshironi të ndryshoni ngjyrën e qelizës 1.2 në blu, atëherë brenda etiketës hapëse atribut bgcolor="background_color":

  4. Si të vendosni madhësinë e gjerësisë dhe lartësisë së qelizave të tabelës html?

  Pra, për të vendosur manualisht gjerësinë dhe lartësinë e qelizave, përdorni atributet lartësi dhe gjerësi. Ato mund të vendosen për të gjithë tabelën, për një rresht ose për një qelizë (kolona). Lartësia dhe gjerësia mund të specifikohen ose në pikselë ose në përqindje. Në rastin tonë, ne do të vendosim gjerësinë dhe lartësinë në pixel për kolonat (qelizat).

  lartësia- një atribut që përcakton lartësinë e qelizës

  gjerësia- atribut që specifikon gjerësinë e qelizës

  Dhe tani për një shembull:

  Tani do të shpjegoj pse vendosim lartësinë e qelizës vetëm një herë në çdo rresht.

  Nëse në një rresht vendosni një lartësi për çdo qelizë më të madhe se për të tjerat, atëherë, pavarësisht kësaj, të gjitha qelizat (kolonat) e rreshtit tuaj do të jenë të barabarta në lartësi me atë më të madhen. Dhe gjerësia e çdo rreshti vendoset më së miri veçmas!

  Ju mund të vendosni lartësinë dhe gjerësinë për të gjithë tabelën. Në këtë rast, të gjitha qelizat (kolonat) dhe rreshtat do ta ndajnë hapësirën e dhënë atyre në mënyrë të barabartë, nëse nuk i vendosni personalisht këto parametra (si përqindje e gjerësisë (lartësisë) totale të tabelës ose në piksel).

  Gjithashtu, shumë shpesh ju duhet të vendosni lartësinë lartësinë dhe gjerësinë e gjerësisë në përqindje:

  përmbajtjen e qelizave

  Nëse e vendosim gjerësinë e një qelize në 40 për qind, si në shembullin tonë, kjo do të thotë se kemi mbetur edhe 60 për qind për qelizat e mbetura, d.m.th. shuma e gjerësisë së tyre nuk duhet të kalojë 60 për qind. Gjithçka është shumë e thjeshtë: në total kemi vetëm 100%. Ne numërojmë: 100 – 40 = 60.
  

  5. Si të rreshtoni tekstin brenda një tabele html?

  Tani le të kuptojmë se si ta rreshtojmë tekstin në tabelën tonë html majtas, djathtas dhe qendër.

  Kjo bëhet duke përdorur atributin:

  rresht =”majtas”- rreshton tekstin brenda tabelës html në të majtë

  align=”qendër”- rreshtohet teksti html tavolina në qendër

  rresht = "djathtas"- rreshton tekstin brenda tabelës html djathtas

  Prandaj, atributi align mund të marrë gjithashtu vlerat djathtas dhe majtas. Kuptimi i justifikimit kur përdoret me një etiketë atributi align nuk mund të pranohet.

  Për shembull, kodi html një tabelë me tekst të përafruar në qendër duket kështu:

  rresht = "qendër"> rresht = "majtas"> 1x1 rresht = "qendër">1.2 rresht = "djathtas"> 1x3 rresht = "majtas">2.1 rresht = "qendër"> 2x2 rresht = "djathtas">2.3

  Duke regjistruar atributin rresht = "qendër" në hapje

  , ne rreshtuam tabelën html në qendër të faqes së shfletuesit.

  Ky është rezultati që do të merrni në shfletues:

  1x1	1.2	1x3
  2.1	2x2	2.3

  Tani le të shohim një shembull se si të rreshtoni tekstin brenda një tabele html përgjatë skajit të sipërm ose të poshtëm, domethënë se si mund të siguroheni që përmbajtja e një qelize të mos gjendet vetëm saktësisht në mes të saj (si parazgjedhje ), por edhe në krye ose në fund.

  Rreshtimi vertikal specifikuar nga atributi:

  valign = "lart"- përmbajtja do të vendoset në krye të qelizës

  valign = "mesi"- përmbajtja do të vendoset në qendër të qelizës

  valign = "fund"- përmbajtja do të vendoset në fund të qelizës

  Le të shohim këto atribute duke përdorur shembullin tonë:

  valign = "lart"> 1x1 1.2 valign = "lart"> 1x3 valign = "fund">2.1 2x2 valign = "fund">2.3

  Kjo është ajo që marrim nëse shikojmë rezultatin e atributeve në shfletues: rreshtoj Dhe valign:

  1x1	1.2	1x3
  2.1	2x2	2.3

  6. Si të kombinohen qelizat dhe kolonat e një tabele html?

  Në këtë pjesë të artikullit tonë do të flasim për atributet colspan Dhe gjatësia e rreshtave.

  colspan- përcakton numrin e kolonave që do të aplikohen këtë qelizë

  gjatësia e rreshtave- përcakton numrin e rreshtave në të cilat shtrihet kjo qelizë

  vlerat colspan Dhe gjatësia e rreshtave mund të marrë një vlerë nga 2 ose më shumë, d.m.th. një qelizë mund të shtrihet në dy ose më shumë kolona (rreshta).

  Pra, tani, duke përdorur shembullin, ne do të shtrijmë një qelizë 1x1 në dy kolona (qeliza). Për ta bërë këtë, ne do të përdorim atributin colspan="2", duke e caktuar atë në një qelizë 1x1. Kodi do të duket si ky:

  Siç mund ta shohim, qeliza 1x1 shtrihet në gjatësinë e dy qelizave. Prandaj, gjatësia e saj është e barabartë me gjatësinë e përmbledhur të këtyre dy qelizave (160 piksele). Ne nuk jemi regjistruar atributi gjerësi për një qelizë 1x1, por nëse vendosnim ta bënim këtë, do ta vendosnim gjerësinë në 160 piksele. Dhe gjithashtu, ju lutemi vini re se në shembullin tonë nuk ka qelizë 1x3, d.m.th. ka vetëm dy qeliza në rreshtin e parë, pse - ne e kemi diskutuar tashmë këtë - një qelizë 1x1 është e barabartë me dy qeliza, falë atributit colspan.

  ME atributet colspan dhe shtrirja e rreshtave duhet të trajtohet me shumë kujdes. Një gabim mund të shkaktojë që faqja juaj të rrëzohet.

  Dhe tani që kuptojmë parametrin colspan, le të shohim parametrin rowspan. Parimi i funksionimit është i njëjtë:

  colspan = "2"> 1.1 1.2 2.1 2.2

  1.1		1.2
  2.1	2.2

  Kështu, ne mësuam se si të kombinojmë qelizat në rreshtat dhe kolonat e tabelave html.

  7. Si të hiqni, shtoni ose ndryshoni indencat dhe si të vendosni një kornizë për një tabelë html?

  Pra, më herët krijuam një tabelë html, indencat midis qelizave janë qartë të dukshme. Për t'i bërë ato të dukshme edhe më mirë, le të shtojmë një kornizë për tryezën tonë. Kjo bëhet duke përdorur atributet:

  border = "gjerësia e kufirit në pixel"- vendos gjerësinë e kornizës

  bordercolor = "ngjyra e kufirit"- vendos ngjyrën e kornizës

  Le t'i japim, për shembull, tabelës sonë html një kornizë të zezë me gjerësi 1 piksel.

  Për këtë etiketë

  shtoni atribute:

  Tani ne mund të shohim qartë dhëmbëzimet ndërmjet qelizat html tabelat dhe mbushja nga skajet e brendshme të qelizave në tekst. Prandaj, ne mund t'i menaxhojmë këto dhëmbëzime pa asnjë problem. Atributet janë për këtë qëllim:

  Cellpacing = "gjerësia e hapësirës në pixel"- hapësira ndërmjet qelizave

  cellpadding="gjerësia e mbushjes në piksel"- dhëmbëzimi brenda qelizës (nga skaji i qelizës tek teksti, imazhi, lidhja...)

  Për shembull, le të bëjmë dhëmbëzimin midis qelizave 10 piksel dhe të rrisim dhëmbëzimin nga skaji i qelizës në tekst në 20 piksel. Kjo bëhet si kjo:

  cellpadding = "20"hapësira e qelizave = "10"> 1.1 1.2 2.1 2.2

  Nëse shikojmë rezultatin në shfletues, shohim qartë se distanca midis qelizave ( hapësira e qelizave) e tabelës sonë html është rritur në 10 piksel, dhe distanca midis tekstit dhe skajit të brendshëm të qelizës është rritur me 20 pikselë.

  1.1		1.2
  2.1	2.2

  Nëse keni nevojë të hiqni fare dhëmbët, atëherë thjesht vendosni cellpadding = "0" Dhe hapësira e qelizave = "0".

  8. Si të futni një tabelë HTML brenda një tjetre?

  Jemi duke iu afruar fazës përfundimtare të mësimi i html tabelat. Tani do të mësojmë se si të futim një tabelë brenda një tjetre.

  Për shembull, brenda qelizës 1.2 do të fusim tavoline e re, i përbërë nga një rresht dhe dy kolona. Në tabelën e brendshme html do të vendosim një kufi të kuq me gjerësi 2 pikselë dhe një distancë midis qelizave prej 0 pikselësh. Ne gjithashtu do të vendosim tabelën e brendshme në krye të qelizës.

  Kjo bëhet shumë thjesht:

  1.1 3.1 3.2 2.1 2.2

  Kjo është ajo që ndodhi si rezultat i transformimeve të reja të tabelës sonë (qelizat e kuqe janë tabela e brendshme e vendosur brenda tavoline e madhe):

  1.1		3.1 3.2
  2.1	2.2

  Në këtë pikë do ta përfundojmë këtë artikull. Mendoj se doli e suksesshme dhe jo e vështirë për t'u kuptuar dhe shpresoj që të mos keni më probleme me tabelat.

  U bë popullor, dizajnerët e uebit kryesisht përdorën metodën e paraqitjes së tabelës dhe morën rezultate shumë të mira.

  
  Etiketat e përdorura për të ndërtuar një tabelë në html

  tabela - etiketa e kërkuar, hapjen dhe mbylljen e tavolinës
  mbishkrim - etiketë opsionale, duke treguar titullin e tabelës
  th- një etiketë opsionale, etiketat hapëse dhe mbyllëse të së cilës përmbajnë emrin e kolonës. Në mënyrë tipike duket e guximshme
  tr- një etiketë e kërkuar që hap dhe mbyll linjën
  td- një etiketë e kërkuar që tregon hapjen dhe mbylljen e një qelize me radhë
  
  Shembull i kodit për një tabelë të thjeshtë

  
  
  
  
  

  
  
  
  
  
  
  

  Emri i tabelës

  Stobets 1	Stobets 2
  Teksti në qelizën e parë	Teksti në qelizën e dytë

  
  
  Shfletuesi do të shfaqet
  
  

  Qëllimi i tabelave në html

  Mësimi në tavolina është shumë i rëndësishëm! Falë tabelave, ju mund të organizoni jo vetëm tekst, por edhe imazhe, lidhje dhe shumë më tepër. Në tabelë mund të specifikoni sfond(ose ngjyra e tij), dhëmbëzimi, gjerësia, kufiri Dhe parametra të tjerë që do t'i japë asaj një bukuri pamjen. Tabela - Hapi juaj i parë drejt të kuptuarit web design! Më parë, shumë sajte ishin paraqitur tërësisht si tabela, domethënë gjithçka që pa përdoruesi (menuja anësore, menyja kryesore, përmbajtja) - ishte përmbajtja e qelizave të një tabele të madhe.
  Me këtë shënim, le të kalojmë drejtpërdrejt te atributet që e bëjnë tryezën të bukur...

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

  U etiketë tavoline ka atributet e mëposhtme:

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

  Le të shohim përdorimin e këtyre atributeve duke përdorur një shembull. Për ta bërë këtë, le të krijojmë një tabelë (por tashmë pa mbishkrimin dhe etiketat th të përdorura jashtëzakonisht rrallë) dhe vendosni parametrin në atribut kufiri, gjerësia (gjerësia e tabelës, rreshtit ose qelizës) Dhe bgcolor (ngjyra e qelizës)

  
  
  
  
  

  
  
  
  
  
  
  
  

  
  
  Si rezultat, tabela e mëposhtme do të shfaqet në shfletuesin:
  
  kornizë- një atribut që tregon kornizën rreth tryezës. Ekzistojnë vlerat e mëposhtme:

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

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

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

  Le të shohim shembullin e kodit

  
  
  
  
  

  Stobets 1	Stobets 2

  
  
  
  
  
  
  
  

  
  

  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 shtrirje tavoline. Për ta bërë këtë, ekzistojnë parametrat e mëposhtëm tashmë të njohur:

  rreshtoj- shtrirje tavoline. Mund të vendoset në të majtë (majtas), në të djathtë (djathtas), në qendër (në 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 (e parazgjedhur 0 pikselë)
  Le të shohim një shembull

  
  
  
  
  

  Stobets 1	Stobets 2
  Teksti në qelizën e parë të kolonës së parë	Teksti në qelizën e dytë të kolonës së dytë

  
  
  
  
  
  
  
  
  
  

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

  

  tr rreshtat dhe qelizat td në tabelat HTML

  Më lejoni t'ju kujtoj përsëri se tabelat formohen rresht pas rreshti (tr). Rreshtat (tr) tashmë përmbajnë qeliza (td). Nëse specifikoni një parametër për një varg (tr), ai do të jetë i vlefshëm për të gjitha qelizat(td) në këtë rresht, nëse për një qelizë specifike, atëherë vetëm për të. Në shembujt e mësipërm, unë specifikova ngjyrën për rreshtin, ky parametër u shpërnda në përputhje me rrethanat në të gjitha qelizat.
  
  
  
  
  
  Për etiketat tr dhe td janë të mëposhtmet

  rreshtoj- rreshtimi i tekstit brenda një qelize. Skaji i majtë (majtas), skaji i djathtë (djathtas), qendra (në qendër)
  valign- shtrirje vertikale e tekstit brenda një qelize. Lart (lart), poshtë (poshtë), qendër (në mes)
  bgcolor- vendos ngjyrën e vijës
  gjerësia- gjerësia e kolonës (do të marrin të gjitha qelizat më poshtë 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)

  Le të shohim kodin ku përmbajtja e qelizave (td) është rreshtuar përgjatë skajeve të ndryshme: në të parën në të majtë, në të dytën në të djathtë:

  
  
  
  
  

  Stobets 1	Stobets 2
  Teksti në qelizën e parë të kolonës së parë	Teksti në qelizën e dytë të kolonës së dytë
  Stobets 1	Stobets 2

  
  
  
  
  
  
  
  
  
  

  
  
  Rezultati
  
  

  Duke përdorur tabelat mund të krijoni një faqe shumë të mirë. Mos harroni se mund të futni jo vetëm tekst në qeliza, por edhe imazhe, lidhje, etj.!)

  Faleminderit për vëmendjen tuaj! Shpresoj se materiali ishte i dobishëm!

  Specifikimi CSS jep mundësi të pakufizuara për hartimin e tabelave. Si parazgjedhje, qelizat e tabelës dhe tabelës nuk kanë kufij ose sfond të dukshëm dhe qelizat brenda tabelës nuk janë ngjitur me njëra-tjetrën.

  Gjerësia e qelizave të tabelës përcaktohet nga gjerësia e përmbajtjes së tyre, kështu që gjerësia e kolonave të tabelës mund të ndryshojë. Lartësia e të gjitha qelizave në një rresht është e njëjtë dhe përcaktohet nga lartësia e qelizës më të lartë.

  Formatimi i tabelave

  1. Kufijtë e tabelës

  Si parazgjedhje, tabela dhe qelizat brenda saj shfaqen në shfletues pa kufij të dukshëm. Kufijtë e tabelave janë të specifikuara nga prona kufitare:

  Tabela (kufi-collapse: kolaps; /*heq hapësira boshe ndërmjet qelizave*/ kufiri: 1px gri e fortë; /* vendosni një kufi të jashtëm për tabelën gri 1 px trashësi*/ )

  Kufijtë e qelizës së kokësçdo kolonë specifikohet për elementin e th:

  Th (kufiri: 1px gri e fortë;)

  Kufijtë e qelizave trupat e tabelës janë specifikuar për elementin td:

  Td (kufiri: 1px gri e fortë;)

  Trashësia e kufijve të qelizave ngjitur nuk dyfishohet, kështu që ju mund të vendosni kufijtë për të gjithë tabelën në mënyrën e mëposhtme:

  Th, td (kufiri: 1px gri e fortë;)

  Ju mund të nënvizoni kufirin e jashtëm të një tabele duke i dhënë asaj një gjerësi të rritur:

  Tabela (kufiri: 3px gri e fortë;)

  Kufijtë mund të vendosen pjesërisht:

  /* cakto një kufi të jashtëm gri me trashësi 3 px për tabelën */ tabelën (kufiri-lart: 3 px gri i ngurtë; ) /* cakto një kufi gri me trashësi 1 px për qelizën e trupit të tabelës */ td (kufiri-fund: 1px i ngurtë gri ;)

  Lexoni më shumë rreth pronë kufitare ju mund të lexoni.

  2. Si të vendosni gjerësinë dhe lartësinë e tabelës

  E paracaktuar gjerësia dhe lartësia e tavolinës përcaktohet nga përmbajtja e qelizave të saj. Nëse gjerësia nuk është e specifikuar, atëherë ajo do të jetë e barabartë me gjerësinë e rreshtit (rreshtit) më të gjerë.

  Gjerësia e tabelës dhe kolonës specifikohet duke përdorur vetitë e gjerësisë. Nëse tabela (gjerësia: 100%;) është specifikuar për një tabelë, atëherë gjerësia e tabelës do të jetë e barabartë me gjerësinë e bllokut të kontejnerit në të cilin ndodhet.

  Gjerësia e tabelës dhe kolonave zakonisht specifikohet në px ose %, për shembull:

  Tabela (gjerësia: 600 px;) th (gjerësia: 20%;) td:fëmija i parë (gjerësia: 30%;)

  Lartësia e tryezës nuk specifikohet. Lartësia e rreshtit tabelat mund të manipulohen duke shtuar mbushje të sipërme dhe të poshtme tek elementët

  . Në praktikë, ka raste kur është e nevojshme formatim special kolona, ​​e cila është e mundur në mënyrat e mëposhtme:

  duke përdorur etiketën

  Ju mund të vendosni sfondin për çdo numër kolonash;

  duke përdorur tabelën e përzgjedhësit td:first-child , tabela td:last-child mund të vendosni stile për kolonën e parë ose të fundit të tabelës (përveç qelizës së parë të kokës së tabelës);

  Duke përdorur përzgjedhësin e tabelës td:nth-child (rregulli i zgjedhjes së kolonës), mund të vendosni stile për çdo kolonë tabele.

  Mund të lexoni më shumë rreth përzgjedhësve CSS.

  5. Si të shtoni një titull tabele

  Ju mund të shtoni një titull në një tabelë duke përdorur një etiketë

  Megjithatë, ne dëshirojmë të theksojmë se nuk është e nevojshme të ndryshohen shumë shpesh madhësitë e qelizave individualisht. Si rregull, kjo bëhet në situata kur është e nevojshme të vendosni një gjerësi të caktuar për kolonat e tabelës. Në këtë rast, problemi zgjidhet më lehtë. Thjesht duhet të specifikoni gjerësinë e qelizave në rreshtin e parë.

  , dhe me ndihmën e veçorisë caption-side mund të vendoset para ose poshtë tabelës. Për shtrirje horizontale zbatohet teksti i titullit vetia e rreshtimit të tekstit. I trashëguar.

  ...

  Tabela nr. 1

  Kompania	Q1	Q2	Q3	Q4

  titulli (në anën e titullit: fundi; rreshtimi i tekstit: djathtas; mbushja: 10 px 0; madhësia e shkronjave: 14 px; ) Oriz. 2. Shembull i paraqitjes së një titulli nën një tabelë

  6. Si të hiqni hapësirën midis kornizave të qelizave

  Si parazgjedhje, kornizat e qelizave të tabelës ndahen nga një hapësirë ​​e vogël. Nëse vendosni kufirin-kollaps: kolaps për tabelën, boshllëku do të hiqet. Prona është e trashëguar.

  Sintaksë

  Tabela (kufi-collapse: kolaps;)
  Oriz. 3. Shembull i tabelave me korniza qelizash të bashkuara dhe të ndara

  7. Si të rritet hapësira ndërmjet kornizave të qelizave

  Duke përdorur veçorinë e ndarjes kufitare, mund të ndryshoni distancën midis kornizave të qelizave. Kjo pronë vlen për tabelën në tërësi. I trashëguar.

  Sintaksë

  Tabela (palosja e kufirit: e ndarë; ndarja e kufirit: 10 pikselë 20 pikselë;) Tabela (palosja e kufirit: e ndarë; hapësira e kufirit: 10 px;) Fig. 4. Shembull i tabelave me hapësira të rritura ndërmjet kornizave të qelizave

  8. Si të fshehni qelizat boshe të tabelës

  Vetia me qeliza boshe fsheh ose shfaq qelizat boshe. Prek vetëm qelizat që nuk përmbajnë asnjë përmbajtje. Nëse një qelizë vendoset në sfond dhe një tabelë vendoset në tabelë (border-collapse: collapse;) , atëherë qeliza nuk do të fshihet. I trashëguar.

  Kompania	Q1	Q2	Q3
Microsoft	20.3	30.5
Google	50.2	40.63	45.23

  tabela (kufi: 1px solid #69c; kolapsi i kufirit: veçuar; qeliza boshe: fsheh; ) th, td (kufiri: 2px solid #69c;) Oriz. 5. Shembulli i fshehjes qelizë bosh tabelat

  9. Paraqitni një tabelë duke përdorur veçorinë table-layout

  Paraqitja e tabelës përcaktohet nga një nga dy qasjet: plan urbanistik fiks ose paraqitje automatike. Nën paraqitjen në në këtë rast i referohet mënyrës se si gjerësia e tabelës shpërndahet midis gjerësive të qelizave. Prona nuk është e trashëguar.

  Sintaksë

  Tabela (paraqitja e tabelës: fikse;)

  10. Paraqitjet më të mira të tabelës

  1. Minimalizëm horizontal

  Tabelat horizontale janë tabela në të cilat teksti lexohet horizontalisht. Çdo entitet është një rresht i veçantë. Ju mund t'i jepni tabelave si kjo një pamje minimaliste duke vendosur një kufi me dy piksel nën kokën e th.

  Punonjës	Paga	Bonus	Mbikëqyrësi
Stephen C. Cox	$300	$50	Bob
Josephine Tan	$150	-	Eni
Joyce Ming	$200	$35	Andi
James A. Pentel	$175	$25	Eni

  tabela ( font-familja: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; madhësia e shkronjave: 14 px; sfondi: i bardhë; gjerësia maksimale: 70%; gjerësia: 70%; kolapsi i kufirit: kolaps; teksti -linjë: majtas; lineare ) tr:hover td (ngjyra: #6699ff;)

  Në sasi të mëdha rreshtave, ky dizajn i tabelës i bën ato të vështira për t'u lexuar. Për të zgjidhur këtë problem, mund të shtoni një kufi me një piksel poshtë të gjithë elementëve td.

  Td (kufitar-fund: 1px solid #cccc; ngjyra: #669; mbushje: 9px 8px; tranzicioni: .3s linear; )/*pjesa tjetër e kodit është si në shembullin e mësipërm*/

  Shtimi i një efekti :hover në elementin tr do t'i bëjë tabelat e dizajnuara në një stil minimalist më të lehtë për t'u lexuar. Kur kaloni miun mbi një qelizë, qelizat e mbetura në të njëjtin rresht theksohen njëkohësisht, duke e bërë më të lehtë gjurmimin e informacionit nëse tabelat kanë kolona të shumta.

  Th ( pesha e shkronjave: normale; ngjyra: #039; mbushja: 10 px 15 px; ) td (ngjyra: #669; kufiri në krye: 1 px solid #e8edff; mbushje: 10 px 15 px; ) tr:hover td (sfondi: #e8edff ;)

  2. Minimalizëm vertikal

  Megjithëse tabela të tilla përdoren rrallë, tabelat e orientuara vertikalisht janë të dobishme për kategorizimin ose krahasimin e përshkrimeve të objekteve të paraqitura nga një kolonë. Ju mund t'i dizajnoni ato në një stil minimalist duke shtuar hapësirë ​​për të ndarë kolonat.

  Th ( pesha e shkronjave: normale; kufiri i poshtëm: 2 px solid #6678b1; kufiri djathtas: 30 px solid #fff; kufiri majtas: 30 px solid #fff; ngjyra: #039; mbushja: 8 px 2px; ) td (kufi- djathtas: 30px solid #fff;

  3. Stili me kuti

  Stili më i besueshëm për hartimin e tavolinave të të gjitha llojeve është i ashtuquajturi stil "kuti". Mjafton të zgjidhni një të mirë skema e ngjyrave, dhe më pas vendosni ngjyrën e sfondit për të gjitha qelizat. Mos harroni të theksoni ndryshimin midis linjave duke vendosur kufijtë si ndarës.

  Th ( madhësia e shkronjave: 13 px; pesha e shkronjave: normale; sfondi: #b9c9fe; kufiri i sipërm: 4 px solid #aabcfe; kufiri i poshtëm: 1 px solid #fff; ngjyra: #039; mbushja: 8 px; ) td ( sfond : #e8edff-fund: 1px solid #fff: 1px transparente tr:hover td (sfondi: #ccddff;)

  Gjëja më e vështirë është të gjeni skemën e ngjyrave që do të kombinohen në mënyrë harmonike me faqen tuaj të internetit. Nëse faqja është e rëndë në grafikë dhe dizajn, atëherë do të jetë mjaft e vështirë për ju të përdorni këtë stil.

  Tabela ( font-familja: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; madhësia e shkronjave: 14 px; gjerësia maksimale: 70%; gjerësia: 70%; rreshtimi i tekstit: në qendër; kolapsi i kufirit: kolapsi border-top: 7px solid #9baff1; ngjyra e fortë #9baff1: #039 mbushje: 8 px;

  4. Zebra horizontale

  Tavolina zebra duket mjaft tërheqëse dhe komode. Një ngjyrë shtesë e sfondit mund të shërbejë si një sinjal vizual për njerëzit kur lexojnë tabelën.

  Th ( pesha e shkronjave: normale; ngjyra: #039; mbushja: 10 px 15 px; ) td (ngjyra: #669; kufiri në krye: 1 px solid #e8edff; mbushje: 10 px 15 px; ) tr:nth-child(2n) ( sfond: #e8edff;)

  5. Stili i gazetës

  Për të arritur të ashtuquajturin efekt gazete, mund të aplikoni kufij në elementët e tabelës dhe të luani me qelizat brenda. Një stil i lehtë, minimalist i gazetës mund të duket kështu: luani me skemën e ngjyrave, shtoni kufij, mbushje, prejardhje të ndryshme, dhe efekt: rri pezull kur rri pezull mbi një rresht.

  Tabela (kufiri: 1px solid #69c;) th (pesha e shkronjave: normale; ngjyra: #039; kufiri-poshtë: 1px me pika #69c; mbushja: 12px 17px; ) td (ngjyra: #669; mbushja: 7px 17px; ) tr:hover td (sfondi: #ccddff;)

  Tabela (kufiri: 1px solid #69c;) th (pesha e shkronjave: normale; ngjyra: #039; mbushja: 10 px; ) td (ngjyra: #669; kufiri-lart: 1px me pika #fff; mbushja: 10 px; sfondi: #ccddff ) tr:hover td (sfondi: #99bcff;)

  Tabela (kufiri: 1px solid #6cf;) th (pesha e shkronjave: normale; madhësia e shkronjave: 13 px; ngjyra: #039; transformimi i tekstit: shkronja të mëdha; kufiri djathtas: 1px solid #0865c2; kufiri-lart: 1px solid #0865c2 kufiri-majtas: 1px solid #0865c2: 1px solid #fff;

  6. Sfondi i tabelës

  Nëse jeni duke kërkuar për një agjërim dhe mënyrë unike dizajn tavoline, zgjidhni imazh tërheqës ose foto që lidhet me temën e tabelës dhe vendoseni si sfond të tabelës.

  Jpg") pa përsëritje; pozicioni i sfondit: 100% 55 px; ) th (pesha e shkronjave: normale; ngjyra: #339; mbushje: 10 px 12 px; ) td ( sfond: url ("https://site/images/ prapa..png"); sfondi: transparent;)

  Dimensionet e tabelës, lartësia dhe gjerësia e saj, përcaktohen automatikisht në varësi të asaj që përmbajnë qelizat brenda tyre. Sa më shumë të mbushen qelizat, aq madhësive më të mëdha tabela dhe anasjelltas.

  Sidoqoftë, veçoritë CSS ju lejojnë të ndryshoni madhësinë e një tabele në HTML duke specifikuar saktësisht gjerësinë dhe lartësinë që ju nevojitet. Për të qenë të drejtë, duhet të theksohet se atributet e tabelës gjithashtu ju lejojnë të vendosni madhësive të kërkuara. Megjithatë, në momenti aktual ne do të flasim vetëm për CSS.

  Duhet theksuar se çdo tabelë ka gjerësinë e saj minimale dhe lartësinë minimale, të cilat ndikohen nga përmbajtja e saj. Dhe edhe nëse vendosni vlerat e gjerësisë dhe lartësisë edhe më të vogla, asgjë nuk do të ndodhë. Anët e tabelës nuk do të kalojnë minimumin e tyre.

  Për të specifikuar gjerësinë e tabelës, duhet të përdorni një pronë CSS gjerësia, dhe për të vendosur lartësinë duhet të përdorni pronën lartësia.

  Në një shembull duket kështu.

  Tabela (gjerësia: 500 px; lartësia: 100 px; )

  Rezultati në shfletues:

  Kodi i plotë:

  Tabela me madhësitë e dhëna

  1	2	3	4	5
1	2	3	4	5
1	2	3	4	5

  Vlerat e gjerësisë dhe lartësisë së tabelës mund të specifikohen si vlerë absolute(në pixel) dhe relative - në përqindje. Për shembull, përkatësisht 20 px dhe 20%.

  Nëse përdorni përqindje për të vendosur dimensionet e tabelës, ato do të llogariten në bazë të dimensioneve elementi prind. Nëse flasim për shembullin tonë, atëherë po flasim për në lidhje me dritaren e shfletuesit.

  Ekziston një kuptim tjetër - auto. Dhe është e veçantë sepse me ndihmën e saj, gjerësia dhe lartësia e tabelës llogariten automatikisht, si parazgjedhje. Në praktikë, specifikimi i kësaj vlere duket kështu.

  Gjerësia: auto;

  Lartësia: auto;

  Ne dëshirojmë të tërheqim vëmendjen tuaj për një gjë tjetër: pikë e rëndësishme. Është më mirë të mos tregoni lartësinë si përqindje, pasi, si rregull, në këtë rast ato nuk do të funksionojnë.

  Përcaktimi i madhësive të qelizave dhe kolonave individuale

  Nëse mendoni se shfletuesi nuk e ka vendosur saktë gjerësinë e kolonave bazuar në përmbajtjen e qelizave, atëherë ju keni të drejtë të specifikoni vetë madhësitë e qelizave dhe kolonave. Dhe tani do të flasim se si të ndryshojmë madhësinë e qelizës në një tabelë HTML.

  Ndryshimi i madhësisë së qelizave bëhet duke përdorur të njëjtat veti CSS si madhësitë e tabelave, përkatësisht: gjerësia Dhe lartësia.

  Për të shtuar stile në qeliza, mund të përdorni një nga dy opsionet:

  1. Jepni qelizave emra të klasave individuale. Do të duket kështu: class="cell-50px"

     Dhe pas kësaj ju duhet të aplikoni stile për këto klasa.

  2. Aktivizo atributin stil, brenda së cilës shkruani kodin e nevojshëm CSS.

  Në praktikë, opsioni i dytë do të duket kështu:

  Stobets 1	Stobets 2
  Teksti në qelizën e parë të kolonës së parë	Teksti në qelizën e dytë të kolonës së dytë
  Dhe	. Nuk rekomandohet rregullimi i lartësisë duke përdorur veçorinë lartësi. Th, td (mbushje: 10px 15px;) 3. Si të vendosni sfondin e tabelës E paracaktuar sfond tavoline dhe qelizat janë transparente. Nëse faqja ose blloku që përmban tabelën ka një sfond, ai do të shfaqet përmes tabelës. Nëse sfondi është vendosur si për tabelën ashtu edhe për qelizat, atëherë në vendet ku sfondi i tabelës dhe qelizat mbivendosen, do të jetë i dukshëm vetëm sfondi i qelizave. Sfondi për tabelën në tërësi dhe qelizat e saj mund të jetë: mbushje, , . 4. Kolonat e tabelës Model Tabelat CSS fokusuar kryesisht në linja (rreshta) të formuara duke përdorur etiketën
  ...

  Tabela me madhësitë e dhëna

  1	2	3	4	5
  1	2	3	4	5
  1	2	3	4	5

  Rezultati në shfletues:
  
  

  Si të ndryshoni madhësinë e shkronjave në një tabelë

  Shpesh ka nevojë për të ndryshuar madhësinë e tekstit në një tabelë. Për shembull, në qelizat e kokës. Kjo mund të bëhet duke përdorur një pronë CSS madhësia e shkronjave. Le të vendosim madhësinë e shkronjave për elementët :

  Th (madhësia e shkronjave: 30 px; )

  Mbi këtë këtë mësim përfundon. Unë ju sugjeroj të mendoni me kujdes për detyrat e shtëpisë tuaj. Thjesht studiojeni me kujdes dhe mendoni për të. Të gjitha të mirat për të gjithë!