บทเรียนดิจิตอล

การสร้างตาราง

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

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

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

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

การกำหนดเส้นของตาราง

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

กำหนดความกว้างและความสูงของตาราง

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

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

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