€¦ · web viewการสร างตาราง ในการสร าตารางน...
TRANSCRIPT
การสรา้งตาราง
ในการสรา้ตารางนัน้จะมคีำาสัง่หรอืป้ายระบุ(Tag) ต่างๆ ที่ใชส้ำาหรบัสรา้งตารางในภาษา HTML ดังน้ี
Tag คำาอธบิาย <table> ... </table>
คำาสัง่ในการสรา้งตาราง
<caption> ... </caption>
คำาสัง่ในการกำาหนดขอ้ความกำากับตาราง
<tr> ... </tr> คำาสัง่ในการกำาหนดแถวของตาราง 1 แถว (แนวนอน)
<th> ... </th> คำาสัง่ในการกำาหนดสว่นหวัของตารางแถวแรก
<td> ... </td> คำาสัง่ในการกำาหนดสว่นของคอลัมน์ (แนวตัง้)
รูปแบบโครงสรา้งของตาราง
โครงสรา้งของตาราง การแสดงผล <table><caption> ชื่อตาราง </ caption ><tr> <th> ขอ้มูลสว่นหวั </th><th> ขอ้มูลสว่นหวั </th></tr><tr>
ชื่อตารางขอ้มูลสว่นหวั ขอ้มูลสว่นหวั ขอ้มูล 1 ขอ้มูล 2 ขอ้มูล 3 ขอ้มูล 4
<td> ขอ้มูล 1 </td><td> ขอ้มูล 2 </td></tr><tr> <td> ขอ้มูล 3 </td><td> ขอ้มูล 4 </td></tr></table>
การกำาหนดเสน้ขอบของตาราง
การสรา้งตารางสามารถกำาหนดเสน้ของและสเีสน้ของให้กับตาราง โดยใชค้ำาสัง่ 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 ในแท็กเปิดของคำาสัง่สรา้งตารางคือ <tabl
e> เพื่อเปล่ียนพื้นหลังใหเ้ป็นรูปภาพ รูปแบบ : <table background="ชื่อไฟล์รูปภาพ">…</ table > ตัวอยา่งการใช้งาน : <table background="bgo181.gif">…</table>