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

ความหมายของตาราง

ตาราง (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>