การสร้างตาราง
ในการสร้าตารางนั้นจะมีคำสั่งหรือป้ายระบุ(Tag) ต่างๆ ที่ใช้สำหรับสร้างตารางในภาษาHTML ดังนี้
| Tag | คำอธิบาย |
| <table> … </table> | คำสั่งในการสร้างตาราง |
| <caption> … </caption> | คำสั่งในการกำหนดข้อความกำกับตาราง |
| <tr> … </tr> | คำสั่งในการกำหนดแถวของตาราง 1 แถว (แนวนอน) |
| <th> … </th> | คำสั่งในการกำหนดส่วนหัวของตารางแถวแรก |
| <td> … </td> | คำสั่งในการกำหนดส่วนของคอลัมน์ (แนวตั้ง) |
รูปแบบโครงสร้างของตาราง
| โครงสร้างของตาราง |
|
|
<table>
<caption> ชื่อตาราง </ caption >
<tr>
<th> ข้อมูลส่วนหัว </th><th> ข้อมูลส่วนหัว </th>
</tr>
<tr>
<td> ข้อมูล1 </td><td> ข้อมูล2 </td>
</tr>
<tr>
<td> ข้อมูล3 </td><td> ข้อมูล4 </td>
</tr>
</table>
|
ชื่อตาราง
ข้อมูลส่วนหัว ข้อมูลส่วนหัว
ข้อมูล1 ข้อมูล2
ข้อมูล3 ข้อมูล4
|
การกำหนดเส้นขอบของตาราง
การสร้างตารางสามารถกำหนดเส้นของและสีเส้นของให้กับตาราง โดยใช้คำสั่ง border และ bordercolor
รูปแบบการใช้งาน <table border=“n“ bordercolor=“ชื่อสี หรือ รหัสสี“> …</table>
n หมายถึง ค่าตัวเลขที่ใช้กำหนดขนาดของเส้นขอบของตาราง ค่าตัวเลขยิ่งมากส้นขอบตารางจะมีขนาดใหญ่เพิ่มขึ้น
ตัวอย่างการใช้งาน <table width=”60%” height=”20%”>
หรือ <table width=”60″ height=”20″>
การกำหนดสีของตาราง
การกำหนดสีพื้นหลังของตาราง เป็นการตกแต่งตารางให้มีสีตามความต้องการของผู้สร้างเว็บเพจ โดยใช้คำสั่ง bgcolor
รูปแบบ : <table bgcolor=”ชื่อสี หรือ รหัสสี“>….</table>
ตัวอย่างการใช้งาน : <table bgcolor=”yellow”>….</table>
หรือ <table bgcolor=”#ffffcc”>….</table>
การกำหนดระยะเว้นขอบภายในเซลข้อมูล
การกำหนดระยะเว้นขอบภายใน(padding) ของซลล์ข้อมูลในตารางนั้น จะมีผลต่อการแสดงผลทำให้เกิดเพื้นที่ว่างในระยะเซลล์ในแต่ละสดมภ์(Column) โดยใช้คำสั่ง cellpadding
รูปแบบ : <table cellpadding=”ระยะห่างจากขอบภายในเซลล์“>….</table>
ตัวอย่างการใช้งาน : <table cellpadding=”10″>….</table>
การกำหนดตำแหน่งของตาราง
การกำหนดตำแหน่งของตาราง ให้อยู่ในตำแหน่งที่ต้องการสามารถทำได้โดยใช้คำสั่งแอตทริบิวต์ align
รูปแบบ : <table align=”ตำแหน่งของตาราง“>….</table>
ในส่วนของการกำหนดตำแหน่งของตารางนั้นสามารถกำหนดได้ดังนี้
align=”left” คือ แสดงผลตารางให้ชิดด้านซ้ายของหน้าจอเว็บบราวเซอร์
align=”right” คือ แสดงผลตารางให้ชิดด้านขวาของหน้าจอเว็บบราวเซอร์
align=”center” คือ แสดงผลตารางให้กึ่งกลางของหน้าจอเว็บบราวเซอร์
ตัวอย่างการใช้งาน : <table align=”center”>….</table>
การกำหนดคุณลักษณะพิเศษภายในแถว
1. การกำหนดตำแหน่งข้อความภายในเซลล์ ใช้คำสั่งแอตทริบิวต์ align ในการกำหนดตำแหน่งภายในแท็ก<tr> หรือ<td> ให้ข้อความอยู่ในตำแหน่งที่ต้องการ
รูปแบบ : <tr align=”ตำแหน่งของตาราง“>…</tr>
รูปแบบ : <td align=”ตำแหน่งของตาราง“>…</td>
สามารถกำหนดให้ข้อมูลอยู่ในตำแหน่งต่างๆ ดังนี้
align=”left” คือ การจัดตำแหน่งให้ข้อความชิดทางด้านซ้ายของแถวหรือเซลล์
align=”right” คือ การจัดตำแหน่งให้ข้อความชิดทางด้านขวาของแถวหรือเซลล์
align=”center” คือ การจัดตำแหน่งให้อยู่กึ่งกลางของแถวหรือเซลล์
ตัวอย่างการใช้งาน : <tr align=”ตำแหน่งของตาราง“>…</tr> หรือ <td align=”ตำแหน่งของตาราง“>…</td>
2. การกำหนดสีพื้นให้กับแถวและในเซลล์ โดยใช้คำสั่ง bgcolor
รูปแบบ : <tr bgcolor=”ชื่อสี หรือ รหัสสี“>…</tr>
<td bgcolor=”ชื่อสี หรือ รหัสสี“>…</td>
ตัวอย่างการใช้งาน : <tr bgcolor=”pink”>…</tr>
<td bgcolor=” pink”>…</td>
3. การกำหนดตำแหน่งของข้อมูลในแนวตั้งของตาราง โดยใช้คำสั่งแอตทริบิวต์ valign ในการกำหนดตำแหน่งต่างๆ ดังนี้ valign=”top” คือ จัดข้อมูลให้อยู่ในตำแหน่งชิดขอบบนของช่องตาราง
valign=”middle” คือ จัดข้อมูลให้อยู่ในตำแหน่งกึ่งกลางของช่องตาราง
valign=”bottom” คือ จัดข้อมูลให้อยู่ในตำแหน่งชิดขอบล่างของช่องตาราง
รูปแบบ : <td valign =” ตำแหน่งของข้อมูล“>…</td>
ตัวอย่างการใช้งาน : <td valign =”middle”>…</td>
การผนวกแถวและคอลัมน์ในตาราง
การรวมพื้นที่ของช่องภายในตารางเข้าด้วยกันสามารถทำได้เป็น 2 ลักษณะคือ
1. การรวมแถว คือ การกำหนดลักษณะพิเศษด้วยคำสั่งแอตทริบิวต์ rowspan ในการรวมแถวเข้าด้วยกัน
รูปแบบ: <td rowspan =” จำนวนแถวที่รวมเซลล์“>…</td>
ตัวอย่างการใช้งาน
2. การรวมคอลัมน์ คือ กำหนดลักษณะพิเศษด้วยคำสั่งแอตทริบิวต์ colspan ในการรวมคอลัมน์เข้าด้วยกัน
รูปแบบ : <td colspan =” จำนวนแถวที่รวมเซลล์“>…</td>
ตัวอย่างการใช้งาน
การใส่รูปภาพลงในตาราง
การแทรกรูปภาพภายในช่องของตารางโดยใช้คำสั่ง <img src>ในการแทรกรูปให้อยู่ระหว่างแท็ก <td>…</td>
รูปแบบ : <td <img src=”ชื่อแฟ้มรูปภาพ /ชื่อไฟล์รูปภาพ“>…</td>
ตัวอย่างการใช้งาน : <td <img src=”images/flower.gif”></td>
การเปลี่ยนสีพื้นหลังของตารางเป็นรูปภาพ
ในกรณีที่ต้องการให้ตารางมีพื้นหลังเป็นรูปภาพ สามารถใช้คำสั่งแอตทริบิวต์ background ในแท็กเปิดของคำสั่งสร้างตารางคือ <table> เพื่อเปลี่ยนพื้นหลังให้เป็นรูปภาพ
รูปแบบ : <table background=”ชื่อไฟล์รูปภาพ“>…</ table >
ตัวอย่างการใช้งาน : <table background=”bgo181.gif”>…</table>