HTML Table Borders

วิธีการเพิ่มเส้นขอบ

เมื่อคุณเพิ่มเส้นขอบให้กับตาราง จะเป็นการเพิ่มเส้นขอบรอบ ๆ แต่ละ Cell การเพิ่มเส้นขอบให้ตารางสามารถทำได้โดยใช้ CSS Property border กับ Elements table, th และ td

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

การสร้างเส้นขอบตาราง 1 เส้น

จากตัวอย่างด้านบนจะเป็นการสร้างเส้นขอบตารางแบบ 2 เส้น แต่ถ้าอยากให้เหลือเส้นขอบตารางเพียงเส้นเดียว จะต้องใช้ Property CSS border-collapse

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

เพิ่ม Style ให้กับเส้นขอบตาราง

ในกรณีที่ต้องการใส่สีพื้นหลังให้แต่ละ Cell ในตารางและให้เส้นขอบเป็นสีขาว ซึ่งเป็นสีเดียวกันกับพื้นหลังของเอกสาร ซึ่งในกรณีจะต้องตั้งค่าให้มองไม่เห็นเส้นขอบ

				
					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;
}

แต่ถ้าต้องการให้เส้นขอบนอกของตารางหายไป ดังรูป

				
					th, td {
  border: 1px solid black;
  border-radius: 10px;
}

เส้นตารางแบบจุด

ด้วยคำสั่ง border-style สามารถสร้างเส้นขอบตารางได้หลากหลายรูปแบบ เช่น เส้นทึบ เส้นประ หรือเส้นจุด ดังตัวอย่างภาพด้านล่าง แสดงการสร้างเส้นขอบตารางแบบ จุด (dotted)

ซึ่งเราสามารถสร้างรูปแบบเส้นขอบของตารางได้หลากหลายรูปแบบ ดังนี้

dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden

				
					th, td {
  border-style: dotted;
}

ใส่สีขอบตาราง

การใส่สีขอบให้ตาราง ให้ใช้คำสั่ง border-color

				
					th, td {
  border-color: #96D4D4;
}