การสร้างตาราง
ความหมายของตาราง
ตาราง (Table) เป็นรูปแบบการแสดงข้อมูล ใช้ในการสื่อสารจัดรูปแบบและจัดเรียงข้อมูลเพื่อให้มีความสวยงาม เป็นหมวดหมู่แบ่งประเภทอย่างชัดเจน มีการใช้งานตารางทั้งใน สื่อสิ่งพิมพ์ งานเขียนด้วยมือ ซอฟต์แวร์คอมพิวเตอร์หน้าเอกสารเว็บเพจ และในสื่ออื่น ๆ อีกหลาย รูปแบบ ตารางมีความหลากหลายทั้งทางด้านโครงสร้าง และรูปแบบเพื่อปรับให้เหมาะสมกับข้อมูลที่ ต้องการแสดงผล โดยส่วนประกอบที่สำคัญของตาราง คือ แถว (Row) และ คอลัมน์ (Column) ซึ่ง เมื่อแถวและคอลัมน์มีจำนวนมากกว่า 1 แล้วจะมีส่วนที่ตัดกันเป็นช่องสำหรับป้อนข้อมูล เรียกส่วนนี้ว่า เซลล์ (Cell)
หลักการที่ใช้สร้างตารางใน HTML
ตารางสามารถประยุกต์นำไปใช้งานได้หลายรูปแบบ เช่น การสร้างตารางเพื่อแสดง ข้อมูล ใส่สีในตารางเพื่อเพิ่มสีสันความสวยงามของเว็บเพจ การสร้างตารางบนแผ่นกระดาษกับ การสร้างตารางในเว็บเพจต่างกันที่ในกระดาษผู้สร้างตาราง สามารถใช้มือ เครื่องเขียน อุปกรณ์ในการวาดเส้นส่วนของแถวและคอลัมน์ได้ แต่ในเว็บเพจผู้พัฒนาเว็บต้องใช้แท็กคำสั่งสำหรับสร้างตารางขึ้นมา แท็กคำสั่งสำหรับสร้างตารางในภาษา html มีดังนี้
1.2.1 แท็กคำสั่งการสร้างตาราง <table>….</table>
1.2.2 แท็กคำสั่งการสร้างแถวภายในตาราง <tr>….</tr> แท็กคำสั่งสร้างแถวต้องอยู่ภายในแท็กคำสั่งสร้างตาราง <table>…. </table>
1.2.3 แท็กคำสั่งการสร้างคอลัมน์ภายในแถวแต่ละแถว <td>….</td> แท็กคำสั่ง สร้างคอลัมน์ต้องอยู่ภายในแท็กค าสั่งสร้างแถว <tr>….</tr>
ประโยชน์ของการสร้างตาราง
การใช้ตารางเหมาะสำหรับการนำเสนอข้อมูลจำนวนมาก โดยตารางสามารถใช้งานได้หลายแบบตั้งแต่ใช้เป็นตารางธรรมดาเพื่อแสดงค่าตัวเลขทางสถิติหรือตัวเลขที่มีความสัมพันธ์กัน ซึ่งการใช้ตารางนำเสนอข้อมูลแบบนี้ทำให้เห็นการเปรียบเทียบที่ชัดเจน และการประยุกต์ใช้ตารางกับ ข้อมูลประเภทอื่น ๆ เช่น ข้อความ หรือรูปภาพเพื่อช่วยออกแบบหน้าเว็บเพจ ซึ่งตารางสามารถจัดองค์ประกอบต่าง ๆ ได้อย่างเป็นสัดส่วนและอยู่ในตำแหน่งที่ต้องการได้ การสร้างตารางช่วยในการกำหนดตำแหน่งการแสดงผลของข้อมูลภายในเว็บเพจได้ โดยผู้พัฒนาเว็บสามารถนำข้อมูลมาจัดแสดงในเซลล์ต่าง ๆ ของตารางทำให้สะดวกในการออกแบบและทำให้การจัดวางข้อมูลมีความเป็นระเบียบเรียบร้อยอีกด้วย
การสร้างตารางใน HTML
การสร้างตารางเป็นรูปแบบหนึ่งของการแสดงผลข้อมูล เหมาะสำหรับข้อมูลที่มีปริมาณมากและต้องการแยกสัดส่วนหรือแยกกลุ่มของข้อมูลอย่างชัดเจน ตารางจึงเป็นทางเลือกหนึ่งในการแสดงผลข้อมูล โดยสามารถใช้แท็กคำสั่งภาษา HTML ในการสร้างตารางได้
คำสั่งที่ใช้ในการสร้างตาราง
เนื่องจากมีการสร้างตารางมีรูปแบบของตารางหลากหลาย โดยประยุกต์ให้เหมาะสมกับข้อมูลที่ต้องการแสดงผล ดังนั้นคำสั่งที่จะสร้างตารางก็จะต้องประยุกต์ตามรูปแบบของตารางด้วย แต่จะดำเนินการสร้างตารางได้ต้องใช้แท็กคำสั่ง table ในการกำหนดค่าการสร้างตารางและตามด้วยแท็กคำสั่ง tr เพื่อกำหนดแถวและแท็กคำสั่ง td เพื่อกำหนดคอลัมน์ โดยค่าเริ่มต้น (default) ในการสร้างตารางจะไม่แสดงเส้นกรอบ มีรูปแบบคำสั่งดังนี้
รูปแบบคำสั่งการสร้างตาราง <table>….</table>
ประกอบด้วยแท็กคำสั่ง table, tr, td
แท็กคำสั่ง table อยู่ภายในแท็กคำสั่ง <body>…</body>
แท็กคำสั่ง tr อยู่ภายในแท็กคำสั่ง <table>…</table>
แท็กคำสั่ง td อยู่ภายในแท็กคำสั่ง <tr>…</tr>
Example
รูปแบบคำสั่งการสร้างตาราง <table>….</table>
<table>
<tr>
<td>Month</td>
<td>Savings</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
คำสั่งการตีเส้นตาราง และการใส่หัวเรื่อง <TH>
เป็นการใส่ชื่อหัวเรื่องให้กับตารางพร้อมกับกำหนดขนาดของเส้นกรอบตาราง หรือการตีเส้นตาราง มีรูปแบบดังนี้
รูปแบบคำสั่ง การตีเส้นตาราง ใช้แท็กคำสั่ง <table border=“ความหนาของเส้น”>
รูปแบบคำสั่ง การใส่หัวเรื่อง ใช้แท็กคำสั่ง <th>หัวเรื่องตาราง</th> การใช้แท็กคำสั่งใส่หัวเรื่องตารางอยู่ภายในแท็กคำสั่ง <table>….</table> และแท็กคำสั่งในการ สร้างแถว <tr>….</tr> ดังนี้ <tr><th>หัวข้อ1</th> <th>หัวข้อ2</th></tr>
Example
คำสั่งการตีเส้นตาราง และการใส่หัวเรื่อง <TH>
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
โครงสร้างการสร้างตาราง
ประกอบด้วยแท็กคำสั่ง thead , tbody และ tfoot
แท็กคำสั่ง thead อยู่ภายในแท็กคำสั่ง <table>…</table> ทำหน้าที่เป็นการกำหนดโครงสร้างส่วนหัวตาราง
แท็กคำสั่ง tbody อยู่ภายในแท็กคำสั่ง <table>…</table> ทำหน้าที่เป็นการกำหนดโครงสร้างส่วนเนื้อหา
แท็กคำสั่ง tfoot อยู่ภายในแท็กคำสั่ง <table>…</table> ทำหน้าที่เป็นการกำหนดโครงสร้างส่วนท้ายตาราง
Example
โครงสร้างการสร้างตาราง
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
การใส่ข้อความกำกับตาราง
เป็นการกำหนดข้อความกำกับตารางเพื่อประกาศหัวข้อของข้อมูลที่จะแสดงในแท็กคำสั่งสร้างตาราง โดยใช้แท็กคำสั่ง <caption>..</caption> และมีแอททริบิวต์ align ในการกำหนดตำแหน่งการแสดงผลบนหน้าเว็บเพจดังนี้
รูปแบบคำสั่ง <caption align="ตำแหน่ง">ข้อความกำกับ</caption>
แอททริบิวต์ align = "top" แสดงตำแหน่งกึ่งกลางด้านบน
align = "bottom" แสดงตำแหน่งกึ่งกลางด้านล่าง
align = "left" แสดงตำแหน่งชิดด้านซ้ายบน
align = "right" แสดงตำแหน่งชิดด้านขวาบน
Example
การใส่ข้อความกำกับตาราง
<table border="1">
<caption align="bottom">Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
การกำหนดขนาดของตารางและการปรับค่าการแสดงข้อมูลในตาราง
ในการสร้างตารางเพื่อให้แสดงข้อมูลได้ตามรูปแบบที่ผู้พัฒนาเว็บต้องการแล้วยังต้องคำนึงถึงความสวยงามเหมาะสมในการแสดงผล หากผู้พัฒนาสร้างตารางเพียงอย่างเดียวบางครั้งการแสดงผลอาจไม่ตรงกับที่ต้องการนำเสนอ ดังนั้นจึงมีแท็กคำสั่งในการจัดรูปแบบตารางอีกมากมาย เพื่อใช้ในการจัดรูปแบบให้ตรงกับความต้องการของผู้พัฒนาเว็บดังนี้
การกำหนดขนาดของตารางที่ต้องการแสดงบนหน้าเว็บเพจ โดยการกำหนดค่าความกว้างและความสูงให้กับตาราง สามารถกำหนดเป็นค่าตัวเลข (pixel) หรือกำหนดเป็นเปอร์เซ็นที่ต้องการให้แสดงผลหน้าจอดังนี้
width=“n” กำหนดความกว้างของตารางเป็นตัวเลข หรือเป็น %
height=“n” กำหนดความสูงของตารางเป็นตัวเลข หรือเป็น %
การกำหนดระยะห่างระหว่างตัวหนังสือและเส้นแบ่งตาราง โดยใช้แท็กคำสั่ง cell padding=“n” (n มีค่าเป็นตัวเลขระยะห่าง)
การกำหนดขนาดความห่างของช่องเซลล์ โดยใช้แท็กคำสั่ง cell spacing=“n” (n มีค่าเป็นตัวเลขขนาดของความห่าง)
การจัดตำแหน่งข้อมูลในแนวตั้ง โดยใช้แท็กคำสั่ง valign=“ตำแหน่ง” มีค่า ดังนี้ valign=“top” จัดข้อมูลอยู่ด้านบนของเซลล์, valign=“middle” จัดข้อมูลอยู่ตรงกลางของ เซลล์, valign=“bottom” จัดข้อมูลยู่ด้านล่างของเซลล์ โดยมีรูปแบบคำสั่งดังนี้
รูปแบบคำสั่งการกำหนดขนาดของตารางและการปรับค่าการแสดงข้อมูลในตาราง
<table border="ตัวเลข" align="ตำแหน่ง" width="ตัวเลข" cellpadding="ตัวเลข"
cellspacing="ตัวเลข" valign="ตำแหน่ง">
เช่น <table border="1" align="center" width="600" cellpadding="10" cellspacing="2" valign="middle">
การใส่สีเส้นกรอบตารางและการใส่รูปภาพในเซลล์ตาราง
เป็นการกำหนดสีเส้นกรอบตารางและการใส่รูปภาพลงในเซลล์ตารางเพื่อแยกส่วน หรือแยกความแตกต่างของข้อมูลในเซลล์อย่างชัดเจนเพื่อตกแต่งตารางให้มีความสวยงามได้ดังนี้
รูปแบบคำสั่ง <table border=“ขนาดเส้นขอบตาราง” bordercolor=“สีเส้นขอบ”>
<tr> <td><img src=“ชื่อไฟล์ภาพ.ส่วนขยาย”></td> </tr> </table>
การผสานคอลัมน์/การจองคอลัมน์
เป็นการตกแต่งข้อมูลในตารางที่มีการแยกประเภทของข้อมูล แต่มีหัวข้อของข้อมูลเหมือนกัน เช่นการผสานเซลล์ระหว่างคอลัมน์หนึ่งกับอีกคอลัมน์หนึ่งให้เป็นคอลัมน์เดียวกัน โดยใช้ แท็กคำสั่ง <th colspan> ได้ดังนี้
รูปแบบคำสั่ง <th colspan="จำนวนคอลัมน์ที่ต้องการผสาน">ข้อความ</th>
Example
การผสานคอลัมน์/การจองคอลัมน์
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Anupong Kongsa</td>
<td>088 756 7223</td>
<td>077 272-168</td>
</tr>
</table>
การผสานแถว/การจองแถว
จะมีการทำงานลักษณะคล้ายกับการผสานคอลัมน์แตกต่างตรงที่การผสานแถวจะมีการจัดรูปแบบข้อมูลในแนวตั้ง โดยใช้แท็กคำสั่ง <tr><th rowspan> ได้ดังนี้
รูปแบบคำสั่ง <th rowspan="จำนวนแถวที่ต้องการผสาน">ข้อความ</th>
Example
การผสานแถว/การจองแถว
<b>การผสานแถว</b> <br>
<table border="1">
<tr>
<th>First Name:</th>
<td>Mr.Anupong Kongsa</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>077-234-567</td>
</tr>
<tr>
<td>081-234-5678</td>
</tr>
</table>