การแทรกตาราง
ในการนำเสนอข้อมูลต่าง ๆ นั้น จะเห็นว่าการนำเสนอข้อมูลด้วยตาราง จะทำให้เกิดความเข้าใจได้ง่ายขึ้น สามารถเปรียบเทียบความแตกต่าง ๆ ของข้อมูลได้อย่างชัดเจน นอกจากประโยชน์ดังกล่าวในการสร้างเว็บเพจนั้น ตารางยังสามารถนำมาช่วยในการจัดรูปแบบของจอภาพบนเว็บเพจได้อีกด้วย เพื่อแบ่งแยกหน้าเว็บเพจออกเป็น ส่วน ๆ เกิดความเป็นระเบียบและความสวยงามมากขึ้น
ในการสร้างตารางจะมีแท็กที่สำคัญอยู่หลายแท็ก ดังนี้
TABLE
ใช้สำหรับบอกจุดเริ่มต้น และจุดสิ้นสุดของตาราง
รูปแบบคำสั่ง
<table>................</table>
TR
ใช้สำหรับสร้างแถวของตาราง
รูปแบบคำสั่ง
<tr>................</tr>
TH
ใช้นำหน้าข้อมูลที่ต้องการให้ปรากฏในแต่ละช่องของตาราง โดยส่วนใหญ่จะใช้เป็นหัวเรื่อง ลักษณะตัวอักษรจะเป็นตัวหนา และจะถูกจัดให้อยู่กึ่งกลางของช่องข้อมูล
รูปแบบคำสั่ง
<th>................</th>
TD
ทำหน้าที่คล้ายกับแท็ก <TH> และ </TH> แต่ลักษณะตัวอักษรจะเป็นขนาดปกติ และจะถูกจัดให้ชิด้านซ้ายของช่องข้อมูล ส่วนใหญ่จะใช้ในส่วนที่เป็นรายละเอียดของข้อมูล
รูปแบบคำสั่ง
<td>................</td>
การปรับความกว้าง (width)
width = "x"
จะใช้กำหนดความกว้างของตาราง กำหนดค่า x ในรูปของ เปอร์เซ็นต์ ของขนาดพื้นที่ที่โปรแกรม web browser สามารถจะแสดงได้หรือกำหนดค่าเป็นตัวเลข เพื่อให้ web browser แปลงค่าไปเป็นค่าของ pixels
รูปแบบคำสั่ง
<table width = "150"> หรือ <table width = "50%">
การปรับความสูง (Hight)
hight = "x"
จะใช้สำหรับกำหนดความสูงของตาราง โดยสามารถกำหนดเป็นหน่วยของ Pixel หรือเป็นเปอร์เซ็นต์ได้
รูปแบบคำสั่ง
<table hight = "150"> หรือ <table hight = "10%">
การจัดตำแหน่งตาราง (Align)
align = "x"
จะใช้เพื่อกำหนดตำแหน่งของตาราง โดยที่ค่า "x" มีค่าเป็น left, right หรือ center โดยโปรแกรม web browser มีค่า default เป็น left
รูปแบบคำสั่ง
<table align = "left"> หรือ <table align= "right">หรือ <table align = "center">
การรวมเซลล์ตาราง - rowspan,colspan
การรวมแถว
rowspan = "x"
เป็นการรวมเซลล์ตามแนวตั้ง ตั้งแต่ 2 เซลล์ขึ้นไป เป็นเซลล์เดียวกัน โดยใช้คำสั่ง ROWSPAN กำหนดไว้ในคำสั่ง <TD> เหมือนการรวมคอลัมน์
รูปแบบคำสั่ง
<TR> <TD ROWSPAN ="จำนวนแถวที่รวม"> ข้อความ </TD</TR>
การรวมคอลัมน์
colspan = "x"
เป็นการรวมเซลล์ตามแนวนอนตั้งแต่ 2 เซลล์ขึ้นไป เป็นเซลล์เดียวกัน โดยใช้คำสั่ง COLSPAN กำหน ดไว้ในคำสั่ง <TD>
รูปแบบคำสั่ง
<TR> <TD COLSPAN = " จำนวนคอลัมน์ที่รวม " > ข้อความ </TD> </TR>
ตัวอย่าง
ผลที่ได้
ไม่มีความคิดเห็น:
แสดงความคิดเห็น