K

R

U

K

R

A

T

A

I

.

C

O

M

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

โครงสร้างของตาราง

โครงสร้างตารางโดยทั่วไปจะประกอบไปด้วยแถวและคอลัมน์ โดยช่องข้อมูลที่อยู่ในแนวนอนเดียวกันก็คือแถว และช่องข้อมูลที่อยู่ตรงกันในแนวตั้งก็คือ คอลัมน์นั่นเอง

• <TABLE> กำหนดการสร้างตาราง และมีคำสั่งปิดคือ </TABLE>
• <CAPTION> เป็นการกำหนดคำ หรือข้อความอธิบายตาราง และมีคำสั่งปิดคือ </CAPTION>
• <TR> (Table Row) เป็นการกำหนดแถวของตาราง และมีคำสั่งปิดคือ </TR>
• <TH> (Table Head) เป็นการกำหนดหัวเรื่องในคอลัมน์ และมีคำสั่งปิดคือ </TH>
• <TD> (Table Data) เป็นการกำหนดข้อมูลในตาราง และมีคำสั่งปิดคือ </TD>

โดยทั่วไปแล้วข้อมูลในตารางจะถูกแบ่งออกเป็นส่วน ๆ อย่างชัดเจนโดยมีเส้นกรอบล้อมรอบแต่ละช่องข้อมูล แต่บางครั้งเพื่อความสวยงามแล้ว นักออกแบบเว็บเพจอาจเลือกที่จะไม่แสดงเส้นกรอบที่ทำให้รกหูรกตานั้นได้ โดยเฉพาะในกรณีที่นักออกแบบให้แท็ก <TABLE> ในการตกแต่งเว็บเพจ การกำหนดว่าจะแสดงหรือไม่แสดงกรอบทำได้โดยใช้แอตทริบิวต์ BORDER และ BORDERCOLOR

การใช้แอตทริบิวต์ HEIGHT และ WIDTH เพื่อกำหนดขนาดของช่องข้อมูลและตำแหน่งของข้อมูลในแต่ละช่อง

H

T

M

L

      พัฒนาบทเรียนโดย อ.ศราวดี  ม่วงสด โรงเรียนประถมฐานบินกำแพงแสน สพท.นฐ.เขต1
e-mail : smoungsod@yahoo.com