Specifikimi CSS jep mundësi të pakufizuara për hartimin e tabelave. Si parazgjedhje, një tabelë dhe qelizat e tabelës nuk kanë kufij ose sfond të dukshëm, dhe qelizat brenda një tabele nuk qëndrojnë afër njëra-tjetrës.
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ë jetë e ndryshme. 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 tabelës
1. Kufijtë e tabelës
Tabela dhe qelizat brenda saj shfaqen si parazgjedhje në shfletues pa kufij të dukshëm. Kufijtë e tavolinës përcaktohen nga vetia kufitare:
Tabela (kufi-collapse: kolaps; /*heq hapësira boshe ndërmjet qelizave*/ kufiri: 1px gri e fortë; /*vendos kufirin e jashtëm për tabelën ngjyrë gri trashë 1 px*/ )
Kufijtë e qelizës së kokësçdo kolonë është caktuar 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ë;)
Kufiri i jashtëm i një tabele mund të theksohet 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 3 pikselë për tabelën */ (kufiri-lart: 3 pikselë gri e ngurtë; ) /* cakto një kufi gri 1 px për qelizën e trupit të tabelës */ td (kufiri-fund: 1px gri i ngurtë;)
Mund të lexoni më shumë rreth pronës kufitare.
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ë vendosur, atëherë ajo do të jetë e barabartë me gjerësinë e rreshtit (vijës) më të gjerë.
Gjerësia e tabelës dhe kolonës vendosur duke përdorur vetitë e gjerësisë. Nëse tabela vendoset në tabelë (gjerësia: 100%;), 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 vendoset 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 e pavendosur. lartësia e rreshtit tabelat mund të manipulohen duke shtuar mbushje të sipërme dhe të poshtme tek elementët
Th, td (mbushje: 10px 15px;)
3. Si të vendosni sfondin e tabelës
E paracaktuar sfond tavoline dhe qelizat 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ë rreshtat (rreshtat) të formuara duke përdorur etiketën
duke përdorur etiketën
Ju mund të vendosni sfondin për çdo numër kolonash;
duke përdorur tabelën përzgjedhëse 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ë të tabelës.
Mund të lexoni më shumë rreth përzgjedhësve CSS.
5. Si të shtoni një titull në një tabelë
Ju mund të shtoni një kokë në një tabelë duke përdorur etiketën
| Kompania | Q1 | Q2 | Q3 | Q4 |
|---|
Oriz. 2. Një shembull i paraqitjes së titullit nën tabelë 6. Si të hiqni hendekun midis kornizave të qelizave
Kufijtë e qelizave të tabelës ndahen nga një hendek i vogël si parazgjedhje. Nëse vendosni kufirin-kolaps: kolaps për tabelën, atëherë boshllëku do të hiqet. Prona është e trashëguar.
Sintaksë
Tabela (kufi-collapse: kolaps;) 
Oriz. 3. Një shembull i tabelave me bashkim dhe ndarje të kufijve të qelizave
7. Si të rritet hapësira ndërmjet kufijve të qelizave
Nëpërmjet vetitë kufitare-Spacing mund të ndryshojë hapësirën midis kufijve të qelizave. Kjo pronë vlen për tabelën në tërësi. I trasheguar.
Sintaksë
Tabela (palosja e kufirit: e ndarë; hapësira e kufirit: 10 pikselë 20 pikselë;) Tabela (palosja e kufirit: e ndarë; hapësira e kufirit: 10 px;) 
Oriz. 4. Një shembull i tabelave me zbrazëtira 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 trasheguar.
| Kompania | Q1 | Q2 | Q3 |
|---|---|---|---|
| Microsoft | 20.3 | 30.5 | |
| 50.2 | 40.63 | 45.23 |
Oriz. 5. Një shembull i fshehjes së një qelize të zbrazët të tabelës 9. Paraqitja e tabelës me vetinë e paraqitjes së tabelës
Paraqitja e paraqitjes së një tabele përcaktohet nga një nga dy qasjet: faqosje fikse ose paraqitje automatike. Nën paraqitjen në këtë rast nënkuptohet se si gjerësia e tabelës shpërndahet ndërmjet gjerësisë së qelizave. Prona nuk është e trashëguar.
Sintaksë
Tabela (paraqitja e tabelës: fikse;)
10. Paraqitjet më të mira të tabelave
1. Minimalizëm horizontal
Tabelat horizontale janë tabela teksti i të cilave lexohet horizontalisht. Çdo entitet është një linjë e veçantë. Ju mund t'i stiloni këto tabela në një stil minimalist duke vendosur një kufi me dy piksel nën titullin 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 |
Në në numër të madh rreshtat 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; )/*kodi tjetër si më sipër*/
Shtimi i një efekti :hover në elementin tr do ta bëjë më të lehtë leximin e tabelave minimaliste. Kur rri pezull mbi një qelizë me miun, pjesa tjetër e qelizave në të njëjtin rresht zgjidhen në të njëjtën kohë, duke e bërë më të lehtë mbajtjen 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ë megjithatë të dobishme për kategorizimin ose krahasimin e përshkrimeve të objekteve të përfaqësuara nga një kolonë. Ju mund t'i stiloni ato në një stil minimalist duke shtuar një 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: 30 px solid #fff; kufiri-majtas: 30 px solid #fff; ngjyra: #669; mbushje: 12 px 2px; )
3. Stili “Boxed”.
Stili më i besueshëm për hartimin e tavolinave të të gjitha llojeve është i ashtuquajturi stil "boxed". Mjafton të zgjedhësh 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 vijave 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; kufiri-fund: 1px solid #fff; ngjyra: #669; kufiri-lart: 1px transparent; mbushje: 8px; ) tr:hover td (sfondi: #ccddff;)
Gjëja më e vështirë është të gjeni skemën e duhur të ngjyrave që do të përzihet në mënyrë harmonike me faqen tuaj. Nëse faqja është e ngarkuar me 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; border-bottom: 7px solid #9baff1; ) th (madhësia e shkronjave: 13px; pesha e shkronjave: normale; sfondi: #e8edff; kufiri djathtas: 1px solid #9baff1; kufiri- majtas: 1px solid #9baff1; ngjyra: #039; mbushje: 8 px; ) td ( sfond: #e8edff; kufiri-djathtas: 1px solid #aabcfe; kufiri-majtas: 1px solid #aabcfe; ngjyra: #669; mbushje: 8px ;)
4. Zebra horizontale
Tabela Zebra duket mjaft tërheqëse dhe e rehatshme. Ngjyra opsionale e sfondit mund të shërbejë si një sinjal vizual që njerëzit të 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 ngjyrat, shtoni kufij, mbushje, prejardhje të ndryshme, dhe efektin :hover kur rri pezull mbi 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 i sipërm: 1 px me pika #fff; mbushja: 10 px; sfondi: #ccddff; ) tr:hover td (sfondi: #99bcff;)
Tabela (kufiri: 1 px 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; kufiri-poshtë: 1px solid #fff; mbushje: 20px; ) td (ngjyra: #669; kufiri-djathtas: 1px me pika #6cf; mbushja: 10px 20px; )
6. Sfondi i tabelës
Nëse jeni duke kërkuar për një agjërim dhe mënyrë unike faqosja e tabelës, 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://website/images/ prapa..png"); sfondi: transparent;)
Ky leksion hedh një vështrim të detajuar se si përdoren tabelat në shënimin HTML. Ky është një organizim tabelor i tekstit, dhe një rrjet koordinativ tabelor, dhe grafika e organizuar në tabela.
Mjetet e përshkrimit të tabelave në HTML
Si Zhvillimi i WWW u bë e qartë se mjetet që janë të ngulitura në HTML nuk janë të mjaftueshme për shfaqje me cilësi të lartë lloje të ndryshme dokumentet. Disavantazhi i HTML ishte mungesa e objekteve të paraqitjes së tabelave në përbërjen e tij. Për këtë qëllim, teksti i paraformatuar (etiketa
), në të cilën tabela ishte e përshkruar me karaktere ASCII. Por kjo formë e paraqitjes së tabelës nuk mjaftonte Cilesi e larte dhe doli nga stili i përgjithshëm i dokumentit. Me prezantimin e tabelave në HTML, Webmasters tani nuk kanë vetëm një mjet për vendosjen e tekstit dhe numrave, por një mjet të fuqishëm dizajni për vendosjen e tyre në vendin e duhur ekran i grafikës dhe tekstit.Krijimi i tabelave në HTML
Etiketa përdoret për të përshkruar tabelat.<ТАВLЕ>. Etiketë<ТАВLЕ>, si shumë të tjerë, përkthen automatikisht rreshtin para dhe pas tabelës.
Krijimi i një rreshti tabele - etiketë<ТR>
Etiketë<ТR>(Rreshti i tabelës, rreshti i tabelës) krijon një rresht tabele. I gjithë teksti, etiketat dhe atributet e tjera që duhet të vendosen në një rresht duhet të vendosen midis etiketave lt;TR>..
Përcaktimi i qelizave të tabelës - Etiketa<ТD>
Qelizat me të dhëna zakonisht vendosen brenda një rreshti tabele. Çdo qelizë që përmban tekst ose imazh duhet të rrethohet me etiketa<ТD>. Numri i etiketave<ТD>në një rresht specifikon numrin e qelizave
tabela
Nëse tabela ka dy etiketa TR, atëherë ajo ka dy rreshta. Nëse janë tre në një rresht tag TD, pastaj në të tre kolona. Titujt e kolonave të tabelës - etiketa<ТН>
Titujt për kolonat dhe rreshtat e një tabele vendosen duke përdorur etiketën e titullit<ТН>(Tabela Header, header tabela). Këto etiketa janë si<ТD>. Dallimi është se teksti është i mbyllur midis etiketave<ТН>, shkruhet automatikisht me shkronja të zeza dhe pozicionohet si parazgjedhje në mes të qelizës. Mund të zhbëni qendrimin dhe rreshtoni tekstin majtas ose djathtas. Nëse përdorni<ТD>me etiketë<В>dhe atribut<АLIGN=center>, teksti do të duket gjithashtu si një titull. Sidoqoftë, mbani në mend se jo të gjithë shfletuesit mbështesin në tabela font të guximshëm, kështu që është më mirë të vendosni titujt e tabelës me<ТН>.
| Titulli është në qendër si parazgjedhje | Kreu mund të shtrijë kolonat | |
|---|---|---|
| Kreu mund të vendoset përpara kolonave | Tekst ose të dhëna | Tekst ose të dhëna |
| Kreu mund të bashkojë linjat | Tekst ose të dhëna | Tekst ose të dhëna |
| Tekst ose të dhëna | Tekst ose të dhëna | |
| Tekst ose të dhëna | Tekst ose të dhëna | |
Përdorimi i titujve të tabelës - etiketa<САРТIОN>
Etiketë
| Tekst ose të dhëna | Tekst ose të dhëna | Tekst ose të dhëna | Tekst ose të dhëna |
| Tekst ose të dhëna | Tekst ose të dhëna | Tekst ose të dhëna |
Atributi NOWRAP
Zakonisht, çdo tekst që nuk përshtatet në një rresht të një qelize tabele shkon në rreshti tjetër. Megjithatë, kur përdorni atributin NOWRAP me etiketa<ТН>ose<ТD>gjatësia e qelizës zgjerohet në mënyrë që teksti i përfshirë në të të përshtatet në një rresht.
atribut COLSPAN
etiketa<ТD>Dhe<ТН>modifikohen duke përdorur atributin COLSPAN (Hapësira e kolonës). Nëse dëshironi të bëni ndonjë qelizë më të gjerë se ajo e sipërme ose e poshtme, mund të përdorni atributin COLSPAN për ta shtrirë atë mbi çdo numër qelizash normale.
| Nëse dëshironi të bëni ndonjë qelizë më të gjerë se sipër ose fund, | mund të përdorni atributin COLSPAN=2, |
| për ta shtrirë atë mbi çdo numër qelizash të rregullta. | |
Atributi ROWSPAN
Atributi ROWSPAN përdoret në etiketa<ТD>Dhe<ТН>, është i ngjashëm me atributin COLSPAN=, me përjashtim të faktit se ai specifikon numrin e rreshtave që do të shtrihet qeliza. Nëse specifikoni një numër më të madh se një në atributin ROWSPAN=s, atëherë numri përkatës i rreshtave duhet të jetë nën qelizën e shtrirë. Nuk mund të vendoset në fund të tabelës.
Atributi WIDTH
Atributi WIDTH ka dy përdorime. Mund ta vendosni në një etiketë<ТАВLЕ>për të dhënë gjerësinë e të gjithë tabelës, ose mund të përdoret në etiketa<ТD>ose<ТН>për të vendosur gjerësinë e një qelize ose grupi qelizash. Gjerësia mund të specifikohet në piksel ose në përqindje. Për shembull, nëse vendosni në etiketë<ТАВLЕ>WIDTH=250, ju do të merrni një tabelë të gjerë 250 piksel, pavarësisht nga madhësia e ekranit të faqes. Kur vendosni WIDТН=50% në etiketë<ТАВLЕ>tabela do të marrë gjysmën e gjerësisë së faqes në çdo madhësi të imazhit në ekran. Pra, kur specifikoni gjerësinë e tabelës në përqindje, mbani në mend se nëse përdoruesi ka një pamje të ngushtë, faqja juaj mund të duket pak e çuditshme. Nëse po përdorni pikselë dhe tabela është më e gjerë se porta e shikimit, në fund do të shfaqet një shirit lëvizës për të lëvizur majtas dhe djathtas përgjatë faqes. Në varësi të detyrave në fjalë, çdo mënyrë e përcaktimit të gjerësisë së tabelës mund të jetë e dobishme.
| Teksti ose të dhënat - 100% gjerësi |
| Teksti ose të dhënat - 50% gjerësi |
| Teksti ose të dhënat - 200 px gjerësi |
| Teksti ose të dhënat - 100 px gjerësi |
Aplikimi i qelizave boshe
Nëse një qelizë nuk përmban të dhëna, ajo nuk do të ketë kufij. Nëse dëshironi që një qelizë të ketë kufij, por pa përmbajtje, duhet të vendosni diçka në të që nuk do të jetë e dukshme kur të shikohet. Ju mund të përdorni varg bosh <ВR>. Ju madje mund të përcaktoni kolona boshe duke specifikuar gjerësinë e tyre në pixel, ose njësi relative dhe pa futur asnjë të dhënë në qelizat e marra. Ky mjet mund të jetë i dobishëm kur vendosni tekst dhe grafikë në një faqe.
atribut CELLRADDING
Ky atribut specifikon gjerësinë e hapësirës boshe midis përmbajtjes së qelizës dhe kufijve të saj, domethënë vendos kufijtë brenda qelizës.
| Tekst ose të dhëna | Tekst ose të dhëna | Tekst ose të dhëna |
| Tekst ose të dhëna | Tekst ose të dhëna | Tekst ose të dhëna |
| Tekst ose të dhëna | Tekst ose të dhëna | Tekst ose të dhëna |
| Tekst ose të dhëna | Tekst ose të dhëna | Tekst ose të dhëna |
Atributet ALIGN dhe VALIGN
etiketa<ТR>, <ТD>Dhe<ТН>mund të modifikohet me ALIGN atributet dhe VALIGN. Atributi ALIGN përcakton shtrirjen horizontale të tekstit dhe grafikës, d.m.th., majtas, djathtas ose në qendër. Rreshtimi horizontal mund të specifikohet në disa mënyra:
ALIGN=lëshuar gjak shtyn përmbajtjen e qelizës afër skajit të majtë.
ALIGN=majtas Rreshton përmbajtjen e qelizës në të majtë, duke marrë parasysh dhëmbëzimin e specifikuar nga atributi CELLPADDING.
ALIGN=qendër në qendër të përmbajtjes së qelizës.
ALIGN=djathtas Rreshton përmbajtjen e qelizës në të djathtë, duke marrë parasysh dhëmbëzimin e specifikuar nga atributi CELLPADDING.
| Tekst ose të dhëna | Tekst ose të dhëna | Tekst ose të dhëna |
| Tekst ose të dhëna | Tekst ose të dhëna | Tekst ose të dhëna |
| Tekst ose të dhëna | Tekst ose të dhëna | Tekst ose të dhëna |
| Tekst ose të dhëna | Tekst ose të dhëna | Tekst ose të dhëna |
| Tekst ose të dhëna | Tekst ose të dhëna | Tekst ose të dhëna |
Atributi VALIGN rreshton tekstin dhe grafikën brenda një qelize vertikalisht. Rreshtimi vertikal mund të specifikohet në disa mënyra:
VALIGN=lart Rreshton përmbajtjen e një qelize në kufirin e saj të sipërm.
VALIGN=mes Përqendron përmbajtjen e qelizës vertikalisht.
VALIGN=poshtë Rreshton përmbajtjen e një qelize në kufirin e saj të poshtëm.
| Atributi VALIGN rreshton tekstin dhe grafikën brenda një qelize vertikalisht. | krye, | mesi, | fund. |
| VALIGN=lart Rreshton përmbajtjen e qelizës në kufirin e saj të sipërm. | krye, | krye, | krye. |
| VALIGN=middle Përqendron përmbajtjen e qelizës vertikalisht. | mesi, | mesi, | e mesme. |
| VALIGN=poshtë Rreshton përmbajtjen e qelizës në kufirin e saj të poshtëm. | fundi, | fundi, | fund. |
Atributi BORDER
Në etiketë<ТАВLЕ>shpesh përcaktojnë se si do të duken kufijtë, domethënë linjat që rrethojnë qelizat e tabelës dhe vetë tabelën. Nëse nuk vendosni një kornizë, do të merrni një tabelë pa rreshta, por hapësira për to do të ndahet. I njëjti rezultat mund të arrihet duke vendosur<ТАВLЕ ВОRDER=0>. Ndonjëherë ju dëshironi të bëni kufirin më të trashë në mënyrë që të bie më mirë. Ju mund të vendosni kufij ekskluzivisht të theksuar për të tërhequr vëmendjen te një foto ose tekst. Kur krijoni tabela të mbivendosura, duhet të bëni për tabela të ndryshme kufij me trashësi të ndryshme për t'i dalluar më lehtë.
Atributi CELLSPACING
Atributi CELLSPACING specifikon hapësirën midis qelizave në piksel. Nëse ky atribut nuk specifikohet, vlera e paracaktuar është dy piksel. Me atributin CELLSPACING=, mund të vendosni tekst dhe grafikë kudo që dëshironi. Nëse doni të largoheni vend bosh, mund të futni një hapësirë në qelizë.
| Tekst ose të dhëna | Tekst ose të dhëna | Tekst ose të dhëna |
| Tekst ose të dhëna | Tekst ose të dhëna | Tekst ose të dhëna |
| Tekst ose të dhëna | Tekst ose të dhëna | Tekst ose të dhëna |
| Tekst ose të dhëna | Tekst ose të dhëna | Tekst ose të dhëna |
| Tekst ose të dhëna | Tekst ose të dhëna | Tekst ose të dhëna |
| Tekst ose të dhëna | Tekst ose të dhëna |
Atributi BGCOLOR
Ky atribut ju lejon të vendosni ngjyrën e sfondit. Në varësi të cilës etiketë (TABLE, TR, TD) aplikohet, ngjyra e sfondit mund të vendoset për të gjithë tabelën, për një rresht ose për një qelizë të vetme. Kuptimi atribut i dhënëështë një kod RGB ose një emër standard i ngjyrës.
| Tekst ose të dhëna | Tekst ose të dhëna | Tekst ose të dhëna |
| Tekst ose të dhëna | Tekst ose të dhëna | Tekst ose të dhëna |
Atributi BACKGROUND
Ky atribut vendos imazhin e sfondit për tabelat. E aplikueshme për etiketat TABLE dhe TD. Vlera e tij është URL-ja e skedarit me imazhi i sfondit. Përdorimi i këtij atributi diskutohet më poshtë.
Përdorimi i tabelave në hartimin e faqeve
Tabelat janë të mira sepse, nëse dëshironi, ju mund t'i bëni kufijtë e tyre të padukshëm. Kjo lejon përdorimin e etiketës<ТАВLЕ>vendosni bukur tekstin dhe grafika në faqe. Mirupafshim<ТАВLЕ>mbetet i vetmi formatues i fuqishëm në HTML. Dizajnerët e faqeve të internetit tani kanë pothuajse të njëjtën liri për të përdorur "hapësirën e bardhë" si krijues. faqet e shtypura. Tabelat janë mënyra më e mirë për t'u larguar nga rregullimi hierarkik i tekstit në faqet e internetit.
Nëse shfletuesi mbështet tabelat, ai zakonisht do të shfaqë më së shumti efekte interesante marrë me ndihmën e tyre
Universiteti Pedagogjik Shtetëror UralMirë se vini!
|
Krijimi i tabelave shumëngjyrëshe
Disa shfletues lejojnë që ngjyrat të shfaqen. Ka disa mënyra për të ngjyrosur një tabelë, kryesisht në varësi të shfletuesit që përdorni.
Kufijtë me ngjyra në Netscape Navigator. Jo vetëm që mund ta rrethoni tryezën kornizë e bukur, por gjithashtu vendosni një ngjyrë për të që është e ndryshme nga ngjyrat e tekstit dhe sfondit. Krijoni një GIF të thjeshtë gri (ose ndonjë GIF që dëshironi të keni si sfond) dhe përcaktojeni atë në një etiketë<ВODY>si sfond i faqes. Pastaj vendosni ngjyrën e sfondit të faqes. Si rezultat, etiketa juaj<ВОDY>do të duket diçka si kjo:
Ju keni krijuar një sfond të dyfishtë - GIF dhe ngjyra e vendosur. Si rezultat ngjyrë e sfondit do të jetë i dukshëm në të gjitha kufijtë e tabelës dhe vija horizontale (<НR>). Pavarësisht nëse GIF-i juaj i sfondit është gri apo jo, linjat me ngjyra dhe kufijtë e tabelës do të dallohen dukshëm. Nëse sfondi GIF nuk është shumë i ndërlikuar, koha e ngarkimit të faqes do të rritet vetëm pak.
U bë popullor, dizajnerët e uebit kryesisht përdorën metodën e paraqitjes tabelare dhe morën një rezultat shumë të mirë.
Etiketat e përdorura për të ndërtuar një tabelë në html
tabela - etiketa e kërkuar, e cila hap dhe mbyll tryezën
mbishkrim - etiketë opsionale, duke treguar titullin e tabelës
th- një etiketë opsionale, në etiketat hapëse dhe mbyllëse të së cilës përshtatet emri i kolonës. Zakonisht me shkronja të zeza
tr- etiketa e detyrueshme nga e cila hapet dhe mbyllet linja
td- një etiketë e kërkuar që tregon hapjen dhe mbylljen e një qelize me radhë
Shembull i thjeshtë i kodit të tabelës
| Kolona 1 | Stobets 2 |
|---|---|
| Teksti në qelizën e parë | Teksti në qelizën e dytë |
Shfletuesi do të shfaqet
Caktimi 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. Tabela mund të vendoset sfond(ose ngjyra e tij), dhëmbëzimi, gjerësia, kufiri Dhe opsione të tjera e cila do t'i japë një pamje të këndshme. Tabela - Hapi juaj i parë për të kuptuar ueb dizajn! Më parë, shumë sajte ishin paraqitur plotësisht si tabela, domethënë gjithçka që pa përdoruesi (menuja anësore, Menuja kryesore, përmbajtja) - ishte përmbajtja e qelizave të mëdha të tabelës.Me këtë shënim, le të kalojmë te atributet që e bëjnë një tryezë të bukur...
Karakteristikat dhe parametrat e tabelave html: mbushja, gjerësia, ngjyra e sfondit, kufiri (korniza)
Në etiketë tavoline ka atributet e mëposhtme:gjerësia- gjerësia e tavolinë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 është e specifikuar në pixel
mbushja e qelizave- mbushja në pixel midis përmbajtjes së qelizës dhe kufirit të saj të brendshëm
Si më parë, vlera e atributit shkruhet në thonjëza.
| Kolona 1 | Stobets 2 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Kolona 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ë | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Kolona 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ë | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Kolona 1 | Stobets 2 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Kolona 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ë | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| krijon një titull kolone - një qelizë të veçantë, teksti në të cilin theksohet me shkronja të zeza. Numri i qelizave të kokës përcaktohet nga numri i çifteve të etiketave | krijon qelizat e tabelës që përmbajnë të dhëna të tabelës. Etiketat e çiftuara | , të vendosura në të njëjtin rresht, përcaktoni numrin e qelizave në rreshtin e tabelës. Numri i çifteve të qelizave | duhet të jetë e barabartë me numrin e çifteve të qelizave | . Atributet colspan , rowspan , headers janë të disponueshme për elementin. 5. Si të shtoni një titull (titull) në një tabelëKrijon një titull tabele. Shtuar direkt pas etiketës 6. Grupimi i rreshtave dhe kolonave të tabelësKrijon një grup strukturor kolonash, duke theksuar qelizat logjikisht homogjene. Grupon një ose më shumë kolona për formatim uniform, duke lejuar që stilet të aplikohen në kolona në vend që të përsërisin stilet për çdo qelizë dhe çdo rresht. Shtuar direkt pas etiketave 7. Grupimi i seksioneve të tabelësElementi krijon një grup titujsh për rreshtat e tabelave në mënyrë që të vendosë një dizajn uniform. Përdoret në kombinim me elementë | Dhe për të specifikuar secilën pjesë të tabelës. |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Oriz. 2. Theksimi i kolonave të tabelës me një ngjyrë të ndryshme duke përdorur etiketat dhe
Oriz. 3. Një shembull i kombinimit të qelizave të tabelës horizontalisht duke përdorur atributin colspan | atribut | Përshkrimi, vlera e pranuar | |||
|---|---|---|---|---|
| colspan | Numri i qelizave në një rresht për t'u bashkuar horizontalisht. | |
||
| kokat | Përcakton një listë të qelizave të kokës që përmbajnë informacion mbi kokën për qelizën aktuale të të dhënave. Projektuar për shfletues të të folurit. | ... | ... | |
| shtrirja e rreshtit | Numri i qelizave në kolonë për t'u bashkuar vertikalisht. | Vlerat e mundshme: numri nga 1 në 999. |
||
| shtrirje | Numri i kolonave të kombinuara për një punë stil uniform, parazgjedhja është 1. Vlerat e pranuara: çdo numër i plotë pozitiv. |
|||
10. Një shembull i krijimit të një tabele
Oriz. 4. Krijoni një menu restoranti me një tabelë HTML Shënimi HTML
| Kuzhina | enët e ftohta | Enët e nxehta | Ëmbëlsirë | ||
|---|---|---|---|---|---|
| Sallatat | Snacks | Vakti i parë | Enët kryesore | ||
| rusisht | Vinegrette | Gjuhë me rrikë | Shchi me lakër turshi | Pemë me patate | Mollë të pjekura me mjaltë |
| Sallatë ruse | Pelte viçi | Shtëpia e Rassolnik | Krap i pjekur në salcë kosi | byrek me petull | |
| Harengë nën "pallton e leshit" | Purkë pike pelte | Hoxhë mishi | Cutlets "Pozharsky" | Torte "patate" | |
| Spanjisht | Ceviçe e fiston | Empanadat | Supë buke me hudhër | Paella me ushqim deti | Churros |
| Dajrë me avokado dhe ton | Ahotomate | Fabada asturiane | Raxo derri | Almoishavena | |
| Fasule me proshutë | Chanfine | Supë peshku me bollgur | tortilla me patate | Bunuelos | |
| frengjisht | Sallatë Vosges | Rijet i pulës | Supë me krem patëllxhani "Renoir" | Ograte me patate | brioshe |
| Sallatë "Panzanella" | Djathë i shijshëm | supë franceze me kunguj | Gratin nga shpendët | Byrek me limon ligurian | |
| Tartari | salmon i marinuar | Supë "Conti" | Tartiflete | Savarin "Triumfi" | |
NË këtë seksion merren parasysh disa veçori specifike të shfletuesve individualë, si dhe hollësitë individuale ndërtimin dhe paraqitjen e tabelave.
Shfaqja e qelizave boshe në tabelat HTML
Një nga veçoritë e prezantimit të tabelave HTML shfletues të ndryshëmështë për të shfaqur qeliza boshe. Sipas përshkrimit gjuha HTML të gjithë shfletuesit duhet të mbushin rreshtat me qeliza bosh nëse ndonjë rresht ka më pak qeliza bosh se rreshtat e tjerë. Përveç kësaj, mund të ketë qeliza kudo në tabelë që nuk përmbajnë të dhëna.
Ekziston një ndryshim midis qelizave boshe dhe qelizave që përmbajnë të dhëna të padukshme. Në qelizat boshe brenda një çifti etiketash
, ose ndonjë tekst, ngjyra e të cilit përputhet me ngjyrën e sfondit të qelizës. Nëse qelizat që përmbajnë të dhëna (madje edhe ato të padukshme) shfaqen në të njëjtën mënyrë nga të gjithë shfletuesit, atëherë qelizat boshe do të shfaqen ndryshe. Shfletuesi Netscape nuk shfaq një qelizë të zbrazët, d.m.th. vendin ku qelizë e dhënë, do të mbushet me ngjyrën e sfondit të faqes, jo me ngjyrën e sfondit të qelizës, ndryshe nga qelizat që përmbajnë të dhëna. Asnjë kufi nuk vizatohet rreth qelizave boshe. Shembull HTML tabelat me një qelizë boshe është paraqitur në fig. 4.15.
Oriz. 4.15. bosh qelizë HTML tabelat janë dhënë ndryshe nga shfletues të ndryshëm
Microsoft Internet Explorer si ato ashtu edhe qelizat e tjera shfaqin ngjyrën e sfondit të qelizave. Një shfletues i tillë si NSCA Mosaic i lejon përdoruesit të përcaktojë natyrën e lëshimit të qelizave boshe në tabelë duke zgjedhur opsionet e duhura. Njohja e karakteristikave të tilla do t'ju lejojë të zhvilloni tabela që do të shfaqen në mënyrë të përshtatshme, pavarësisht nga shfletuesi i zgjedhur nga përdoruesi. Në disa raste, mjafton të krijohen qeliza që përmbajnë një kod të vetëm në vend të disa qelizave boshe.
