ยินดีต้อนรับเข้าสู่เว็บการเรียนรู้ เรื่อง การเขียนเว็บเพจด้วยภาษา HTML
 
 
ytการสร้างตาราง


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

ytCell 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>

Click to TOP
ytCell 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>

Click to TOP
ytTables and Images : ตารางและรูปภาพ

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

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

  

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


ก่อนหน้านี้
หน้าถัดไป
 
 
เว็บไซต์นี้ แสดงผลได้ดี บน Internet Explorer ความละเอียดที่ 1024 x 760 Text Size Medium
จัดทำเพื่อใช้ประกอบการเรียนการสอนผ่านระบบเครือข่ายอินเทอร์เน็ต
รายวิชา การพัฒนาเว็บเพจด้วยโปรแกรมสำเร็จรูป
โรงเรียนคูซอดประชาสรรค์ อำเภอเมือง จังหวัดศรีสะเกษ
 
SITEMAP