การสร้างตารางและทำงานกับตาราง
--------------------------------------------------------------
การสร้างตารางและทำงานกับตาราง
การนำเสนอข้อมูลในรูปแบบตารางจะช่วยให้ข้อมูลถูกจัดออกเป็นสัดส่วน ง่ายต่อการทำความเข้าใจ และเปรียบเทียบข้อมูลต่างๆได้ง่าย
นอกจากนี้เราสามารถนำ ตารางมาใช้ในการจัดรูปแบบองค์ประกอบต่างๆภายในหน้าเว็บตามตำแหน่งที่เราต้องการได้อีกด้วย ดังตัวอย่างต่อไปนี้
ตัวอย่างหน้าเว็บเพจที่นำตารางมาใช้ในการจัดองค์ประกอบหน้าเว็บ
** จำนวน <tr>..</tr> คือจำนวนแถวในตาราง และจำนวน <td> .. </td > คือจำนวนคอลัมน์ในแต่ละแถว
ตัวอย่างการใช้งาน
จากตัวอย่างจะเห็นว่ามี <tr>…</tr> อยู่ 2 แถว หมายความว่ามีการสร้างแถวอยู่ 2 แถว ในแต่ละแถวมี <td>…</td> อยู่ 2 ชุดคำสั่งหมายถึงในแต่ละแถวมีการสร้างคอลัมน์อยู่ 2 คอลัมน์จากโค้ดคำสั่งนี้จะเป็นการสร้างตาราง ขนาด 2 แถว แถวละ 2 คอลัมน์
ผลลัพธ์ที่ได้
ถ้าในแต่ละแถว กำหนดจำนวนคอลัมน์ไม่เท่ากัน ก็จะเกิดช่องว่างแทนที่ตรงตำแหน่งนั้นเช่นเราจะเพิ่มแถวที่ 3 แต่เพิ่มคอลัมน์แค่ 1 คอลัมน์ ดังนี้
ผลลัพธ์ที่ได้
**จะเห็นว่าแถวที่ 3 มีการสร้างคอลัมน์ “ข้อมูล5” แค่คอลัมน์เดียวทำให้หลังคอลัมน์ “ข้อมูล5” เกิดช่องว่างที่ไม่สามารถเพิ่มข้อมูลได้
การใส่หัวเรื่องและตีเส้นตาราง
เราสามารถตกแต่งหัวคอลัมน์ ด้วยการใช้ <th>..</th> เพื่อเน้นข้อความส่วนหัวของคอลัมน์ โดย <th> จะมีรูปแบบ การใช้เหมือน <td> แต่ข้อความภายใน <th> จะเป็นตัวหนาและอยู่กึ่งกลางเซลล์อัตโนมัติ
การใส่หัวเรื่อง <th>
ตัวอย่างการใช้งาน
ผลลัพธ์ที่ได้
จากรูปจะเห็นว่า แถวที่ 1 เราใช้ แท็ก th ข้อความจะหนากว่า ข้อมูล แถวที่ 2 และ 3 ที่ใช้แท็ก td
การใส่เส้นตาราง (border)
การใส่เส้นให้ตารางจะช่วยให้การดูข้อมูลในตาราง ดูง่ายขึ้น เราสามารถใส่เส้นให้กับตารางด้วย แอตทริบิวต์ border ในแท็ก table ได้ดังนี้
ตัวอย่างการใช้งาน
ผลลัพธ์ที่ได้
จากภาพ border=”1” ถ้าเพิ่มตัวเลขขนาดเส้นตารางก็จะเพิ่มขนาดขึ้นด้วย ถ้าใส่ “0” จะไม่แสดงเส้นตาราง
การกำหนดข้อความกำกับให้กับตาราง
การใส่ข้อความกำกับให้กับตาราง จะช่วยให้รู้ว่า ตารางนั้น แสดงข้อมูลเกี่ยวกับอะไร และเราสามารถกำหนดตำแหน่งแสดงข้อความกำกับตารางได้ โดยมีรูปแบบดังนี้
ตัวอย่างการใช้งาน
หมายเหตุ Top คือการกำหนดให้ข้อความกำกับตารางอยู่ตรงกลางด้านบนของตาราง
ผลลัพธ์ที่ได้
การปรับความหนาเส้นตารางและความห่างระหว่างช่องเซลล์ (Border,cellspacing)
1. การปรับความหนาของเส้นตาราง
เราสามารถปรับขนาดของเส้นตารางและกำหนดระยะห่างระหว่างช่องเซลล์แต่ละเซลล์ได้ดังนี้
ตัวอย่างการใช้งาน
ผลลัพธ์ที่ได้
จะเห็นว่ายิ่งค่าของ cellspacing มากขึ้น ความห่างระหว่างช่องเซลล์ก็มีเพิ่มมากขึ้น หมายเหตุ Top คือการกำหนดให้ข้อความกำกับตารางอยู่ตรงกลางด้านบนของตาราง
2. การเว้นระยะข้อมูลในเซลล์กับขอบเซลล์ (cellpadding)
เราสามารถปรับระยะความห่างระหว่างข้อมูลในเซลล์กับกรอบเซลล์เพื่อความสวยงาม ได้ดังนี้
ตัวอย่างการใช้งาน
ผลลัพธ์ที่ได้
จะเห็นว่ายิ่งค่าของ cellpadding มากขึ้น ความห่างระหว่างข้อมูลกับขอบเซลล์ก็เพิ่มมากขึ้น
การปรับความกว้างและความสูงของตาราง (width,height)
จากตัวอย่างที่ผ่านมา ความกว้างของตารางจะขึ้นอยู่กับข้อมูลแต่ละช่องภายในตารางถ้าข้อมูลมากตารางก็จะขยายขึ้น ถ้าข้อมูลน้อยตารางก็จะหดลง อาจทำให้ตารางดูไม่สวยงาม เราสามารถกำหนดขนาดความกว้างของตารางได้เองดังนี้
1. ปรับขนาดความกว้างของตาราง (width)
ตัวอย่างการใช้งาน
ผลลัพธ์ที่ได้
2. ปรับขนาดความสูงของตาราง (height)
เราสามารถกำหนดขนาดความสูงของตารางได้เช่นเดียวกับการกำหนดขนาดความกว้าง ดังนี้
ตัวอย่างการใช้งาน
ผลลัพธ์ที่ได้
การกำหนดความกว้างและความสูงตารางเป็นเปอร์เซ็น ขนาดของตารางจะ ย่อ ขยายตามขนาดของ Web browser แต่ถ้าขนาดของข้อมูลมีมากกว่าค่าที่กำหนด ตารางจะขยายตามขนาดของข้อมูล โดยไม่สนใจค่าที่กำหนดไว้
การปรับขนาดช่องเซลล์ (colspan)
ตารางตามปกติ ช่องเซลล์ 1 ช่อง จะมีขนาดเท่ากับ 1 แถว 1 คอลัมน์ แต่ถ้าเราต้องการปรับขนาดช่องเซลล์จากปกติ 1 ช่อง ที่มีขนาด 1 แถว 1 คอลัมน์เป็นแบบ 1 แถว 3 คอลัมน์ หรือตามจำนวนคอลัมน์ที่เราต้องการ เพื่อประโยชน์ในการจัดรูปแบบข้อมูลตามที่เราต้องการ เราสามารถทำได้ดังนี้
ตัวอย่างการขยายเซลล์เกิน 1 คอลัมน์
ผลลัพธ์ที่ได้
เซลล์ช่อง ข้อมูล1 มีการขยายออกไป 2 คอลัมน์
ถ้าเราต้องการขยายแถวมากกว่า 1 แถว สามารถทำได้ดังนี้
ตัวอย่างการขยายเซลล์เกิน 1 แถว
ผลลัพธ์ที่ได้
เซลล์ช่อง ข้อมูล1 มีการขยายออกไป 2 แถว
ที่มา : https://sites.google.com/site/kruchaipw7/
