HTML JADVALLAR
HTML jadvaliga namuna
Tartib raqami
|
Ismi
|
Familiyasi
|
Natijalar
|
1
|
Marlyn
|
Monroe
|
95
|
2
|
James
|
Bond
|
98
|
3
|
David
|
Beckham
|
48
|
4
|
Javokhir
|
Kudratov
|
90
|
HTML Jadvalini Ifodalash Namuna:
Will |
Smith |
50 |
Micheal |
Jackson |
94 |
Namunaga Izohlar:
Jadvallar tegi bilan belgilanadi.
Jadvallar tegi yordamida qatorlarga bo'linadi.
Jadval qatorlari tegi orqali jadval ma'lumotlariga bo'linadi;
Shuningdek jadval qatori | tegi bilan jadval sarlavhasini yozish mumkin.
... | jadval ma'lumotlari jadvalning konteyneri hisoblanadi.
Ular turli xildagi ma'lumotlarni o'z ichiga oladi misol uchun matn, rasmlar, ro’yxatlar, boshqa jadvallar va h.k.
HTML jadvali border atributi bilan
Agar siz jadvalning chegaralarini aniqlamasangiz, jadval chegarasiz ko'rsatiladi.
Chegaralar quyidagi atribut orqali qo'shiladi:
Namuna:
Bruno |
Mars |
50 |
Bob |
Marley |
94 |
... border atributi HTML standardlariga to’g’ri kelmaydi. border atributini yaxshisi CSS da ishlatilgani ma’qul.
Border(chegara) kiritish uchun, CSS border xususiyatidan foydalaning:
Namuna:
table, th, td {
border: 1px solid black;
}
HTML jadvalida collapsed borders
Agar siz jadval chegaralari faqat chiziq holatida bo’lishini hohlasangiz CSS border-collapse atributini ishlating
Namuna:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
HTML jadvalda cell padding
Jadval chegarasidan yozuvgacha bo’lgan masofani o’rnatish, agar o’rnatilmasa, yozuv jadval chegarasiga yopishib yoziladi.
padding o'rnatish uchun, CSS padding xususiyatidan foydalaning:
Namuna:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
Jadval sarlavhasi | tegi bilan aniqlanadi.
Deyarli barcha asosiy browserlar jadval sarlavhasini qalin va markazda ko’rsatadi.
Namuna:
Ismi |
Familiyasi |
Ballari |
Sarvarkhuja |
Murodov |
94 |
Teg ichidagi qatorlarni chapga tekislash uchun,CSS text-align xususiyatidan foydalaning:
Namuna:
th {
text-align: left;
}
HTML jadvallarida chegara oralig’i
Chegara oralig’i yacheykalar orasidagi oraliq belgilaydi.
Jadvalda chegara oralig’i o’rnatish uchun, CSS border-spacing ni ishlatamiz.
Namuna:
table {
border-spacing: 5px;
}
... Agar jadval chegalari buzilsa, chegara-oralig’ini ta’siri yo’q.
Bir qancha ustunlarni umumiy katakka joylash
Buning uchun, colspan atributidan foydalanamiz:
Namuna:
Ismi |
Telephone |
Bill Gates |
555 77 854 |
555 77 855 |
Bir qancha ustunni jadval yacheykalari ichiga qo’yish
Yacheykaga bittadan ko’p ustunni qo'yish uchun colspan atributidan foydalaniladi:
Namuna:
Name: |
Steve Jobs |
Telephone: |
555 77 854 |
555 77 855 |
Htmlda yaratilgan jadvalga nom berish
Jadvalga izoh qo’shish uchun, tegidan foydalaniladi:
Namuna:
Monthly savings
Oy |
Daromad |
Yanvar |
$100 |
Fevral |
$50 |
... tegidan so’ng darhol tegi ishlatilishi kerak.
Jadval uchun maxsus ko’rinish
Jadvalda maxsus ko’rinishini aniqlash uchun, jadvalga bir id atributini qo’shish kerak:
Namuna:
Ismi |
Familiyasi |
Ballari |
Mishel |
Jackson |
94 |
CSS faylida siz jadval ko’rinishini belgilashingiz mumkin:
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
va yana boshqa stillarni qo’shishingiz mumkin:
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white; background-color: black;
}
HTMLdagi har bir elementining turiga qarab standart ko’rinish qiymati bo’ladi. Ko’p elementlar uchun standard ko’rsatsh qiymati block yoki inline.
Block-level elementlari
Block-level elementlari har doim yangi qatordan boshlanib mavjud bo'lgan joygacha to'ladi.(Chapdan o'nggacha barcha bo'sh joyni to'ldiradi)
The elementi block-level elementi hisoblanadi.
Block-level elementlariga namunalar:
|
Do'stlaringiz bilan baham: |