วันเสาร์ที่ 12 มิถุนายน พ.ศ. 2564

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

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

การกำหนดเส้นขอบของตาราง      

                การสร้างตารางสามารถกำหนดเส้นของและสีเส้นของให้กับตาราง โดยใช้คำสั่ง bordeและ  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>

     

การผนวกแถวและคอลัมน์ในตาราง

    การรวมพื้นที่ของช่องภายในตารางเข้าด้วยกันสามารถทำได้เป็น ลักษณะคือ
    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>

ไม่มีความคิดเห็น:

แสดงความคิดเห็น