:: เมนูหลัก
 แบบทดสอบก่อนเรียน
 หน่วยที่ 1 โลกของเว็บเพจและเว็บไซต์
 หน่วยที่ 2 เริ่มต้นกับ HTML
 หน่วยที่ 3 การจัดการข้อความ
 หน่วยที่ 4 การใช้ลิสต์สร้างรายการ
 หน่วยที่ 5 การแทรกภาพ
 หน่วยที่ 6 การสร้างตาราง
 แบบทดสอบก่อนเรียน
เริ่มสร้างตาราง
 การปรับขนาดตาราง
 การกำหนดความกว้างของคอลัมน์
 การใส่หัวเรื่องให้กับตาราง
 การใส่ข้อความกำกับตาราง
 การกำหนดระยะห่างของช่องเซลล์
 การผสานเซลล์
 การใส่พื้นหลังให้กับตาราง
 การจัดตำแหน่งตารางและข้อมูล
 การใส่รูปภาพในตาราง
 การแบ่งส่วนตาราง
 แบบฝึกหัด
 แบบทดสอบหลังเรียน
 หน่วยที่ 7 การเชื่อมโยงเว็บเพจด้วยลิงค์
หน่วยที่ 8 การใช้งานไฟล์วีดีโอและเสียง
 หน่วยที่ 9 การสร้างฟอร์ม
 แบบทดสอบหลังเรียนเรียน
:: หน่วยที่ 6 การสร้างตาราง (Table)
การกำหนดระยะห่างของช่องเซลล์


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

เราสามาถกำหนดระยะห่างระหว่างช่องภายในตารางได้ด้วยการกำหนดแอทบิวต์ cellspacing

Attribute
ชื่อแอททริบิวท์ cellspacing
ตำแหน่งแท็ก อยู่ในแท็กเปิด <table>...</table>
รูปแบบการใช้แท็ก <table cellspacing="value">... </table>
value ขนาดเป็นพิกเซล (pixels) เช่น 1, 2, 3

 


ตัวอย่างการใช้งาน
<body>


<table border="1" width="300" cellspacing="5">
    <caption>กำหนดระยะห่างของเซลล์ 5 พิกเซล์</caption>
    <tr> <td>ข้อมูล</td> <td>ข้อมูล</td> <td>ข้อมูล</td> </tr>
    <tr> <td>ข้อมูล</td> <td>ข้อมูล</td> <td>ข้อมูล</td> </tr>
    <tr> <td>ข้อมูล</td> <td>ข้อมูล</td> <td>ข้อมูล</td> </tr>
</table>
<br>
<table border="1" width="300" cellspacing="10">
    <caption>กำหนดระยะห่างของเซลล์ 10 พิกเซล</caption>
    <tr> <td>ข้อมูล</td> <td>ข้อมูล</td> <td>ข้อมูล</td> </tr>
    <tr> <td>ข้อมูล</td> <td>ข้อมูล</td> <td>ข้อมูล</td> </tr>
    <tr> <td>ข้อมูล</td> <td>ข้อมูล</td> <td>ข้อมูล</td> </tr>
</table>

</body>

การแสดงผล

จากตัวอย่างจะเห็นได้ว่าระยะห่างระหว่างช่องภายในตารางจะห่างกันตามขนาดที่เรากำหนด

 

 

กำหนดระยะระหว่างข้อมูลในเซลล์กับกรอบเซลล์

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

Attribute
ชื่อแอททริบิวท์ cellpadding
ตำแหน่งแท็ก อยู่ในแท็กเปิด <table>...</table>
รูปแบบการใช้แท็ก <table padding="value">... </table>
value ขนาดเป็นพิกเซล (pixels) เช่น 1, 2, 3

ตัวอย่างการใช้งาน
<body >
<table border="1" width="300"cellpadding="0">
    <caption>กำหนดระยะระหว่างข้อมูลในเซลล์กับกรอบเซลล์ 0 พิกเซล</caption>
    <tr> <td>ข้อมูล</td> <td>ข้อมูล</td> <td>ข้อมูล</td> </tr>
    <tr> <td>ข้อมูล</td> <td>ข้อมูล</td> <td>ข้อมูล</td> </tr>
    <tr> <td>ข้อมูล</td> <td>ข้อมูล</td> <td>ข้อมูล</td> </tr>
</table>
<br>
<table border="1" width="300"cellpadding="10">
    <caption>กำหนดระยะระหว่างข้อมูลในเซลล์กับกรอบเซลล์ 10 พิกเซล</caption>
    <tr> <td>ข้อมูล</td> <td>ข้อมูล</td> <td>ข้อมูล</td> </tr>
    <tr> <td>ข้อมูล</td> <td>ข้อมูล</td> <td>ข้อมูล</td> </tr>
    <tr> <td>ข้อมูล</td> <td>ข้อมูล</td> <td>ข้อมูล</td> </tr>
</table>

</body>

การแสดงผล

จากตัวอย่างจะเห็นได้ว่าตารางแรกข้อมูลกับกรอบของเซลล์ติดกัน แต่ในตารางที่สองข้อมูลกับกรอบจะมีระยะห่างตามที่เรากำหนด


วีดีโอ