ตาราง CSS

ลักษณะของตาราง HTML สามารถปรับปรุงได้อย่างมากด้วย CSS:

ขอบโต๊ะ

ในการระบุเส้นขอบของตารางใน CSS ให้ใช้borderคุณสมบัติ

ตัวอย่างด้านล่างระบุเส้นขอบสีดำสำหรับองค์ประกอบ <table>, <th> และ <td>:

table, th, td {
border: 1px solid black;
}

ตารางด้านบนอาจดูเล็กน้อยในบางกรณี หากคุณต้องการตารางที่ควรจะขยายทั้งหน้าจอ (เต็มความกว้าง) ให้เพิ่มwidth: 100%ใน <table> องค์ประกอบ:

table {
width: 100%;
}

สังเกตว่าตารางในตัวอย่างด้านบนมีเส้นขอบคู่ เนื่องจากทั้งตารางและองค์ประกอบ <th> และ <td> มีเส้นขอบแยกจากกัน

หากต้องการลบเส้นขอบคู่ ให้ดูตัวอย่างด้านล่าง

คุณสมบัติborder-collapseกำหนดว่าควรจะยุบเส้นขอบตารางเป็นเส้นขอบเดียว:

table {
border-collapse: collapse;
}

หากคุณต้องการเพียงเส้นขอบรอบตาราง ให้ระบุborderคุณสมบัติสำหรับ <table> เท่านั้น:

table {
border: 1px solid black;
}