Jadvallar bilan ishlash

CSS da jadval chegaralarini belgilash uchun border xossasidan foydalaniladi.

Quyida namunani ko'rishingiz mumkin:

Table

<!DOCTYPE html> <html> <head> <title>Jadval</title> </head> <style> table,th,td{ border: 1px solid black; } </style> <body> <table> <tr> <th>Kurs</th> <th>Soat</th> </tr> <tr> <td>PHP</td> <td>20-00</td> </tr> <tr> <td>CSS</td> <td>20-00</td> </tr> </table> </body> </html>

Qarang bu yerda <th> va <td> teglarning o'zida alohida chegaralar mavjud(rasmda).

Jadval chegaralarini o'chirish

border-collapse xossasi jadval chegaralarini yagona chegaraga birlashtirishni ta'minlaydi.

<style> table { border-collapse: collapse; } table,th,td{ border: 1px solid black; } </style>

Agar jadval orasidagi chegaralarni olib tashlashni xohlasangiz, faqat <table> tegi uchun border xossasini ishlating.

Jadval eni va balandligi

Jadvalning balandligi va eni height va width xossalari bilan ifodalanadi.Quyidagi namunada jadvalning eni 100% ga, balandligi 50px ga o'rnatilganini ko'rishingiz mumkin:

jadval

<!DOCTYPE html> <html> <head> <style> table, td, th { border: 1px solid black; }

table { border-collapse: collapse; width: 100%; }

th { height: 50px; } </style> </head> <body> <table> <tr> <th>Darslar</th> <th>Soatlari</th> <th>Kunlari</th> </tr> <tr> <td>PHP</td> <td>20-00</td> <td>Dushanba</td> </tr> <tr> <td>CSS</td> <td>20-00</td> <td>Chorshanba</td> </tr> <tr> <td>PYTHON</td> <td>20-00</td> <td>Juma</td> </tr> <tr> <td>C++</td> <td>20-00</td> <td>Dushanba</td> </tr> </table> </body> </html>

Gorizontal joylashuv

text-align xossasi <th va <td> ichidagi ma'lumotlarning chap, o'ng, o'rtaga(left,right,center) joylashtirish uchun qo'llanadi(faqat bular uchun emas).

<th> elementi kontentlari standart o'rtada joylashadi, <td> elementi kontentlari esa chap tomonga joylashadi.

Quyida namunani ko'rishingiz mumkin:

Ishlatish uchun namuna: text-align: center;

Vertikal joylashuv

vertical-align xossasi <th va <td> ichidagi ma'lumotlarning tepa, past, markazga joylashtirish uchun qo'llanadi(faqat bular uchun emas).

Standart, jadvaldagi kontentlarning vertikal joylashuvi markazlashgan(<th> va <td> ikkovi uchun).

Namuna:

td{
height: 50px;
vertical-align: bottom;
}

Jadval ichki itarilishi(padding)

Jadvaldai kontentlarni va chegaralarni orasidagi bo'shliqlarni nazorat qilish uchun <td> va <th> elementlariga padding xossasini qo'shish kifoya:

td{
padding: 10px;
height: 50px;
vertical-align: bottom;
}

Gorizontal ajratuvchi chiziqlar

<th> va <td> elementlariga border-bottom xossasini gorizontal ajratuvchi chiziqlar hosil qilish uchun qo'shing:

th,td{
border-bottom: 1px solid #ddd;
height: 20px;
padding: 10px;
}

Hover jadval

Sichqonchani ovorganda jadvalning qatorlarini belgilash uchun :hover selektorini <tr> elementiga yozing:

tr:hover {background-color:#f5f5f5;}

Zebra jadval

tr:nth-child(odd) {background-color: #f2f2f2;}

Yuqoridagi namunadagidek, zebra chiziqli jadval yaratish uchun biz nth-child() selektorini va background-color ni <tr> elementiga yozing. even bu qatorlarni juftiga zebra chiziq beradi. odd - qator toqlari uchun.

Rangli jadval

Rangli jadval hosil qilish ham oson. Buning uchun Jadvalning <th> elementi uchun matn rangi va orqa foni yoziladi. Rasmning tagida ko'rishingiz mumkin:

th{ background: #4CAF50; color: white;}