เส้นขอบตาราง 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คุณสมบัติ คุณสามารถกำหนดลักษณะที่ปรากฏของเส้นขอบ
อนุญาตให้ใช้ค่าต่อไปนี้:
dotteddashedsoliddoublegrooveridgeinsetoutsetnonehidden
ตัวอย่าง
th, td {
border-style: dotted;
}
เส้นขอบสี
ด้วยborder-colorคุณสมบัติ คุณสามารถกำหนดสีของเส้นขอบได้
ตัวอย่าง
th, td {
border-color: #96D4D4;
}