Хүснэгтийн шинж чанаруудыг судлахдаа HTML хүснэгтээс хамгийн ихийг олж аваарай
HTML хүснэгтийн шинж чанарууд нь HTML хүснэгтүүдээс илүү их хяналтыг өгдөг. Хуудаснуудаас илүү сонирхолтой болгож, хуудасныхаа харагдах байдлыг өөрчлөх маш олон шинж чанарууд байдаг.
HTML хүснэгт Хүснэгтийн элементүүд
HTML5-д элемент нь дэлхийн шинж чанарууд болон өөр нэг шинж чанарыг ашигладаг:. Мөн энэ нь зөвхөн 1 эсвэл хоосон (өөрөөр хэлбэл border = "") байхаар өөрчлөгдсөн байна. Хэрвээ та хилийн өргөнийг өөрчлөхийг хүсвэл border-width CSS property-г ашиглана уу.
Хүчинтэй HTML5 хүснэгтийн шинж чанаруудын талаар доороос үзнэ үү.
HTML5-д хоцрогдсон HTML 4.01 тодорхойлолтуудын зарим нэг шинж чанарууд байдаг.
- -Шугамын TD ба TH элементүүд дээр CSS дэвсгэртийг ашигла.
- CSS-ийн орон зайн хил хязгаарыг ашиглаарай.
- CSS-ийн өнгөц хил хязгаарыг ашиглах: хар; болон хилийн хэв маягийг хүснэгтэнд харуулав.
- CSS-ийн өнгөц хил хязгаарыг ашиглах: хар; болон хилийн хэв маягийг хүснэгтийн зохих элементүүд дээр харуулав.
- -Үүний оронд та хүснэгтийг бүтээхдээ CAPTION-ын бүтцийг тодорхойлж эсвэл хүснэгтийг бүхэлд нь ЗУРАГ-т дүрслэн тайлбарлах хэрэгтэй. Өөрөөр хэлбэл, та хүснэгтийг бүтээх ажлыг хялбарчлахын тулд тайлбар хийх шаардлагагүй болно.
- CSS-ийн өргөн хэрэглэгддэг.
HTML 4.01 дээр хуучирсан нэг шинж чанар нь HTML5-д бас хуучирсан.
HTML 4.01-ийн талаар илүү ихийг мэдэж аваарай.
- align -Гэхдээ CSS-ийн барьцааны өмчийг ашигла.
Мөн HTML тодорхойлолтоос гадна хэд хэдэн шинж чанарууд байдаг.
Хэрэв та дэмждэг хөтчүүд нь тэдгээрийг зохицуулж чадна гэдгийг мэдэж байгаа бол та HTML шинж чанарыг анхаарч үздэггүйг мэдвэл эдгээр атрибутуудыг ашиглаарай.
- -Гэхдээ CSS-ийн дэвсгэртийн өнгөний оронд ашигла.
- bordercolor - CSS-ийн өмчийн хил хязгаарыг ашиглаарай.
- bordercolorlight оронд CSS-ийн өмчийн хил хязгаарыг ашигла.
- bordercolordark - CSS-ийн өмчийн хил хязгаарыг ашигла.
- cols -Энэ атрибутын ямар ч сонголт байхгүй.
- height -Энд CSS өмчийн өндрийг ашигла.
- -Жишээ нь CSS-ийн үл хөдлөх хөрөнгийн ашиглалтыг ашигла.
- -Жишээ нь CSS-ийн үл хөдлөх хөрөнгийн ашиглалтыг ашигла.
- -Ингэхийн тулд CSS өмчлөлийн цагаан зайг ашигла.
- -Ирэхийн CSS өмчийн босоо шугамыг ашиглах.
Хөтөч Тусгай ТАШИГ ҮЗГҮҮЛЭН талаар дэлгэрэнгүй үзэх.
HTML5 хүснэгт Элементийн шинж чанарууд
Дээр дурдсанчлан, дэлхийн шинж чанаруудаас гадна зөвхөн нэг шинж чанар байдаг бөгөөд энэ нь HTML5 хүснэгтэнд хүчинтэй байна: border.
Хилийн шинж чанар нь хүснэгтийн бүхэл хүрээ болон түүний доторх бүх нүдийг тойрон гарах хил хязгаарыг тодорхойлоход хэрэглэгддэг. Энэ нь HTML5 тодорхойлолтод багтах эсэх талаар зарим асуулт байгаа боловч энэ нь хүснэгтийн бүтцийн талаархи мэдээллээс гадна хэвийн бус үр дагавараас гадна үлдсэн юм.
Хэрвээ хилийн шинж чанарыг нэмэх бол $ 1 гэж тохируулбал if border байвал хоосон, хоосон байна (эсвэл атрибутыг орхи). Ихэнх browsers нь 0-ийг ямар ч хил хязгааргүй, мөн бусад бүхэл тоогоор (2, 3, 30, 500 гэх мэт) дэмжиж хилийн өргөнийг пикселээр зарлах боловч энэ нь HTML5-д хуучирсан байна. Харин оронд нь CSS хилийн маягийн шинж чанарыг ашиглахын тулд хилийн өргөн болон бусад загваруудыг тодорхойлох хэрэгтэй.
Хил дамнуургатай хүснэгт үүсгэхийн тулд бичнэ үү:
border = "1" >
Энэ бол хил бүхий хүснэгт юм
HTML5 дээр HTML 4.01 шинж чанарууд нь хуучирсан байна. Хэрэв та HTML 4.01 баримт бичгийг бичихээр төлөвлөж байгаа бол тэдгээрийг сурч болно, эс бөгөөс үүнийг үл тоомсорлож болно. Эдгээр шинж чанаруудын ихэнх нь дээр дурьдсан хувилбаруудтай байдаг.
HTML5 (болон HTML 4.01) хүчин төгөлдөр элементийн шинж чанарыг бид тодорхойлно. Энэ нь HTML 4.01-д хүчинтэй байгаа HTML шинж чанарыг тодорхойлдог боловч HTML5-д хуучирсан байна. Хэрэв та одоо HTML 4.01 баримт бичгийг бичиж байгаа бол эдгээр шинж чанаруудыг ашиглаж болно, гэхдээ тэдгээрийн ихэнх нь HTML5 рүү шилжих үед таны хуудсыг илүү ирээдүйтэй болгоход туслах болно.
Зөв HTML 4.01 Аттрибутууд
Дээрх бидний шинж чанар
HTML5 дэх HTML 4.01 дэх ялгаа нь хилийн өргөнийг цэгээр тодорхойлохын тулд ямар ч бүхэл тоон утгыг (0, 1, 2, 15, 20, 200 гэх мэт) тодорхойлж болно.
5 факсны хил бүхий хүснэгт бүтээхдээ дараах зүйлийг бичнэ үү:
border = "5" >
Энэ хүснэгт нь 5px хил байна.
Хил дамнасан хоёр хүснэгтийг хар.
Аттрибут нь нүдний хил хязгаар ба нүдний агуулгын хоорондох зайг тодорхойлдог. Анхдагч нь хоёр пиксел юм. Контент ба хилийн хоорондох зай байхгүй бол cellpadding-ыг 0 болгоорой.
20 хүртэлх тооны үүр тавина уу:
cellpadding = "20" >
Энэ хүснэгт нь cellpadding of 20 байна.
Утасны хил 20 пикселээр тусгаарлагдана.
Хүснэгтийн нүдэнд жишээг харна уу
Аттрибут нь хүснэгтийн нүд болон нүдний агуулгын хоорондын зайг тодорхойлдог. Cellpadding-тэй адил анхдагчийг хоёр пиксел гэж тохируулбал 0 нүд рүү зөөх шаардлагатай.
Хүснэгтийн зайг хүснэгт рүү нэмэхийн тулд бичнэ үү:
cellspacing = "20" >
Энэ хүснэгтэд 20 дугаар хүснэгтийн мөр байна.
Цуваа нь 20 пикселээр тусгаарлагдана.
Хүснэгтийг нүдээр харуул
Аттрибут нь гаднах талбайн гадна талыг харагдах хэсэгт харагдах болно. Та хүснэгтээ бүх дөрвөн талд, аль нэг тал, дээд, доод, зүүн, баруун талд, эсвэл огт байхгүй болгоно.
Зөвхөн зүүн гар талын хил бүхий хүснэгтийн HTML энд байна:
frame = "lhs" >
Энэ хүснэгт
байх болно.
зөвхөн
зүүн талын рамтай байна.
Доод тал нь өөр нэг жишээ:
frame = "below" >
Энэ хүснэгт нь доод талдаа хүрээтэй байна.
Зарим хүснэгтийг frame-ээр үзээрэй
Аттрибут нь frame attribute-тэй төстэй бөгөөд зөвхөн хүснэгтийн эргэн тойронд хиллэдэг. Та TBODY болон TFOOT зэрэг бүлгүүдийн хооронд бүх баганад, баганын хооронд дүрмүүдийг тохируулж болно.
Зөвхөн мөр хоорондох мөрийг үүсгэхийн тулд дараах мөрийг бичнэ үү:
rules = "мөр" >
Энэ 4х4 хүснэгт нь
багана биш мөрүүд
нь гэж бичсэн
дүрмүүдийн шинж чанар.
Бас баганын хоорондох мөрөнд нөгөө нь:
rules = "cols" >
Энэ нь
хүснэгт
хаана байгаа
багана
байна
тодорсон
Дүрмээр байгаа хүснэгтийг жишээ болгон үзүүлэв
Аттрибут нь хүснэгт уншихад бэрхшээлтэй байж болзошгүй дэлгэцийн уншигчид болон бусад хэрэглэгчийн хүснэгтийн талаарх мэдээллийг агуулдаг. Хураангуй шинж чанарыг ашиглахын тулд хүснэгтийг товч тодорхойлж, аттрибутын утга болгон бичнэ үү. Дүгнэлт нь ихэнх стандарт вэб хөтөч дээр вэб хуудсанд харагдахгүй болно.
Энгийн хүснэгтийн хураангуйг яаж бичих вэ:
summary = "Энэ бол дүүргэгчийн мэдээллийг агуулдаг хүснэгт юм. Энэ хүснэгтийн зорилго нь хураангуйг харуулах явдал юм." >
багана 1 мөр 1
багана 2 мөр 1
багана 1 мөр 2
багана 2 мөр 2
Хураангуй хүснэгттэй танилцана уу
Аттрибут нь хүснэгтийн өргөнийг пиксел эсвэл савны элементийн хувиар илэрхийлнэ. Хэрэв өргөн нь тохируулагдаагүй бол хүснэгтийн агууламжийг хамгийн их өргөнтэй байлгахын тулд хүснэгтэд зөвхөн их хэмжээний зай шаардана.
Тодорхой өргөнтэй пиксел бүхий хүснэгт бүтээхдээ дараах зүйлийг бичнэ үү:
width = "300" >
Энэ хүснэгт нь контейнерийн өргөний 80% байна.
Эцэг элементийн хувиар илэрхийлэгддэг өргөнтэй хүснэгт бүтээхдээ дараах зүйлийг бичнэ үү:
width = "80%" >
Энэ хүснэгт нь контейнерийн өргөний 80% байна.
Дэлгэцийн өргөнтэй хүснэгтийг хар
Хуучирсан HTML 4.01 ХҮСНЭГТ Үзүүлэлт
HTML 4.01-т хэрэглэгдэх боломжгүй HTML кодын нэг шинж чанар ба HTML5-д хуучирсан байна. Энэ шинж чанар нь хаана тухайн хуудасны хажууд байгаа текстээс хамаарч байгаа хуудсыг хаана байрлуулахыг тогтоох боломжийг олгодог. Энэ шинж чанар HTML 4.01-д хуучирсан бөгөөд та ашиглахаас зайлсхийх хэрэгтэй. Үүний оронд та CSS property эсвэл margin-left: auto; болон маржин-зөв: авто; стиль. Float property нь танд өгөгдсөн шинж чанарыг хангаж өгдөг үр дүнг өгдөг боловч энэ нь хуудасны агуулгын бусад хэсгүүдэд харагдах байдлаар нөлөөлж чадна. Margin-right: авто; болон маржин зүүн талд: автомат; W3C нь өөр хувилбар гэж зөвлөдөг.
Энд заасан шинж чанарыг ашиглан хуучирсан жишээ энд байна:
align = "right" >
Энэ хүснэгт нь зөв харагдана
Текстийг зүүн тийш эргүүлнэ.
Алдаатай шинж чанарыг ашиглан элэгдлийн жишээг харна уу.
Мөн хүчинтэй (хуучирсан) HTML хэлбэрийн адил үр нөлөөг олж авахын тулд дараахийг бичнэ:
style = "float: right;" >
Энэ хүснэгт нь зөв харагдана
Текстийг зүүн тийш эргүүлнэ.
Дараах тайлбар нь текстийн тодорхойлолтод хамаарахгүй текстийн шинж чанаруудыг тайлбарладаг.
Өмнөх мэдээлэл HTML 4.01-д хүчинтэй байгаа HTML элементийн шинж чанарыг тодорхойлдог боловч HTML5-д хуучирсан байна.
Дараахь зүйлсийг одоогийн тодорхойлолтод хүчингүй гэж үзсэн хүснэгтийг тодорхойлов. Хэрвээ таны хуудсууд тань хүчин төгөлдөр эсэхийг шалгадаггүй бөгөөд таны хэрэглэгчид эдгээр элементүүдийг дэмждэг хөтөч ашиглаж байгаа бол эдгээр элементүүдийг ашиглаж болно. Гэхдээ тэдгээрийн ихэнх нь орчин үеийн хөтөч дээр дэмжигддэггүй эсвэл илүү стандартыг хангасан хувилбаруудтай байдаг.
Эдгээр HTML шинж чанаруудыг ашиглахыг бид зөвлөж байна.
Аттрибут нь CSS-ээс өмнө өргөн хэрэглэгддэг хуучин шинж чанар юм. Энэ нь хүснэгтний арын өнгийг өөрчлөх боломжийг олгоно. Та өнгөт нэр эсвэл арван зургаат кодыг тохируулж болно. Энэ шинж чанар нь маш олон хөтөч дээр ажиллана, гэхдээ ирээдүйд нотлогдсон HTML, үүнийг ашиглах ёсгүй, харин CSS-г ашиглах хэрэгтэй.
Энэ атрибутын илүү сайн сонголт бол загварын шинж чанар юм.
Хүснэгтийн өнгөний өнгийг өөрчлөхийн тулд бичнэ үү:
style = "background-color: #ccc;" >
Энэ хүснэгт нь саарал дэвсгэртэй байна
Bgcolor атрибуттай адил, bordercolor шинж чанар нь шинж чанарын өнгийг өөрчлөх боломжийг танд олгоно. Энэ шинж чанарыг зөвхөн Internet Explorer дэмждэг. Харин оронд нь хилийн өнгөт загварыг ашиглах хэрэгтэй.
Хүснэгтийн хилийн өнгөийг өөрчлөхийн тулд бичнэ үү:
style = "border color: red"; >
Энэ хүснэгт улаан хилтэй байна.
Дүрслэл болон bordercolordordark шинж чанарууд нь Internet Explorer-д багтсан бөгөөд таныг хүснэгтийн орчимд 3D хил үүсгэх боломжтой болно. Гэхдээ, IE8 ба түүнээс дээш хувилбар нь IE7 Стандарт горим ба Quirks горимд дэмжигддэг. Эдгээр шинж чанарууд нь цаашид дэмжигдэхээ больсон гэж Microsoft хэлэв.
Таблетийн элемент дээр кортын шинж чанарууд нь богино хэмжээний хайлтын системд хэдэн багана байгааг мэдэхэд нь туслах зорилгоор санал болгосон. Энэ нь том ширээнүүдийг хурдан гаргахад тусална гэсэн үг юм. Гэсэн хэдий ч энэ нь зөвхөн Internet Explorer-ээс хэрэгжсэн бөгөөд IE8 ба түүнээс дээш хувилбарууд нь зөвхөн IE7 Стандарт горим болон Quirks горимд дэмжигддэг.
Өргөн зурвасын шинж чанар нь (HTML5-д хуучирсан) олон хүн хүснэгтэнд зориулсан өндрийн шинж чанарыг авч үзсэн гэж үздэг. Гэхдээ ширээнүүд нь тэдгээрийн агуулгын өргөн эсвэл CSS эсвэл өргөн шинж чанарын тогтоосон өргөнтэй нийцдэг тул өндөр нь хязгаарлагддаггүй. Харин оронд нь хөтөч нь өндрийн шинж чанарыг хүснэгтийн доод өндрийг тодорхойлохыг зөвшөөрсөн. Хэрвээ хүснэгт нь өндөр байсан бол өндөр харагдаж байв. Гэхдээ та эд хөрөнгийг ашиглах хэрэгтэй
CSS-ийн єндєр хєрєнгєтэй бол та єндєр агуулгатай илэрч байгаа зїйлийг тодорхойлохын тулд CSS-ийн хєрєнгийг ашиглаж байвал єндрийг саад болно.
Хүснэгтийн доод өндрийг тохируулахын тулд дараахийг бичнэ үү:
style = "height: 30em;" >
Энэ хүснэгт нь доод тал нь 30 БИс байна.
Хоѐр шинж чанарууд ба зүүн / баруун талууд (hspace) болон дээд / доод (vspace) талбайн орчим зайг нэмнэ. Та загварын шинж чанарыг ашиглах хэрэгтэй.
Босоо орон зайг 20 пиксел, хэвтээ зай 40 пиксел хүртэл байрлуул:
style = "margin: 20px 40px;"
Энэ хүснэгт нь 20 пиксель болон 40 пикселийн зайтай байдаг.
Аттрибут нь хүснэгтийн агуулга нь толгой элемент эсвэл цонхны ирмэг дээр буулгах эсвэл хэвтээ гүйлгэх хүчийг шаарддаг эсэхийг тодорхойлж өгдөг boolean шинж чанар юм. Үүний оронд та CSS-ийн шинж чанарыг ашиглан хүснэгтийн нүд бүрийн боох шинж чанарыг тодорхойлох ёстой.
Бүтэн текстийг оруулаагүй баганыг баганаар хийхийн тулд бич:
style = "white-space: nowrap;" > Энэ бол тонн агуулга бүхий багана юм. Гэхдээ энэ нь контейнерээс илүү өргөн тохиолдолд текст дараагийн мөрөнд боож болохгүй, харин оронд нь бүх агуулгыг харахын тулд хөтчийн цонхыг хэвтээ байдлаар гүйлгэх хүчээр удирдах болно.
Эцэст нь, шинж чанар нь нүд тус бүрийн агуулгыг нүдэнд босоо байрлалд хэрхэн байрлуулахыг тодорхойлдог. Энэ хүчингүй шинж чанарыг өөрчлөхийн оронд, та CSS-ийн өмчийг ашиглан та тохиргоог өөрчилмөөр байна. Хэрэв та эсийн агууламж өөр том, том эсийн үүсгэсэн зайтай харьцуулахад бага байгаа бол энэ хэв маягийн нөлөөг анзаарахгүй байх болно.
Доод талыг хооронд нь холбохын тулд хүчээр (дундыг биш, анхдагч байдлаар) дараах байдлаар бичнэ үү:
Энэ эс нь бусадтай харьцуулбал урт бөгөөд өндөр нь өндөр байхыг шаардана. Тэгэхээр та босоо чиглэлийн нүд нь доод талдаа тохирохыг харах болно.
style = "vertical-align: bottom;"; > Агуулгын доод хэсэг.
Агуулга дунд.