ผลลัพธ์ที่ได้จะเป็นดังนี้:
2. ใช้แอตทริบิวต์เส้นขอบสีเข้ม (bordercolordark) และเส้นขอบสีอ่อน (bordercolorlight) ของตารางเพื่อสร้างตารางเส้นบาง:
หรือกด Ctrl+Alt+T เพื่อแทรกตาราง และตั้งค่าตามที่แสดงในกล่องโต้ตอบ (รายการที่มีกล่องสีแดงได้รับการแก้ไข มิฉะนั้นจะไม่มีผลใดๆ)
หลังจากเลือกตารางแล้ว ให้กด F9 เพื่อขยายกลุ่มแผง "Tag Inspector" และตั้งค่าในแผง "Attributes" ดังที่แสดงด้านล่าง:
หลังจากเสร็จแล้วจะมีลักษณะดังนี้:
3. ตั้งค่าการยุบเส้นขอบแอตทริบิวต์ CSS ของตารางให้ยุบ: กด Ctrl+Alt+T เพื่อแทรกตาราง การตั้งค่าของกล่องโต้ตอบจะเหมือนกับวิธีที่ 2 เลือกตารางและตั้งค่าสีเส้นขอบของตารางในแผงคุณสมบัติ:
กด F9 เพื่อขยายแผง "Tag Inspector" และกรอก "border-collapse:collapse;" ใน "style" ในแผง "Attributes"
หลังจากเสร็จแล้วจะมีลักษณะดังนี้:
หมายเหตุ: ตารางเส้นบางที่สร้างโดยวิธีที่ 3 เหมาะสำหรับ IE5+ เท่านั้น วิธีที่เข้ากันได้มากที่สุดคือวิธีที่ 1 วิธีที่ 2 ไม่ใช่ตารางเส้นบางในแง่ที่เข้มงวด
เคล็ดลับ: ในวิธีที่ 1 คุณสามารถใช้ CSS เพื่อกำหนดสีพื้นหลังของเซลล์ตารางเพื่อลดจำนวนโค้ด:
<สไตล์>
.บาง{พื้นหลัง:#000000}
.thin td{พื้นหลัง:#FFFFFF}
</สไตล์>
<table width="200" border="0" cellspacing="1" cellpadding="0" class="thin">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</ตาราง>