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

ในส่วนนี้เราจะได้รู้จักกับการสร้างตาราง ในรูปแบบต่าง ๆ เพื่อแต่ง เติมให้เวปเพจของเราดูน่าสนใจมากยิ่งขึ้น

**สารบัญเรื่อง**
* การสร้างตาราง
* การตกแต่งตารางให้อ่านง่ายด้วยหัวข้อ และเส้น
* การปรับขนาดกรอบตารางและเส้นตาราง
* การปรับขนาดช่องตาราง
* การปรับความสูงและความกว้างของตาราง
* การปรับเปลี่ยนลักษณะของตาราง
* การจัดข้อมูลในตารางให้เป็นระเบียบ
* การซ้อนตาราง
* การใส่รูปในตาราง
* การเพิ่ม Link ในตาราง

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

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

คำสั่ง	ความหมาย
<TABLE>…</TABLE>	เริ่มต้นการสร้างตาราง และจบการสร้างตาราง
<TR>…</TR>	กำหนดจำนวนแถว (row) ในตาราง
<TD>…</TD>	กำหนดจำนวนคอลัมน์ (column) ในตาราง
<TH>…</TH>	เหมือนกับ <TD>…</TD> แต่การสร้างข้อมูลจะเป็นตัวเข้ม
<BORDER="ขนาดขอบตาราง">	กำหนดความกว้างของขอบตาราง
<CELLPADDING="ขนาดที่ต้องการ">	กำหนดระยะห่างระหว่างเส้นและเนื้อหาภายในเซล
<CELLSPACING="ขนาดที่ต้องการ">	กำหนดระยะห่างระหว่างเซลภายในตาราง
<COLSTART="คอลัมน์ที่ต้องการ">	กำหนดให้ใส่ข้อมูลลงในคอลัมน์ที่เท่าใด
<WIDTH="ความกว้าง">	กำหนดความกว้างของเซลใด ๆ
<COLSPAN="จำนวนคอลัมน์ที่รวม">	กำหนดให้จำนวนคอลัมน์ที่ต้องการยุบรวมกันเป็น 1 คอลัมน์
<ROWSPAN="จำนวนแถวที่รวม">	กำหนดให้จำนวนแถวที่ต้องการยุบรวมกันเป็น 1 แถว
<CAPTION>...</CAPTION>	กำหนดคำอธิบายให้ตาราง

สำหรับรูปแบบคำสั่งตารางมีดังนี้

<TABLE>

<TR>

</TR>

<TR>

</TR>

…
</TABLE>

ตัวอย่าง

จากรูป เป็นการกำหนดตารางโดยให้มีจำนวนแถวทั้งหมด 2 แถว และแต่ละแถวมี 3 คอลัมน์ คุณสามารถดูผลลัพธ์ได้โดยการกดปุ่ม ขอดูตัวอย่าง ครับ

การตกแต่งตารางให้อ่านง่ายด้วยหัวข้อ และเส้น

เราสามารถตกแต่งตารางให้ดูง่ายขึ้น โดยการใช้หัวตารางเพื่ออธิบายความหมายของข้อมูล และใส่เส้นตารางเพื่อแยกย้อมูลในแต่ละแถวและคอลัมน์ออกจากกัน

ตัวอย่าง

จากรูป จะเห็นว่าแถวแรกตัวอักษรจะมีความหนาและใหญ่กว่า 2 แถวถัดมา ซึ่งเป็นผลสืบเนื่องจากคำสั่งของการกำหนด TABLE HEAD คุณสามารถดูผลลัพธ์ได้โดยการกดปุ่ม ขอดูตัวอย่าง ครับ

การปรับขนาดกรอบของตารางและเส้นตาราง

เราสามารถปรับขนาดกรอบตาราง และเส้นตารางได้โดยใช้คำสั่ง Border และ Cellspacing

ตัวอย่าง

จากรูป จะเห็นว่าจะมีการกำหนดขนาดของขอบตารางด้วยคำสั่ง Border และมีการกำหนดระยะห่างของเซล์กับขอบตาราง คุณสามารถดูผลลัพธ์ได้โดยการกดปุ่ม ขอดูตัวอย่าง ครับ

การปรับขนาดช่องตาราง

เราสามารถปรับขนาดของช่องตาราง ให้มีที่ว่างตรงขอบช่องตารางเพิ่มขึ้น เพื่อทำให้เส้นตารางไม่เข้ามาติดกับข้อมูลมากเกินไป โดยใช้คำสั่ง

CELLPADDING = "ขนาดที่ว่าง"

ตัวอย่าง

จากรูป จะเห็นว่าเรามีการกำหนดให้ระยะห่างของข้อมูลกับช่องตารางมีความห่างกันเท่ากับ 10 แต่ในกรณีที่เรากำหนด CELLPADDING=0 ผลลัพธ์ที่ได้ก็จะไม่มีพื้นที่ว่างระหว่างข้อมูลและขอบช่องตาราง คุณสามารถดูผลลัพธ์ได้โดยการกดปุ่ม ขอดูตัวอย่าง ครับ

การปรับความสูงและความกว้างของตาราง

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

WIDTH="ความกว้าง" HEIGHT="ความสูง"

ตัวอย่าง

จากรูป จะเป็นการกำหนดความกว้างและความสูงของช่องตารางโดยการกำหนดขนาดนั้นเราจะใช้หน่วยของการกำหนดเป็น Pixel คุณสามารถดูผลลัพธ์ได้โดยการกดปุ่ม ขอดูตัวอย่าง ครับ

การปรับเปลี่ยนลักษณะของตาราง

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

ขยายช่องตารางออกเกิน 1 คอลัมน์ เราจะใช้คำสั่ง

COLSPAN="จำนวนคอลัมน์ที่ต้องการขยาย"

ตัวอย่าง

จากรูป จะเป็นการขยายคอลัมน์ที่ 1 ในแถวที่ 1 ให้มีขนาดเท่ากับ 2 คอลัมน์ คุณสามารถดูผลลัพธ์ได้โดยการกดปุ่ม ขอดูตัวอย่าง ครับ

ขยายช่องตารางออกเกิน 1 แถว เราจะใช้คำสั่ง

ROWSPAN="จำนวนแถวที่ต้องการขยาย"

ตัวอย่าง

จากรูป จะเป็นการขยายแถวที่ 1 ในคอลัมน์ที่ 1 ให้มีขนาดเท่ากับ 2 แถว ซึ่งคุณสามารถดูผลลัพธ์ได้โดยการกดปุ่ม ขอดูตัวอย่าง ครับ

การจัดข้อมูลในตารางให้เป็นระเบียบ

จัดข้อมูลในแนวตั้ง

เมื่อมีการปรับเปลี่ยนลักษณะของตาราง ข้อมูลในตารางนั้นอาจดูไม่เป็นระเบียบ เราสามารถจัดข้อมูลให้ชิดขวา ชิดซ้าย หรืออยู่กึ่งกลางของช่องตารางได้โดยใช้คำสั่ง

ALIGN="LEFT/RIGHT/CENTER"

ตัวอย่าง

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

จัดข้อมูลในแนวนอน

ถ้าเรามีช่องตารางที่ขยายมากกว่า 1 แถว เราสามารถกำหนดข้อมูลในตารางช่องนั้นให้อยู่ชิดบน ชิดล่าง หรืออยู่กึ่งกลางได้ด้วยคำสั่ง

VALIGN="TOP/MIDDLE/BOTTOM"

ตัวอย่าง

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

การซ้อนตาราง

การสร้างตารางซ้อนกันนั้นสามารถช่วยในการนำเสนอข้อมูลที่ซับซ้อนได้ โดยวิธีนำตารางมาซ้อนกันก็คือ การสร้างชุดตารางขึ้นมาใหม่ในส่วนของช่องตารางที่ต้องการ

ตัวอย่าง

จากรูป ให้สังเกตจากส่วนที่ทำกรอบล้อมรอบซึ่งเป็นการใช้คำสั่งสำหรับการสร้างตารางที่อยู่ในช่องข้อมูลที่ 6 ครับ โดยคุณสามารถดูผลลัพธ์ได้โดยการกดปุ่ม ขอดูตัวอย่าง ครับ

การใส่รูปในตาราง

วิธีการสำหรับนำรูปภาพมาใส่ในช่องตาราง นั้นคล้ายการนำข้อความมาใส่ในตารางทั่วไป เพียงแต่เราต้องใช้คำสั่ง <IMG SRC="ชื่อไฟล์รูปภาพ"> เพื่อระบุรูปที่ต้องการนำมาแสดง

ตัวอย่าง

จากรูป ให้สังเกตุจาก จุดที่มีการขีดเส้น ซึ่งเป็นคำสั่งของการนำภาพมาใส่ในตารางครับ โดยคุณสามารถดูผลลัพธ์ได้โดยการกดปุ่ม ขอดูตัวอย่าง ครับ

การเพิ่ม Link ในตาราง

วิธีการเพิ่ม Link ในตารางนั้นคล้ายกับการเพิ่มรูปในตาราง โดยเราต้องใช้คำสั่ง <A HREF="URL หรือ ไฟล์ที่ต้องการเชื่อมไปหา" ดังตัวอย่างต่อไปนี้

ตัวอย่าง

จากรูป ให้สังเกตจากจุดที่มีการขีดเส้น ซึ่งเป็นส่วนของการใช้คำสั่ง Link โดยคุณสามารถดูผลลัพธ์ได้โดยการกดปุ่ม ขอดูตัวอย่าง ครับ

Create By