สไตล์ตาราง CSS
แผ่นรองโต๊ะ
ในการควบคุมช่องว่างระหว่างเส้นขอบและเนื้อหาในตาราง ให้ใช้
padding
คุณสมบัติบนองค์ประกอบ <td> และ <th>:
ตัวอย่าง
th, td
{
padding: 15px;
text-align: left;
}
วงเวียนแนวนอน
ชื่อจริง | นามสกุล | ออมทรัพย์ |
---|---|---|
ปีเตอร์ | กริฟฟิน | $100 |
ลัวส์ | กริฟฟิน | $150 |
โจ | สเวนสัน | $300 |
เพิ่มborder-bottom
คุณสมบัติไปที่ <th> และ <td> สำหรับตัวแบ่งแนวนอน:
ตัวอย่าง
th, td {
border-bottom: 1px solid #ddd;
}
ตารางโฮเวอร์ได้
ใช้:hover
ตัวเลือกบน <tr> เพื่อเน้นแถวของตารางเมื่อวางเมาส์เหนือ:
ชื่อจริง | นามสกุล | ออมทรัพย์ |
---|---|---|
ปีเตอร์ | กริฟฟิน | $100 |
ลัวส์ | กริฟฟิน | $150 |
โจ | สเวนสัน | $300 |
ตัวอย่าง
tr:hover {background-color: yellow;}
โต๊ะลาย
ชื่อจริง | นามสกุล | ออมทรัพย์ |
---|---|---|
ปีเตอร์ | กริฟฟิน | $100 |
ลัวส์ | กริฟฟิน | $150 |
โจ | สเวนสัน | $300 |
สำหรับตารางลายทางม้าลาย ให้ใช้nth-child()
ตัวเลือกและเพิ่ม a background-color
ให้กับแถวตารางคู่ (หรือคี่) ทั้งหมด:
ตัวอย่าง
tr:nth-child(even) {background-color: #f2f2f2;}
สีโต๊ะ
ตัวอย่างด้านล่างระบุสีพื้นหลังและสีข้อความขององค์ประกอบ <th>:
ชื่อจริง | นามสกุล | ออมทรัพย์ |
---|---|---|
ปีเตอร์ | กริฟฟิน | $100 |
ลัวส์ | กริฟฟิน | $150 |
โจ | สเวนสัน | $300 |
ตัวอย่าง
th {
background-color: #04AA6D;
color: white;
}