หากต้องการสร้างเส้นขอบที่ยุบใน HTML ให้ใช้คุณสมบัติ CSS ที่ยุบกรอบ คุณสมบัตินี้สามารถมีค่าต่อไปนี้:
| มูลค่าทรัพย์สิน | คำอธิบาย |
|---|---|
| separate | ไม่มีการตัดขอบออก |
| ยุบ | นี่จะยุบเส้นขอบให้เป็นเส้นขอบเดียว |
วิธีเพิ่ม
ตัวอย่าง
คุณสามารถลองเรียกใช้รหัสต่อไปนี้เพื่อสร้างเส้นขอบที่ยุบด้วยการยุบคุณสมบัติ:
<!DOCTYPE html>
<html>
<head>
<style>
table {border-collapse: collapse; }
table, td, th { border: 1px solid blue; }
</style>
</head>
<body>
<h1>Technologies</h1>
<table>
<tr>
<th>IDE</th>
<th>Database</th>
</tr>
<tr>
<td>NetBeans IDE</td>
<td>MySQL</td>
</tr>
</table>
</body>
</html> ตัวอย่าง
คุณสามารถลองเรียกใช้รหัสต่อไปนี้เพื่อสร้างเส้นขอบที่ยุบโดยแยกคุณสมบัติ:
<!DOCTYPE html>
<html>
<head>
<style>
table { border-collapse: separate; }
table, td, th { border: 1px solid blue; }
</style>
</head>
<body>
<h1>Technologies</h1>
<table>
<tr>
<th>IDE</th>
<th>Database</th>
</tr>
<tr>
<td>NetBeans IDE</td>
<td>MySQL</td>
</tr>
</table>
</body>
</html> 