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

ตารางและการประยุกต์ใช้           
 
                        บทนี้เป็นการเรียนรู้วิธีสร้างตารางโดยเริ่มที่วิธีสร้างตารางแบบง่าย ๆ  ต่อด้วยการปรับแต่งตารางในรูปแบบ
ต่างๆ  จนกระทั่งถึงการนำตารางไปประยุกต์ใช้ในข้อมูลและจัดหน้าเว็บเพจ รวมทั่งใช้แก้ไขปัญหาที่ผู้ใช้งานอาจตั้งค่าความละเอียด
ของหน้าจอไม่เท่ากันจนทำให้เว็บเพจปรากฏต่อสายตาผู้ใช้แต่ละคนแตกต่างกัน
 
 วิธีสร้างตาราง
 
                        ในแต่ละครั้งที่สร้างตารางขึ้นมานั้นจำเป็นจะต้องใช้   <TABLE>,<TR>และ  <TD>
เพื่อกำหนดขอบเขตของตาราง กำหนดจำนวนแถว และกำหนดจำนวนคอลัมน์ในแต่ละแถวตามลำดับ
 
 ขอบเขตของตาราง
 
 เราใช้  <TABLE>ในการกำหนดขอบเขตของตาราง รวมทั้งใช้แอตทริบิวต์ต่างๆ ของแท็กนี้ในการกำหนด
ลักษณะของตารางให้แตกต่างไปจากปกติ ซึ่งลักษณะของตารางปกติจะเป็นตารางที่ไม่มีขอบ ไม่มีสีใด ๆ ทั้งสิ้น ดังนั้น สีหรือ
ลักษณะที่เห็นจะเป็นเช่นเดียวกับพื้นหลังของเว็บเพจหน้านั้น
 
 
 รูปแบบการใช้งาน  <TABLE> เป็นดังนี้
 
 ชื่อแท็ก:       TABLE
 รูปแบบ:       <TABLE>แท็กที่เกี่ยวข้องกับตารางและข้อมูลในตาราง</TABLE>  
 ตัวอย่างการใช้:    <table><tr> <td>ช่องที่ 1 ของแถวที่   1 </td>…</tr>…</table>
 ตำแหน่งที่ใช้:     ระหว่าง     <BODY>…</BODY>
 
 จำนวนแถวในตาราง         
 
 วิธีการกำหนดจำนวนแถวในตารางทำได้ด้วยการใช้   <TR>โดยมีหลักการคือ ต้องการกี่แถวก็ให้ใช้  <TR>
เท่ากับจำนวนแถวที่ต้องการ
 
 ชื่อแท็ก:      TR
 รูปแบบ:      <TR>แท็กที่เกี่ยวข้องกับตารางและข้อมูลในตาราง</TR>
 ตัวอย่างการใช้:   <tr> <td>ช่องที่ 1 ของแถวที่   1 </td>…</tr>
                   <tr> <td>ช่องที่ 1 ของแถวที่   2 </td>…</tr>
 ตำแหน่งที่ใช้:      ระหว่าง  <TABLE>…</TABLE>  

 จำนวนคอลัมน์ในแต่ละแถว         
 
 เมื่อต้องการแบ่งแต่ละแถวออกเป็นคอลัมน์เราจะใช้หลักการเดียวกับการกำหนดจำนวนแถวในตารางคือ
ต้องการให้มีกี่คอลัมน์ก็ให้ใช้  <TD> เท่ากับจำนวนคอลัมน์ที่ต้องการ
 
 ชื่อแท็ก:      TD
 รูปแบบ:      <TD>ข้อมูลในตาราง</TD>   
 ตัวอย่างการใช้:   <td>ช่องที่ 1 ของแถวที่   1 </td>
                   <td>ช่องที่ 2 ของแถวที่   1 </td>
                   <td>ช่องที่ 3 ของแถวที่   1</td>
 ตำแหน่งที่ใช้:    ระหว่าง   <TR>…</TR>

 สร้างตารางที่มี  3  แถว  แถวละ 2 คอลัมน์             
 
 ขั้นตอนต่อไปนี้จะช่วยให้เราทราบว่าการที่จะสร้างตารางขึ้นมาสักหนึ่งตารางนั้นมีวิธีการอย่างไร
 1    กำหนดขอบเขตของตารางด้วย    <TABLE>
 2    แบ่งตารางออกเป็น  3  แถวโดยใช้     <TR> จำนวน 3 แท็ก
 3    ในแต่ละ   <TR>คือ แต่ละแถวให้แบ่งออกเป็น  2  คอลัมน์ด้วย <TD>จำนวนแถวละ 2 แท็ก
 4    ข้อมูลที่ต้องการแสดงในแต่ละช่องของตารางให้ใส่ไว้ระหว่าง    <TD>…</TD>
 วิธีควบคุมลักษณะของตารางด้วย    <TABLE>        
 
 วิธีในการเปลี่ยนแปลงลักษณะต่างๆ ของตารางที่จะกล่าวถึงต่อไปนี้เป็นวิธีที่สามารถทำได้โดยใช้แอตทริบิวต์
ของ <TABLE> ซึ่งมีอยู่ด้วยกันหลากหลายวิธีเลยที่เดียว ตัวอย่าง เช่น การกำหนดลักษณะต่างๆ ของเส้นขอบ การกำหนด
ขนาดของตารางไม่ว่าจะเป็นความกว้างและความสูง แม้แต่การกำหนดตำแหน่งของตารางที่ปรากฏในหน้าเว็บเพจเราก็สามารถ
ทำได้เช่นเดียวกัน วิธีการกำหนดลักษณะต่างๆ ที่ไดกล่าวถึงรวมทั้งลักษณะอื่นๆ สามรถกำหนดได้ดังต่อไปนี้
 
 กำหนดให้ขอบตารางปรากฏ
  โดยปกติเราจะไม่เห็นขอบตาราง (ลักษณะปกติ) แต่ถ้าเราต้องการให้เส้นขอบของตารางปรากฏก็เป็นสิ่งที่
กำหนดได้  โดยเส้นขอบของตารางจะมีอยู่ 2 แบบคือ   เส้นขอบด้านนอกของตารางและเส้นขอบของแต่ละช่องในตาราง
การกำหนดขนาดของเส้นขอบจะมีผลกับเส้นขอบทั้งสองแบบพร้อมกัน
 
 ชื่อแอตทริบิวต์ :     BORDER
 รูปแบบ:         <TABLE   BORDER=”ขนาดของพิกเซล”>… </TABLE>
 ตัวอย่างการใช้:      <table  border=”1”>… </table>
 ตำแหน่งที่ใช้:       ภายในแท็กเปิดของ     <TABLE>…</TABLE>
 
 เมื่อต้องการกำหนดให้เส้นขอบมีขนาดเป็น  1   พิกเซลให้เราทำตามขั้นตอนดังนี้
 1.  กำหนดค่าให้แอตทริบิวต์    BORDER    เป็น 1
 
 เปลี่ยนสีขอบของตาราง            
 
                         เราสามารถเปลี่ยนสีของเส้นที่เป็นขอบของตารางจากสีดำเป็นสีอื่นได้โดยใช้แอตทริบิวต์  
BORDERCOLOR ซึ่งมีรูปแบบการใช้งานเป็นดังนี้
 
 ชื่อแอตทริบิวต์:  BORDECOLOR
 รูปแบบ:      <TABLE   BORDECOLOR=”ชื่อสีหรือค่าสี”>… </TABLE>
 ตัวอย่างการใช้:   <table  bordercolor=”green”>…</table>
 ตำแหน่งที่ใช้:       ภายในแท็กเปิดของ   <TABLE>
 
 
                        ตัวอย่างต่อไปนี้เป็นการกำหนดสีขอบของตารางโดยจะกำหนดให้เป็นสีเขียวด้วยการกำหนดด้วยชื่อสี  GREEN
ผลลัพธ์ที่จะทำให้เส้นขอบด้านนอกของตาราง และเส้นขอบของแต่ละช่องในตารางเปลี่ยนเป็นสีที่ต้องการเมื่อเปิดดูโปรแกรม
Internet  Explorer
         1.กำหนดชื่อสีหรือค่าสีที่ต้องการให้กับแอตทริบิวต์ BORDERCOLOR ในตัวอย่างได้กำหนดให้เป็น
 “green”
                                                

 กำหนดขนาดของตาราง        
 
                        ขนาดของตารางสามารถกำหนดให้ทั้งความกว้างและความสูง  โดยที่ลักษณะทั้งสองของตารางจะกำหนดได้
ด้วยแอตทริบิวต์  WIDTH และ   HEIGHT ตามลำดับ
           
 ชื่อแอตทริบิวต์:      WIDTH, HEIGHT   
 รูปแบบ :         <TABLE WIDTH=”ความกว้างเป็นเปอร์เซ็นต์หรือพิกเซล”HEIGHT=”ความสูง
                                                             เป็นเปอร์เซ็นต์หรือพิกเซล”>…</TABLE>
 ตัวอย่างการใช้:      <table width=”45%” height=”150”>…</table> 
 ตำแหน่งที่ใช้:          ภายในแท็กเปิดของ     <TABLE>
 
 เราจะกำหนดให้ตารางมีความกว้างเป็น  45  เปอร์เซ็นของความกว้างเว็บเพจ  และกำหนดให้ตารางมีความสูงเป็น   150  พิกเซลดังนี้
        1.กำหนดค่าให้แอตทริบิวต์   WIDTH  เท่ากับ  45%
        2.กำหนดค่าให้แอตทริบิวต์   HEIGHT เป็น  150
 
ตำแหน่งของตารางในหน้าเว็บเพจ      
 
                        ถ้าเราสร้างตารางขึ้นมาครั้งแรกตำแหน่งของตารางจะถูกบราวเซอร์จัดให้ชิดด้านซ้ายของหน้าเว็บเพจเช่นเดียวกับข้อความในเว็บเพจ
            แต่เราสามารถเปลี่ยนตำแหน่งของตารางได้ด้วยการใช้แอตทริบิวต์    ALIGN
 
 ชื่อแอตทริบิวต์:   ALIGN 
 รูปแบบ:      <TABLE ALIGN=”left หรือ   right หรือ   center”>…</TABLE>
 ตัวอย่างการใช้:   <table align=”center”>…</table>
 ตำแหน่งที่ใช้:     ภายในแท็กเปิดของ    <TABLE>
 
 หากว่าเราต้องการจัดตำแหน่งของตารางให้อยู่กลางหน้าเว็บเพจให้เราทำตามขั้นตอนดังนี้
              1.กำหนดค่าให้แอตทริบิวต์   ALIGN เป็น   CENTER

 กำหนดสีพื้นหลังให้ตาราง              
 
                        ลักษณะของการกำหนดรูปแบบพื้นหลังให้กับตารางนั้นคล้ายคลึงกับการกำหนดรูปแบบพื้นหลังของเว็บเพจ
มากคือสามารถกำหนดได้ทั้งสีพื้นและรูปพื้นหลัง  โดยการกำหนดสีพื้นนั้นกำหนดได้ด้วยแอตทริบิวต์  BGCOLOR ดังนี้
 
 ชื่อแอตทริบิวต์ :  BGCOLOR
 รูปแบบ:     <TABLE   BGCOLOR=”ชื่อสีหรือค่าสี”>…</TABLE>
 ตัวอย่างการใช้:  <table  bgcolor=”cyan”>…</table>
 ตำแหน่งที่ใช้:   ภายในแท็กเปิดของ    <TABLE>  
 
                        ในกรณีที่ต้องการกำหนดให้ตารางมีสีพื้นหลังเป็นสี   pink เราก็สามารถทำได้ง่าย ๆ โดยกำหนดให้แอตทริบิวต์
BGCOLOR มีค่าเป็น   “pink” ดังขั้นตอนด้านล่าง
        1.กำหนดค่าเป็น   “pink” ให้แอตทริบิวต์       BGCOLOR

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

ติดตาม

Get every new post delivered to your Inbox.

%d bloggers like this: