หน้าแรก  Help1 แจ้งข้อแนะนำ
การแก้ไขตาราง


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

วิธีการแก้ไขตาราง

"ขอบตาราง จะเป็นลักษณะเส้นประ"

1. คลิ๊กไปที่ขอบตาราง ที่ต้องการจะแก้ไข เวลานำเมาส์ไปวางที่ขอบตาราง pointer จะเปลี่ยนเป็นศรสี่แฉก
ถ้าคลิ๊กถูกต้อง ตาราง จะมีจุด 8 จุด ล้อมรอบ

2. จากนั้น คลิ๊กที่ไอคอนคุณสมบัติของตาราง

3. กำหนดคุณสมบัติตาราง

width
ความกว้าง ซ้าย-ขวา
(เลข1)
หากกำหนดเป็น % ความกว้างจะขึ้นอยู่กับขนาดจอ เช่น 75%
กรณีกำหนดความกว้างคงที่ px ไม่ว่าจอภาพจะกว้างเท่าใด เช่น 400
height
ความสูง บน-ล่าง
(เลข2)
กำหนดได้ทั้ง % และ px
ปกติแล้วมักไม่กำหนด เพราะขึ้นอยู่กับข้อมูลที่อยู่ด้านในตาราง
border
เส้นกรอบ
(เลข3)
หากปล่อยไว้เป็นช่องว่าง หรือ 0 เวลาแสดงผลจริง จะไม่เห็นเส้นกรอบ
ในหน้าดีไซต์เท่านั้น จึงจะเห็นเส้นกรอบตาราง
หากกำหนดเป็น 1 ขึ้นไป จึงจะมีเส้นขอบตาราง
cellpadding
ระยะห่างภายในเซลล์
(เลข4)
: เป็นช่องว่างภายในระหว่างวัตถุ หรือตัวอักษร กับขอบตาราง เพื่อไม่ให้ชิดกันเกินไป
ตัวอย่าง
cellspacing
ระยะห่างระยะเซลล์
(เลข5)
: พื้นที่ระหว่างเซลล์ ที่กั้นทุกเซลล์ (เหมือนตารางนี้ ที่แต่ละเซลล์ มีสีขาวขั้นอยู่)
ตัวอย่าง

bgimage
ภาพพื้นหลัง
(เลข6)

: กำหนดภาพพื้นหลัง ทั้งตาราง
bgcolor
สีพื้นหลัง
(เลข7)
: กำหนดสีพื้นหลัง ทั้งตาราง ทุกช่องเหมือนกันหมด

4. ตัวอย่างดังภาพ ด้านล่าง ได้กำหนดคุณสมบัติตาราง ให้ความกว้าง เล็กลง เพื่อให้รูปฟักทอง ชิดกัน

*** ตาราง สามารถซ้อนกัน กี่ชั้น ก็ได้ขึ้นอยู่กับว่าต้องการกำหนด ตำแหน่งการแสดงผลหลากหลายขนาดไหน

ตารางที่ซ้อนลงไปสังเกตุ ดูดีๆ ว่าภายในช่องที่ซ้อน จะมีช่องว่างเหลืออยู่ เพื่อแสดงให้เห็นว่าภายในช่องนั้นมีการซ้อนตาราง (เห็นเฉพาะพื้นที่ดีไซต์เท่านั้น)


 

Play แล้วกด ปุ่ม Pause เพื่อรอให้โหลดหมดก่อน จะได้ไม่สะดุด


เมนูที่เกี่ยวข้อง

คู่มือการใช้งานเว็บไซต์
คู่มือการใช้งาน
คู่มือโปรแกรมสำเร็จรูป
วิธีสร้างระบบสมาชิก
ฟอร์มสำเร็จรูป

วันนี้

7 คน
เมื่อวาน12 คน
เดือนนี้
ปีนี้
ทั้งหมด
1505 คน
8866 คน
1455674 คน
เริ่มเมื่อ 2012-10-03
ของแต่งเว็บไซต์ บทความทั่วไป การโปรโมทเว็บไซต์ ทริปแนะนำ
THTWEB MANUAL คู่มือการใช้งานเว็บไซต์