บทที่ 5 การสร้างตาราง

ใบความรู้

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

               

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