วันอังคารที่ 10 กรกฎาคม พ.ศ. 2555
การสร้างตาราง
ตารางและการประยุกต์ใช้
บทนี้เป็นการเรียนรู้วิธีสร้างตารางโดยเริ่มที่วิธีสร้างตารางแบบง่าย ๆ ต่อด้วยการปรับแต่งตารางในรูปแบบ
ต่างๆ จนกระทั่งถึงการนำตารางไปประยุกต์ใช้ในข้อมูลและจัดหน้าเว็บเพจ รวมทั่งใช้แก้ไขปัญหาที่ผู้ใช้งานอาจตั้งค่าความละเอียด
ของหน้าจอไม่เท่ากันจนทำให้เว็บเพจปรากฏต่อสายตาผู้ใช้แต่ละคนแตกต่างกัน
วิธีสร้างตาราง
ในแต่ละครั้งที่สร้างตารางขึ้นมานั้นจำเป็นจะต้องใช้ <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
สมัครสมาชิก:
ส่งความคิดเห็น (Atom)
ไม่มีความคิดเห็น:
แสดงความคิดเห็น