ตาราง CSS
ลักษณะของตาราง HTML สามารถปรับปรุงได้อย่างมากด้วย CSS:
บริษัท | ติดต่อ | ประเทศ |
---|---|---|
กล่องใส่อาหารของอัลเฟรด | Maria Anders | เยอรมนี |
ซูเปอร์มาร์เก็ตของ Berglund | คริสติน่า เบิร์กลุนด์ | สวีเดน |
ศูนย์การค้ามอนเตซูมา | ฟรานซิสโก ชาง | เม็กซิโก |
ค้าขายจริงจัง | โรแลนด์ เมนเดล | ออสเตรีย |
ซื้อขายเกาะ | เฮเลน เบนเน็ตต์ | สหราชอาณาจักร |
อาหารราชวงศ์ | Philip Cramer | เยอรมนี |
ห้องเก็บไวน์ Laughing Bacchus | โยชิ ทันนามูริ | แคนาดา |
รวมโกดังอาหาร | Giovanni Rovelli | อิตาลี |
ขอบโต๊ะ
ในการระบุเส้นขอบของตารางใน 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;
}