Jadvalning atributlarini o'rganish orqali HTML jadvallaridan maksimal darajada foydalanish
HTML jadvalining atributlari HTML-jadvallar ustidan sizga ko'proq nazorat beradi. Ularni yanada qiziqarli qilish va sahifangizning ko'rinishini o'zgartirish uchun jadvallar uchun mavjud bo'lgan ko'plab atributlar mavjud.
HTML TABLES element elementlari
HTML5 da element umumjahon atributlari va boshqa bir xususiyatidan foydalanadi:. Va faqat o'zgardi 1 yoki bo'sh qiymati (ya'ni border = ""). Chegaraning kengligini o'zgartirmoqchi bo'lsangiz, border width CSS xususiyatidan foydalaning.
Joriy HTML5 jadvalining xususiyatlarini o'rganish uchun pastga qarang.
HTML5 da eskirib qolgan HTML 4.01 spetsifikatsiyasining bir qismi bo'lgan bir nechta atributlar mavjud:
- CSS jadvalining TD va TH elementlariga biriktirilgan xususiyatidan foydalaning.
- -Jadvalda CSS xususiyatlarining chegara oralig'ini ishlatish.
- CSS-ning uslubi chegara rangidan foydalaning: qora; va chegara stoli stolda.
- CSS-ning uslubi chegara rangidan foydalaning: qora; va jadvalning tegishli elementlari bo'yicha chegara uslubi.
- - Buning o'rniga jadvalning strukturasini CAPTIONda tasvirlashingiz yoki butun jadvalni FIGURE holatiga qo'yishingiz va uni FIGCAPTIONda ta'riflashingiz kerak. Shu bilan bir qatorda, jadvalni tuzilishini soddalashtirasiz, shunda hech qanday tushuntirish kerak emas.
- CSS kengligi xususiyatidan foydalaning.
Va HTML 4.01 da bekor qilingan va HTML5 da eskirgan bir xususiyat.
HTML 4.01 TABLE Niteliklari haqida ko'proq bilib oling.
- hizalanish . Buning o'rniga CSS marginini ishlatish.
HTML spetsifikatsiyasining bir qismi bo'lmagan bir nechta atributlar ham mavjud.
Siz qo'llab-quvvatlaydigan brauzerlarning ularni bajarishi mumkinligini bilsangiz va siz joriy HTML-ga e'tibor bermasangiz, bu xususiyatlardan foydalaning.
- Buning o'rniga CSS xususiyatini fon rangidan foydalaning.
- borderkolor-CSS-ning xususiyat chegarasining o'rniga foydalaning.
- borderkolorlight-CSS-ning xususiyat chegarasining o'rniga foydalaning.
- borderkolordark-CSS-ning xususiyat chegarasining o'rniga foydalaning.
- - Bu xususiyatga alternativa yo'q.
- height-CSS-ning xususiyat balandligini o'rniga foydalaning.
- Buning o'rniga CSS xususiyatlarining chekkasidan foydalaning.
- Buning o'rniga CSS xususiyatlarining chekkasidan foydalaning.
- Buning o'rniga CSS xususiyatini oq bo'shliqdan foydalaning.
- CSS xususiyatini vertikal-align o'rniga ishlatish.
Brauzerning o'ziga xos TABLE xususiyatlari haqida ko'proq bilib oling.
HTML5 TABLE Element Attributes
Yuqorida aytib o'tganimizdek, global xususiyatlardan tashqari, HTML5 TABLE elementida joriy bo'lgan yagona fazilat bor: border.
Chegara atributi butun jadval atrofidagi chegara va uning ichidagi barcha hujayralarni aniqlash uchun ishlatiladi. HTML5 spetsifikatsiyasiga kiritilishi kerakmi, degan savol tug'iladi, lekin u stolning tuzilishi haqida ma'lumot bergani sababli qolib ketdi, chunki bu oddiy uslubning natijasi emas edi.
Chegara attributini kiritish uchun, chegarani va bo'sh bo'lsa (yoki xususiyatidan tashqarida qoldiring) qiymati 1 ga o'rnatasiz. Ko'pgina brauzerlar cheklovlar uchun 0 va chegara kengligi pikselda e'lon qilish uchun boshqa tamsayı qiymati (2, 3, 30, 500, va boshqalar) ni qo'llab-quvvatlaydi, ammo bu HTML5 da eskirgan. Buning o'rniga, chegara kengligi va boshqa uslublarni aniqlash uchun CSS chegara uslubi xususiyatlaridan foydalaning.
Chegara bilan jadval yaratish uchun quyidagilarni yozing:
border = "1" >
Bu chegara bilan jadval.
HTML5 da eskirgan HTML 4.01 atributlari mavjud. Agar siz HTML 4.01 hujjatlarini yozishni rejalashtirmoqchi bo'lsangiz, ularni bilib olishingiz mumkin, aks holda ularni e'tiborsiz qoldirishingiz mumkin. Ushbu atributlarning ko'plari yuqorida tavsiflangan alternativlarga ega.
Biz HTML5 (va HTML 4.01) da mavjud bo'lgan elementning atributlarini tasvirlaymiz. Bu HTML 4.01 da amal qiladigan, lekin HTML5 da eskirgan TABLO xususiyatlarini tasvirlaydi. HTML 4.01 hujjatlarini hali ham yozib qo'ysangiz, siz ushbu atributlardan foydalanishingiz mumkin, ammo ularning ko'pchiligi HTML5ga ko'chganingizda sahifalaringizni kelajakka moslashtiradigan muqobil variantlarga ega.
Valid HTML 4.01 attributes
Yuqorida ta'riflagan xususiyat.
HTML5dan HTML 4.01 da faqat farq piksellardagi chegara kengligini aniqlash uchun to'liq sonni (0, 1, 2, 15, 20, 200, va boshqalar) belgilashingiz mumkin.
5px chegara bilan jadval yaratish uchun quyidagilarni yozing:
border = "5" >
Ushbu jadval 5px chegaraga ega.
Chegaralardagi ikkita jadvalga misolni ko'ring.
Xususiyat hujayra chegaralari va hujayraning mazmuni o'rtasidagi bo'shliqning miqdorini belgilaydi. Asl qiymati ikki piksel. Mundarija va chegaralar orasidagi bo'shliqni xohlamasangiz, hujayra hajmini 0 ga o'rnating.
Hujayra to'ldirishni 20 ga o'rnatish uchun quyidagilarni yozing:
cellpadding = "20" >
Ushbu jadvalda 20 tagacha hujayra bo'shlig'i mavjud.
Tarmoq chegaralari 20 pikselga bo'linadi.
Jadvalni hujayra qoplamasi bilan taqqoslash
Xususiyat jadval hujayralari va hujayra tarkibi o'rtasidagi bo'shliqni belgilaydi. Hujayra taqsimlagichi kabi, asl qiymati ikkita pikselga o'rnatiladi, shuning uchun hech qanday hujayra oralig'ini xohlamasligingiz uchun uni 0 ga o'rnatishingiz kerak.
Jadvalga hujayra oralig'ini qo'shish uchun quyidagilarni yozing:
cellspacing = "20" >
Ushbu jadval 20 tagacha hujayra bo'shlig'iga ega.
Hujayralar 20 pikselga bo'linadi.
Mobil telefon bilan jihozlangan jadvalga qarang
Atributlar, jadvalning tashqi qismini atrofidagi chegaralarning qaysi qismlarini ko'rish mumkinligini aniqlaydi. Stolingizni to'rt tomondan, har qanday tomondan, yuqoridan va pastdan, chapdan va o'ngdan yoki hech kimga tekkizishingiz mumkin.
Bu erda chap tomon chekkasida joylashgan jadval uchun HTML:
frame = "lhs" >
Ushbu jadval
da bo'ladi
faqat
chap tomonda belgilangan.
Va pastki ramka bilan boshqa misol:
fram = "pastda" >
Ushbu jadval pastki qismdagi ramkaga ega.
Kichkina jadvallarni ko'rib chiqing
Xususiyat ramka xususiyati bilan bir xil, faqat u jadvalning hujayralari atrofidagi chegaralarga ta'sir qiladi. Barcha xujayralar ustunlar orasida, TBODY va TFOOT kabi guruhlar orasidagi yoki hech qanday qoidalar o'rnatishingiz mumkin.
Faqat qatorlar orasidagi chiziqlar bilan jadval yaratish uchun quyidagilarni yozing:
qoidalari = "satrlarni" >
Ushbu 4x4 jadvalda bor
satrlar emas ustunlar
bilan belgilangan
qoidalar xususiyati.
Va boshqasi ustunlar orasidagi satrlar bor:
qoidalari = "cols" >
Bu
jadvali
qaerda
ustunlar
- bu
ta'kidlangan
Mana, qoidalar bilan bir stol namunasi
Atribut ekranli o'quvchi va jadvallarni o'qishda muammolar bo'lishi mumkin bo'lgan boshqa foydalanuvchi agentlari uchun jadval haqida ma'lumot beradi. Xulosa sarlavhasidan foydalanish uchun jadvalning qisqacha tavsifini yozing va bu xususiyati qiymati sifatida qo'ying. Xulosa ko'pgina standart veb-brauzerlarda veb-sahifada ko'rsatilmaydi.
Xulosa bilan oddiy jadvalni qanday yozish kerak:
summary = "Bu plomba ma'lumotlarini o'z ichiga olgan misol jadval. Ushbu jadvalning maqsadi abstraktni ko'rsatishdir." >
ustun 1 satr 1
ustun 2 qatorda 1
ustun 1 satr 2
ustun 2 satr 2
Xulosa bilan jadvalni ko'ring
Xususiyat jadvalning kengligi piksel yoki konteyner elementining foizini belgilaydi. Kenglik o'rnatilmagan bo'lsa, jadval faqatgina maksimal kenglik bilan yuqori elementning kengligi bilan bir xil bo'lishi kerak, chunki u tarkibni ko'rsatishi kerak.
Pikselli aniq kenglikdagi jadval yaratish uchun quyidagilarni yozing:
width = "300" >
Ushbu jadval konteyner kengligining 80% ni tashkil etadi.
Ota-elementning ulushi bo'lgan kengligi bilan jadval yaratish uchun quyidagilarni yozing:
width = "80%" >
Ushbu jadval konteyner kengligining 80% ni tashkil etadi.
Kenglikli jadvalga qarang
HTML 4.01 TABLEN xususiyatidan olib tashlangan
HTML 4.01 da eskirgan va HTML5 da eskirgan TABLE elementining bir xususiyati bor: align . Bu atribut sizga jadvalning yonidagi matnga nisbatan sahifaning qaysi joyida joylashishini belgilash imkonini beradi. Ushbu xususiyat HTML 4.01 da eskirgan va uni ishlatishdan qochishingiz kerak. Buning o'rniga, siz CSS xususiyatidan yoki chekka-chapdan foydalaning: auto; va margin-right: auto; uslublar. Float xususiyati Sizga hizalanadigan atributni taqdim etgan natijaga yaqinroq bo'lgan natijani beradi, lekin qolgan tarkibdagi tarkibni aks ettirishga ta'sir qilishi mumkin. Margin-o'ng: avtomatik; va margin-left: auto; W3C muqobil ravishda taklif qiladigan narsadir.
Hizala xususiyati yordamida eskirgan misol:
align = "o'ng" >
Ushbu jadval to'g'ri hizalanmış
Matn uning atrofida chapga aylanadi
Hizala xususiyati yordamida eskirgan misolni ko'ring.
Va shu bilan bir xil effektni haqiqiy (eskirmas) HTML bilan olish uchun quyidagilarni yozing:
style = "float: o'ng;" >
Ushbu jadval to'g'ri hizalanmış
Matn uning atrofida chapga aylanadi
Quyidagilardan har qanday HTML spetsifikatsiyasining bir qismi bo'lmagan TABLE atributlari tushuntiriladi.
Oldingi ma'lumotlar HTML 4.01 da amal qiladigan, lekin HTML5 da eskirgan bo'lgan HTML elementlarining atributlarini tavsiflaydi.
Quyida TABLO atributlari tavsiflangan. Agar siz sahifalaringizni tasdiqlashingiz va foydalanuvchilaringiz ushbu elementlarni qo'llab-quvvatlaydigan brauzerdan foydalanmasangiz, bu elementlardan foydalanishingiz mumkin. Lekin ularning aksariyati zamonaviy brauzerlarda qo'llab-quvvatlanmaydi yoki boshqa standartlarga mos keladigan muqobil variantlarga ega.
Ushbu xususiyatlarni HTML jadvallarida ishlatishni tavsiya etamiz .
Xususiyat CSS-ning keng ko'lamda qo'llab-quvvatlanmasidan oldin kiritilgan eski xususiyatdir. Jadvalning orqa fon rangini o'zgartirishga imkon beradi. Rangli nom yoki onaltılık kod o'rnatishingiz mumkin. Bu xususiyat hali juda ko'p brauzerlarda ishlaydi, ammo kelajakda tasdiqlangan HTML uchun siz uni ishlatmasligingiz va o'rniga CSS-dan foydalanishingiz kerak.
Ushbu xususiyatning eng yaxshi alternativi - uslublar mulki.
Jadvalning orqa fon rangini o'zgartirish uchun quyidagilarni yozing:
style = "background-color: #ccc;" >
Ushbu jadval gri fonga ega
Bgcolor xususiyati o'xshash, borderkolor xususiyati sizning xususiyatini rangini o'zgartirishga imkon beradi. Bu xususiyat faqat Internet Explorer tomonidan quvvatlanadi. Buning o'rniga, border-color uslubi xususiyatidan foydalaning.
Jadvalning chegara rangini o'zgartirish uchun quyidagilarni yozing:
style = "border-color: red;" >
Ushbu jadval qizil chegaraga ega.
Bordercolorlight va bordercolordark xususiyatlari sizning jadvalingiz atrofida 3D chegarani yaratish uchun Internet Explorer-ga kiritilgan. Biroq, IE8 va yuqoridagi kabi, bu faqat IE7 standartlari tartibi va Quirks rejimida quvvatlanadi . Microsoft ushbu xususiyatlar endi qo'llab-quvvatlanmagani haqida xabar beradi.
Qisqa muddat ichida TABLE elementidagi ranglar xususiyati brauzerlarga jadvalning qancha ustun borligini bilish uchun taklif qilingan. Buning asosiy sababi katta jadvallarni ko'rsatish jarayonini tezlashtirishga yordam beradi. Biroq, bu faqat Internet Explorer tomonidan amalga oshirildi va IE8 va yuqoridagi kabi, bu faqat IE7 Standartlar tartibi va Quirks rejimida qo'llab-quvvatlanadi.
Ko'pgina odamlar, jadvallar uchun balandlik xususiyati bo'lganligini hisobga olib, kenglik xususiyati (HTML5 da eskirgan) mavjudligi sababli. Biroq, jadvallar CSS yoki width xususiyati tarkibining kengligi yoki belgilangan kengliklariga mos bo'lgani uchun balandlik cheklanmagan. Buning o'rniga, brauzerlar balandligi atributiga jadvalning minimal balandligini belgilashga ruxsat berdi. Jadval bu balandlikdan balandroq bo'lsa, u uzunroq ko'rinishi kerak edi. Lekin siz mulkni ishlatishingiz kerak
CSS-ning balandligi xususiyati bilan siz CSS xususiyatidan foydalansangiz, balandlikdagi kontent bilan nima sodir bo'lishini aniqlash uchun balandlikni cheklashingiz mumkin.
Bir stolda minimal balandlikni belgilash uchun quyidagilarni yozing:
style = "height: 30em;" >
Ushbu jadval kamida 30 ems.
Stolning chap / o'ng tomonlari (hspace) va yuqori / pastki (vspace) atrofidagi ikkita atributlar va qo'shilgan joy. Buning o'rniga uslublar xususiyatidan foydalaning.
Vertikal maydonni 20 pikselga va gorizontal maydonni 40 pikselga o'rnatish uchun quyidagilarni yozing:
style = "margin: 20px 40px;"
Ushbu jadval 20 pikselli vspace va 40 piksellik hspacega ega.
Xususiyat jadvalning mazmuni yuqori element yoki oynaning chetida o'ralishi yoki gorizontal aylantirishni kuchaytirishi kerakligini belgilaydigan boolean xususiyatdir. Buning o'rniga CSS xususiyatini ishlatib, har bir jadval xujayrasining o'rash xususiyatlarini belgilashingiz kerak.
Ko'p matnli ustunni o'ramaslik uchun quyidagilarni yozing:
style = "white-space: nowrap;" > Bu tonna kontentli ustun. Biroq konteynerdan kengroq bo'lsa ham, matn keyingi qatorga o'ralmasligi kerak, balki brauzer oynasini barcha kontentni ko'rish uchun gorizontal aylantirishga majbur qiladi.
Nihoyat, attributlar har bir hujayraning mazmuni hujayralar ichida vertikal ravishda moslashishi kerakligini belgilaydi. Ushbu yaroqsiz atributning o'rniga, CSS mosligini har bir xonada hizalamayı o'zgartirish kerakli foydalaning. Hujayra tarkibi boshqa, kattaroq hujayralar tomonidan yaratilgan bo'sh maydondan kam bo'lmasa, bu uslubning ta'sirini sezmaysiz.
Hujayraning pastki qismga (o'rta emas, balki standart sifatida) hizalanishini majburlash uchun quyidagilarni yozing:
Bu hujayralar qolganlardan ko'ra ko'proq vaqtni oladi va shuning uchun balandlikni balandroq qilishga majbur qiladi. Shunday qilib, vertikal hizalangan hujayraning pastki tomonga tenglashtirilganligini ko'rasiz.
style = "vertical-align: bottom;" > Pastda joylashgan tarkib.
Mundarija.