การจัดรูปแบบ ตาราง HTML
ใช้ CSS เพื่อทำให้ตารางของคุณดูดีขึ้น
ตาราง HTML - ลายม้าลาย
หากคุณเพิ่มสีพื้นหลังในแถวอื่นๆ ของตาราง คุณจะได้เอฟเฟกต์ลายทางม้าลายที่สวยงาม
1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 |
หากต้องการจัดรูปแบบองค์ประกอบแถวตารางอื่นๆ ให้ใช้:nth-child(even)
ตัวเลือกดังนี้:
ตัวอย่าง
tr:nth-child(even) {
background-color: #D6EEEE;
}
หมายเหตุ:หากคุณใช้(odd)
แทน
(even)
การจัดรูปแบบจะเกิดขึ้นในแถว 1,3,5 เป็นต้น แทนที่จะเป็น 2,4,6 เป็นต้น
ตาราง HTML - ลายทางม้าลายแนวตั้ง
ในการสร้างลายทางม้าลายแนวตั้ง ให้จัดรูปแบบคอลัมน์ อื่นๆ แทนแถวอื่นๆ ทุกแถว
1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 |
ตั้งค่า:nth-child(even)
สำหรับองค์ประกอบข้อมูลตารางดังนี้:
ตัวอย่าง
td:nth-child(even),
th:nth-child(even) {
background-color: #D6EEEE;
}
หมายเหตุ:ใส่:nth-child()
ตัวเลือกทั้งสองth
และtd
องค์ประกอบ ถ้าคุณต้องการกำหนดสไตล์ทั้งบนส่วนหัวและเซลล์ตารางปกติ
รวมลายเส้นม้าลายแนวตั้งและแนวนอน
คุณสามารถรวมการจัดสไตล์จากสองตัวอย่างด้านบน และจะมีแถบบนแถวเว้นแถวและคอลัมน์อื่นๆ ทุกคอลัมน์
หากคุณใช้สีโปร่งใส คุณจะได้เอฟเฟกต์ที่ทับซ้อนกัน
ใช้rgba()
สีเพื่อระบุความโปร่งใสของสี:
ตัวอย่าง
tr:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
th:nth-child(even),td:nth-child(even) {
background-color: rgba(150,
212, 212, 0.4);
}
วงเวียนแนวนอน
ชื่อจริง | นามสกุล | ออมทรัพย์ |
---|---|---|
ปีเตอร์ | กริฟฟิน | $100 |
ลัวส์ | กริฟฟิน | $150 |
โจ | สเวนสัน | $300 |
หากคุณระบุเส้นขอบเฉพาะที่ด้านล่างของแต่ละแถวของตาราง คุณจะมีตารางที่มีตัวแบ่งแนวนอน
เพิ่มborder-bottom
คุณสมบัติให้กับ
tr
องค์ประกอบทั้งหมดเพื่อรับตัวแบ่งแนวนอน:
ตัวอย่าง
tr {
border-bottom: 1px solid #ddd;
}
ตารางโฮเวอร์ได้
ใช้:hover
ตัวเลือก
tr
เพื่อไฮไลต์แถวของตารางเมื่อวางเมาส์เหนือ:
ชื่อจริง | นามสกุล | ออมทรัพย์ |
---|---|---|
ปีเตอร์ | กริฟฟิน | $100 |
ลัวส์ | กริฟฟิน | $150 |
โจ | สเวนสัน | $300 |
ตัวอย่าง
tr:hover {background-color: #D6EEEE;}