เพื่อให้ ตาราง HTML ดูสวยงามและอ่านง่ายขึ้น เราสามารถใช้ CSS เพื่อปรับแต่งสี พื้นหลัง เส้นขอบ หรือแม้แต่เอฟเฟกต์เมื่อเมาส์วางบนแถวได้
HTML Table – ลายทาง
| 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;
}
📝 Note
หากเปลี่ยน (even) เป็น (odd) แถวที่ 1, 3, 5 จะมีสีพื้นหลังแทนแถวคู่
HTML Table – สีแถวตามแนวตั้ง
สำหรับการใส่สีในแนวคอลัมน์เว้นคอลัมน์ ให้ใช้
:nth-child(even) ใน <th> และ <td> | 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 |
td:nth-child(even), th:nth-child(even) {
background-color: #D6EEEE;
}
📝 Note
หากต้องการใส่สีพื้นหลังทั้งในส่วนหัว
<th> และคอลัมน์เว้นคอลัมน์ ให้ใช้ td:nth-child() และ th:nth-child() พร้อมกัน
ตกแต่งตารางแบบผสมทั้งแนวตั้งและแนวนอน
เราสามารถผสมการใส่สีแนวแถวและแนวคอลัมน์เข้าด้วยกันได้
โดยใช้สีแบบโปร่งใส (Transparent) ด้วย
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);
}
เส้นแบ่งตารางแนวนอน
| ชื่อ | นามสกุล | แต้มสะสม |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
หากต้องการให้มีเส้นแบ่งระหว่างแถว ใช้คุณสมบัติ (property)
border-bottom กับองค์ประกอบ (element) <tr>
tr {
border-bottom: 1px solid #ddd;
}
ตารางเน้นเมื่อนำเมาส์ไปวางในตาราง (Hover)
| ชื่อ | นามสกุล | แต้มสะสม |
|---|---|---|
| Peter | Griffin | $100 |
| Lois | Griffin | $150 |
| Joe | Swanson | $300 |
เพิ่มเอฟเฟกต์เมื่อผู้ใช้นำเมาส์วางบนแถว (Hover) ด้วย :hover ใน <tr>
tr:hover {background-color: #D6EEEE;}