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

            

ในการสรา้ตารางนัน้จะมคีำาสัง่หรอืป้ายระบุ(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>