บทที่4

= = = **กลับบทเรียน** = = = =บทที่ 4 : การสร้างตาราง = ..** :: การสร้างตาราง ** ** จากบทความในบทที่ผ่าน ๆ มา ในเรื่องของการจัดตำแหน่งของข้อความ จะเห็นได้ว่าถึงแม้เราจะสามารถจัดตำแหน่งได้แล้ว แต่การจัดตำแหน่งนั้นก็ยังไม่สารมารถกำหนดเจาะจงได้ละเอียดนัก เพราะ สามารถระบุได้เฉพาะชิดซ้าย ชิดขวา และตรงกลางเท่านั้น ในบทความนี้เราจะมาจัดตำแหน่งของข้อความ โดยการใช้ตารางในการควบคุมตำแหน่งของข้อมูลที่เราต้องการแสดงผล ** การสร้างตารางนั้น เราสามารถนำมาช่วยในการกำหนดตำแหน่งการแสดงผลของข้อมูลภายในเว็บเพจของเราได้ ว่าข้อมูลไหนต้องการแสดง ณ ตำแหน่งใดในเว็บเพจ โดยเราสามารถนำข้อมูลต่าง ๆ มาจัดแสดงในเซลล์ต่าง ๆ ของตารางได้ ทำให้สะดวกในการออกแบบการจัดว่างข้อมูล และทำให้การจัดว่างข้อมูลมีระเบียบเรียบร้อยอีกด้วย ในการสร้างตารางนั้นจะมี Tag ต่าง ๆ ที่ใช้สำหรับสร้างตารางในภาษา html ดังนี้

 1. การสร้างตาราง

2. การสร้างแถวภายในตาราง     แท็กนี้ต้องอยู่ภายในแท็ก

3. การสร้างคอลัมน์ภายในแถวแต่ละแถว   แท็กนี้ต้องอยู่ภายในแท็ก


 * ** [[image:http://www.thainextstep.com/imgs/arrow8.gif width="11" height="11" align="absmiddle"]] รูปแบบโครงสร้างของตาราง ** ||
 * จากโครงสร้างจะเป็นการสร้างตารางแบบง่ายที่สุดคือ การสร้างตาราแบบ 1 แถว และ 1 คอลัมน์ ||
 * ** [[image:http://www.thainextstep.com/imgs/arrow8.gif width="11" height="11" align="absmiddle"]] ตัวอย่างการสร้างตารางแบบ 2 x 3 (2 แถว 3 คอลัมน์) ** ||
 * [[image:http://www.thainextstep.com/html/imgs/table.gif width="393" height="95"]] ||
 * ** [[image:http://www.thainextstep.com/imgs/arrow8.gif width="11" height="11" align="absmiddle"]] ตัวอย่างการสร้างตารางแบบ 2 x 3 (2 แถว 3 คอลัมน์) ** ||
 * [[image:http://www.thainextstep.com/html/imgs/table.gif width="393" height="95"]] ||

** ** .... การสร้างตารางแบบ 2 x 3 (2 แถว 3 คอลัมน์) .... ** **

** **

** **

** **

** ** ||
 * จากตัวอย่างจะสักเกตได้ว่ามีแถว 2 แถว ซึ่งจะเขียนโค้ด html ได้โดยเขียนแท็ก 2 ชุด และในแถวแต่ละแถวมีคอลัมน์ 3 คอลัมน์ ดังนั้นเราก็สามารถเขียนโค้ดเืื่พื่อสร้างคอลัมน์ โดยเขียนแท็ก  ไว้ใน  โดยใน 1 แถวมีคอลัมน์ 3 คอลัมน์ ดังนั้นเราจึงต้องเขียนแท็ก  3 ชุดไว้ในแท็ก  แต่ละชุด ||
 * ** สำหรับบทความนี้ก็ขอจบเีีพียงเท่านี้ก่อนนะค่ะ แต่เรื่องของการจัดการกับตารางยังไม่หมดเพียงแค่นี้ค่ะ เพราะเรายังสามารถปรับแต่งตารางได้อีกมากมายค่ะ ไม่ว่าจะเป็นการใส่สี การจัดตำแหน่งต่าง ๆ ติดตามรายละเอียดได้ในบทความตอนต่อไปค่ะ ** ||
 * ** สำหรับบทความนี้ก็ขอจบเีีพียงเท่านี้ก่อนนะค่ะ แต่เรื่องของการจัดการกับตารางยังไม่หมดเพียงแค่นี้ค่ะ เพราะเรายังสามารถปรับแต่งตารางได้อีกมากมายค่ะ ไม่ว่าจะเป็นการใส่สี การจัดตำแหน่งต่าง ๆ ติดตามรายละเอียดได้ในบทความตอนต่อไปค่ะ ** ||
 * ** สำหรับบทความนี้ก็ขอจบเีีพียงเท่านี้ก่อนนะค่ะ แต่เรื่องของการจัดการกับตารางยังไม่หมดเพียงแค่นี้ค่ะ เพราะเรายังสามารถปรับแต่งตารางได้อีกมากมายค่ะ ไม่ว่าจะเป็นการใส่สี การจัดตำแหน่งต่าง ๆ ติดตามรายละเอียดได้ในบทความตอนต่อไปค่ะ ** ||