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

การสร้างตาราง (TABLE)

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

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

           ในการสร้างตารางนั้นจะมี Tag ต่าง ๆ ที่ใช้สำหรับสร้างตารางในภาษา html ดังนี้
                      1. การสร้างตาราง <table> </table>
                      2. การสร้างแถวภายในตาราง <tr>… </tr> แท็กนี้ต้องอยู่ภายในแท็ก <table>… </table>
                      3. การสร้างคอลัมน์ภายในแถวแต่ละแถว <td>… </td> แท็กนี้ต้องอยู่ภายในแท็ก <tr>… </tr>

รูปแบบโครงสร้างของตาราง

<table>

<caption >….ข้อความที่จะใช้เป็นส่วนหัวกำกับตาราง (ชื่อตาราง)….. </caption>

<tr>

<th>….ข้อความ….. </th>

<td>….ข้อความ….. </td>

</tr>

</table>

<table>...........</table>

เป็นคำสั่งที่กำหนดให้โปรแกรมเบราว์เซอร์สร้างตาราง

<caption>............</caption>

เป็นคำสั่งที่ใช้ตั้งชื่อหรือหัวข้อเรื่องให้กับตาราง

<tr>............</tr>

เป็นคำสั่งที่ใช้กำหนดแถว (row)

<th>...........</th>

เป็นคำสั่งที่ใช้ในการกำหนดข้อมูลส่วนหัวของตาราง

<td>...........</td>

เป็นคำสั่งที่ใช้ในการกำหนดข้อมูลในแต่ละแถว

 

จากโครงสร้างจะเป็นการสร้างตารางแบบง่ายที่สุดคือ การสร้างตาราแบบ 1 แถว และ 1 คอลัมน์

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

<html>
<head>
<title> ....การสร้างตารางแบบ 2 x 3 (2 แถว 3 คอลัมน์)....</title>
</head>
<body>
<table>
<tr>
<td>...ข้อมูล....</td>
<td>...ข้อมูล....</td>
<td>...ข้อมูล....</td>
</tr>
<tr>
<td>...ข้อมูล....</td>
<td>...ข้อมูล....</td>
<td>...ข้อมูล....</td>
</tr>
</table>
</body>
</html>

           จากตัวอย่างจะสังเกตได้ว่ามีแถว 2 แถว ซึ่งจะเขียนโค้ด html ได้โดยเขียนแท็ก <tr>…. </tr> 2 ชุด และในแถวแต่ละแถวมีคอลัมน์ 3 คอลัมน์ ดังนั้นเราก็สามารถเขียนโค้ดเพื่อสร้างคอลัมน์ โดยเขียนแท็ก <td>…</td> ไว้ใน <tr>… </tr> โดยใน 1 แถวมีคอลัมน์ 3 คอลัมน์ ดังนั้นเราจึงต้องเขียนแท็ก <td>…</td> 3 ชุดไว้ในแท็ก <tr>… </tr> แต่ละชุด

           ถ้าหากต้องการจัดการตาราง เราสามารถเพิ่มคำสั่งที่เป็น Attribute หรือเป็นส่วนขยายของแท็ก (TAG) ได้ ตามตัวอย่างต่อไปนี้
<table bgcolor="color"> .... </table> กำหนดสีพื้นในตารางตามรูปแบบการแสดงค่าสี
<table border="pixels"> .... </table> กำหนดขนาดของขอบตาราง
<table width="pixels/%"> .... </table> กำหนดความกว้างของตาราง เป็น Pixels หรือเป็นเปอร์เซนต์ความกว้างของการปรากฏบนจอภาพ
<tr align=" left | center | right "> .... </tr> กำหนดตำแหน่งของข้อความ
<tr bgcolor="color"> .... </tr> กำหนดสีของพื้นหลังในตาราง ตามรูปแบบการแสดงค่าสี
<th align="left | right | center | justify | char"> .... </th> กำหนดตำแหน่งของข้อความในตารางตามแนวนอน
<th valign="top | middle | bottom | baseline"> .... </th> กำหนดตำแหน่งของข้อความในตารางตามแนวตั้ง
<th bgcolor="color"> .... </th> กำหนดสีพื้นของตารางตามรูปแบบการแสดงค่าส
<th height="pixels | %"> .... </th> กำหนดความสูงของตาราง

<th width="pixels | %"> .... </th>

กำหนดความกว้างของตาราง

<th rowspan="number"> .... </th>

กำหนดการรวมช่องเซลล์ในแนวตั้ง

<th colspan="number"> .... </th>

กำหนดการรวมช่องเซลล์ในแนวนอน
<td align="left | right | center | justify | char"> .... </td> กำหนดตำแหน่งของข้อความในตารางตามแนวนอน
<td valign="top | middle | bottom | baseline"> .... </td> กำหนดตำแหน่งของข้อความในตารางตามแนวตั้ง
<td bgcolor="color"> .... </td> กำหนดสีพื้นของตาราง
<td height="pixels | %"> .... </td> กำหนดความสูงของตาราง
<td width="pixels | %"> .... </td> กำหนดความกว้างของตาราง
<td rowspan="number"> .... </td> กำหนดการรวมช่องเซลล์ในแนวตั้ง
<td colspan="number"> .... </td> กำหนดการรวมช่องเซลล์ในแนวนอน