การสร้างตาราง | การกำหนดตำแหน่งการจัดวางตาราง | การกำหนดความกว้างของตาราง | การจัดวางข้อความในตาราง | การแทรกรูปในตาราง
การกำหนดระยะห่างเส้นขอบในเส้นตาราง | การกำหนดระยะห่างระหว่างช่องตาราง | ตารางและสีพื้นหลัง | การรวมคอลัมภ์ | การรวมแถว | การสร้างตารางซ้อนกัน

---

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

เราสามารถกำหนดระยะห่าง ทั้งแนวตั้งและแนวนอนของข้อความและรูปภาพจากเส้นขอบภายในช่องตารางได้ ด้วยการกำหนดค่า CELLPADDING="x" เมื่อ x มีหน่วยเป็นพิกเซล (ค่าปกติถ้าไม่ค่า padding จะมีค่าเป็น 1 เสมอ) ถ้าเราต้องการให้ไม่มีการเว้นระยะจากขอบสามารถกำหนดค่าให้เป็น 0 ได้

รูปแบบคำสั่ง
<TABLE BORDER="1" WIDTH="450" CELLPADDING="10">     <TR>         <TD>ข้อความภายในตารางที่กำหนดระยะห่างจากเส้นขอบ padding ไว้ในตาราง</TD>         <TD><IMG SRC="chicklittle.gif" border="1"></TD>     </TR>     <TR>         <TD>ข้อความในตารางที่ระยะห่างเท่ากับ 10 พิกเซล</TD>         <TD>chicklittle</TD>     </TR> </TABLE>

Cell spacing : ระยะห่างระหว่างช่องตาราง

ในการสร้างตารางขนาด 2 แถว 2 คอลัมน์ (4 ช่อง) นั้น ถ้าเราจินตนาการถึงรูปสี่เหลี่ยมใหญ่ที่มีรูปสี่เหลี่ยมเล็ก 4 รูปวางซ้อนกันอยู่จะทำให้เรามองเห็นว่า ในตารางจะมีเส้นขอบอยู่ 2 เส้นคือ เส้นขอบของสี่เหลี่ยมใหญ่ภายนอก และเส้นขอบของสี่เหลี่ยมเล็กที่อยู่ภายใน ระยะห่างระหว่างเส้นขอบทั้งสองนี้เราเรียกว่า Cell spacing ค่าปกติของระยะห่างของเส้นขอบตารางคือ 2 ถ้าเราต้องการเส้นขอบที่บางมากๆ สามารถกำหนดเป็นค่า 0 ได้

รูปแบบคำสั่ง
<TABLE BORDER="3" WIDTH="450" CELLSPACING="10">     <TR>         <TD>ข้อความภายในตารางที่กำหนดระยะห่างจากเส้นขอบ padding ไว้ในตาราง</TD>         <TD><IMG SRC="chicklittle.gif" border="1"></TD>     </TR>     <TR>         <TD>ข้อความในตารางที่ระยะห่างเท่ากับ 10 พิกเซล</TD>         <TD>kero</TD>     </TR> </TABLE>

Tables and Images : ตารางและรูปภาพ

ในบทเรียนที่ผ่านมาเราเคยใช้รูปภาพสำหรับทำเป็นจุดเชื่อมโยงไปยังหน้าเว็บไซต์ต่างๆ มาแล้ว และเราคงเคยพบว่ามีหลายเว็บเซต์ใช้รูปภาพเดียวกันแต่สามารถคลิกที่ตำแหน่งต่างๆ บนภาพแล้วจะนำไปสู่เว็บไซต์ที่แตกต่างกัน เทคนิคง่ายๆ ที่ทำได้คือการตัดซอยรูปออกเป็นส่วนๆ นำไปบรรจุในตาราง แล้วสร้างจุดเชื่อมโยงไปยังหน้าเว็บไซต์ต่างๆ ได้

นอกจากนี้แล้ว ตารางยังใช้ประโยชน์ในการนำเสนอรูปภาพขนาดใหญ่บนหน้าเว็บเพจได้ เนื่องจากการนำภาพขนาดใหญ่ 1 ภาพมาแสดงในหน้าเว็บเพจนั้นจะใช้เวลาในการแสดงผลนาน (จากการโหลดไฟล์จากเครื่องแม่ข่ายมายังเครื่องผู้ชม) จึงต้องใช้เทคนิคในการตัดซอยรูปภาพออกเป็นส่วนๆ ด้วยโปรแกรมตกแต่งภาพ จากนั้นนำภาพขนาดเล็กมาบรรจุลงในช่องตาราง และเพื่อให้การแสดงผลเป็นภาพเพียงภาพเดียวต่อกันเราจะต้องกำหนดระยะห่างระหว่างภาพและขอบตาราง ดังตัวอย่าง

END : สรุปคำสั่งที่ใช้ในบทนี้

TAGS รายละเอียด CELLPADDING="x" คำสั่งกำหนดระยะห่างระหว่างตัวอักษรหรือขอบรูปภาพกับเส้นขอบตาราง มีหน่วยเป็นพิกเซล CELLSPACING="x" คำสั่งกำหนดระยะห่างระหว่างช่องตารางแต่ละช่องกับเส้นขอบ มีหน่วยเป็นพิกเซล