การจัดรูปแบบ ตาราง 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;}