การกำหนดระยะห่างระหว่างช่องตาราง

Cell padding : ระยะห่างจากเส้นขอบของตาราง

       เราสามารถกำหนดระยะห่าง ทั้งแนวตั้งและแนวนอนของข้อความและรูปภาพจากเส้นขอบภายในช่องตารางได้ ด้วยการกำหนดค่า CELLPADDING="x" เมื่อ x มีหน่วยเป็นพิกเซล (ค่าปกติถ้าไม่ค่า padding จะมีค่าเป็น 1 เสมอ) ถ้าเราต้องการให้ไม่มีการเว้นระยะจากขอบสามารถกำหนดค่าให้เป็น 0 ได้
รูปแบบคำสั่ง
<table border="1" cellspacing="0" cellpadding="10" width="520" align="center">
<tr>
<td bgcolor="#ffffff" width="148"><img src="Freedom Rose.jpg" width="150" height="150" border="1" /></td>
<td bgcolor="#ffffff" width="152">ภาพดอกไม้ห่างจากขอบ 10 Pixel </td>
</tr>
</table>
การแสดงผล
ภาพดอกไม้ห่างจากขอบ 10 Pixel
Cell spacing : ระยะห่างระหว่างช่องตาราง
           ในการสร้างตารางขนาด 2 แถว 2 คอลัมน์ (4 ช่อง) นั้น ถ้าเราจินตนาการถึงรูปสี่เหลี่ยมใหญ่ที่มีรูปสี่เหลี่ยมเล็ก รูปวางซ้อนกันอยู่จะทำให้เรามองเห็นว่า ในตารางจะมีเส้นขอบอยู่ 2 เส้นคือ เส้นขอบของสี่เหลี่ยมใหญ่ภายนอก และเส้นขอบของสี่เหลี่ยมเล็ก ที่อยู่ภายใน ระยะห่างระหว่างเส้นขอบทั้งสองนี้เราเรียกว่า Cell spacing ค่าปกติของระยะห่างของเส้นขอบตารางคือ 2 ถ้าเราต้องการเส้นขอบที่บางมากๆ สามารถกำหนดเป็นค่า 0 ได้
รูปแบบคำสั่ง

<table border="3" cellspacing="10" cellpadding="0" width="600">

<tr>
<td width="423">

<font size="2" face="MS Sans Serif, Tahoma, sans-serif">ข้อความภายในตารางที่กำหนดระยะห่างจากเส้นขอบ padding ไว้ในตาราง</font>

</td>
<td width="173">

<img src="Freedom Rose.jpg" width="150" height="150" />

</td>
</tr>
<tr>

<td><font size="2" face="MS Sans Serif, Tahoma, sans-serif">ข้อความในตารางที่ระยะห่างเท่ากับ 10 Pixel </font></td>
<td><font size="2" face="MS Sans Serif, Tahoma, sans-serif">ดอกกุหลาบ</font></td>

</tr>

</TABLE>
การแสดงผล
ข้อความภายในตารางที่กำหนดระยะห่างจากเส้นขอบ padding ไว้ในตาราง
ข้อความในตารางที่ระยะห่างเท่ากับ 10 Pixel ดอกกุหลาบ