เส้นขอบตาราง HTML
ตาราง HTML สามารถมีเส้นขอบของสไตล์และรูปร่างต่างๆ ได้
วิธีเพิ่มเส้นขอบ
เมื่อคุณเพิ่มเส้นขอบให้กับตาราง คุณยังเพิ่มเส้นขอบรอบๆ แต่ละเซลล์ของตารางด้วย:
หากต้องการเพิ่มเส้นขอบ ให้ใช้border
คุณสมบัติ CSS บน
table
, th
, และ
td
องค์ประกอบ:
ตัวอย่าง
table, th, td
{
border: 1px solid black;
}
เส้นขอบตารางที่ยุบ
border-collapse
เพื่อหลีกเลี่ยงการมีเส้นขอบคู่เหมือนในตัวอย่างด้านบน ให้ตั้งค่า คุณสมบัติCSS เป็น collapse
.
สิ่งนี้จะทำให้เส้นขอบยุบเป็นเส้นขอบเดียว:
ตัวอย่าง
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
เส้นขอบตารางสไตล์
หากคุณกำหนดสีพื้นหลังของแต่ละเซลล์ และกำหนดเส้นขอบเป็นสีขาว (เหมือนกับพื้นหลังของเอกสาร) คุณจะมองเห็นเส้นขอบที่มองไม่เห็น:
ตัวอย่าง
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
ขอบโต๊ะกลม
ด้วยborder-radius
คุณสมบัติทำให้ขอบโค้งมน:
ตัวอย่าง
table, th, td {
border: 1px solid
black;
border-radius: 10px;
}
ข้ามเส้นขอบรอบตารางโดยละเว้นtable
จากตัวเลือก css:
ตัวอย่าง
th, td {
border: 1px solid
black;
border-radius: 10px;
}
เส้นขอบตารางประ
ด้วยborder-style
คุณสมบัติ คุณสามารถกำหนดลักษณะที่ปรากฏของเส้นขอบ
อนุญาตให้ใช้ค่าต่อไปนี้:
dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden
ตัวอย่าง
th, td {
border-style: dotted;
}
เส้นขอบสี
ด้วยborder-color
คุณสมบัติ คุณสามารถกำหนดสีของเส้นขอบได้
ตัวอย่าง
th, td {
border-color: #96D4D4;
}