หากต้องการนำเสนอข้อมูลที่มีปริมาณมากๆ หรือข้อมูลที่ต้องมีการเปรียบเทียบกันการนำเสนอข้อมูลในรูปแบบของตารางจะช่วยทำให้ข้อมูลประเภทนี้ดูง่ายยิ่งขึ้นและเป็นระเบียบเรียบร้อยอ่านได้ง่ายกว่าปกติ การสร้างตารางในเอกสาร HTML มีอยู่หลายรูปแบบแล้วแต่ผู้เขียนโปรแกรมจะกำหนดโดยใช้คำสั่งต่าง ๆ ดังต่อไปนี้
1. คำสั่งหลักที่ใช้ในการสร้างตารางของภาษา HTML มีดังนี้
<TABLE>...........</TABLE>
เป็นคำสั่งที่กำหนดให้โปรแกรมเบราว์เซอร์สร้างตาราง
<CAPTION>...........</CAPTION>
เป็นคำสั่งที่ใช้ตั้งชื่อหรือหัวข้อเรื่องให้กับตาราง
<TR>...........</TR>
เป็นคำสั่งที่ใช้กำหนดแถว (ROW)
<TH>...........</TH>
เป็นคำสั่งที่ใช้ในการกำหนดข้อมูลส่วนหัวของตาราง
<TD>...........</TD>
เป็นคำสั่งที่ใช้ในการกำหนดข้อมูลในแต่ละแถว
|
โครงสร้างของตาราง
| <TABLE> <CAPTION> ชื่อตาราง </CAPTION> <TR> <TH> ข้อมูลส่วนหัว </TH> </TR> <TR> <TD> ข้อมูล </TD> </TR> <TR> <TD> ข้อมูล </TD> </TR> </TABLE> |
ตัวอย่างการสร้างตาราง
---------------------------------------------------------------
2. คำสั่งต่างๆ ที่ใช้ในการตกแต่งตารางของภาษา HTML
2.1 คำสั่ง BORDER ใช้กำหนดความหนาให้กับเส้นขอบของตาราง มีหน่วยเป็น Pixel ถ้าไม่ใส่คำสั่งนี้ไว้ด้วย BORDER ก็จะมีค่าเท่ากับ 1 ซึ่งเป็นค่าปกตอ คือจะไม่เห็นเส้นขอบของตาราง
ตัวอย่างการใช้คำสั่ง BORDER
2.2 คำสั่ง ALIGN ใช้กำหนดตำแหน่งการจัดวางตาราง มี 3 รูปแบบ คือ
- LEFT คือ จัดตารางชิดซ้าย (ค่าปกติ) ของจอภาพ
- RIGHT คือ จัดตารางชิดขวาของจอภาพ
- CENTER คือ จัดตารางไว้กึ่งกลางของจอภาพ
ตัวอย่างการสร้างตารางอยู่กึ่งกลางจอภาพ
2.3 คำสั่ง WIDTH ใช้กำหนดความกว้างของตารางทั้งหมด มีหน่วยเป็น Pixel หรือ เปอร์เซ็นต์ก็ได้
2.4 คำสั่ง HEIGHT ใช้กำหนดความสูงของตารางทั้งหมด มีหน่วยเป็น Pixel หรือ เปอร์เซ็นต์ก็ได้
2.5 คำสั่ง BGCOLOR เป็นคำสั่งที่ใช้ในการกำหนดสีพื้นหลังของตารางใช้ได้กับเว็บเบราว์เซอร์ Internet Explorer เท่านั้น
ตัวอย่างการใช้คำสั่ง WIDTH , HEIGHT , BGCOLOR
2.5 คำสั่ง CELLSPACING ใช้กำหนดระยะห่างระหว่างช่องแต่ละช่องในตาราง โดยการเพิ่มขนาดหรือลดขนาดตามความหนาของเส้นขอบตาราง
2.6 คำสั่ง CELLPADDING ใช้กำหนดระยะห่างระหว่างบรรทัดของตาราง โดยการเพิ่มขนาดหรือลดขนาดตามความสูงของเส้นขอบตาราง
2.7 คำสั่ง Colspan และ Rowspan
คำสั่ง <TD COLSPAN> เป็นคำสั่งในการรวมคอลัมน์เข้าด้วยกัน ตามค่าของจำนวนคอลัมน์ที่กำหนดไว้
รูปแบบคำสั่ง <TD COLSPAN = "Number"> โดยที่ - COLSPAN คือ แอตทริบิวต์ที่ใช้ในการกำหนดการรวมคอลัมน์ - Numberคือ ค่าตัวเลขที่ใช้ในการรวมคอลัมน์เข้าเป็นคอลัมน์เดี่ยวกัน
รูปแบบคำสั่ง <TD COLSPAN = "Number"> โดยที่ - COLSPAN คือ แอตทริบิวต์ที่ใช้ในการกำหนดการรวมคอลัมน์ - Numberคือ ค่าตัวเลขที่ใช้ในการรวมคอลัมน์เข้าเป็นคอลัมน์เดี่ยวกัน
คำสั่ง <TD ROWSPAN> เป็นคำสั่งในการรวมแถวเข้าด้วยกัน ตามค่าของจำนวนแถวที่กำหนดไว้
รูปแบบคำสั่ง <TD ROWSPAN = "Number">
โดยที่ - ROWSPAN คือ แอตทริบิวต์ที่ใช้ในการกำหนดการรวมแถว - Number คือ ค่าตัวเลขที่ใช้ในการรวมแถวเข้าเป็นแถวเดียวกัน
รูปแบบคำสั่ง <TD ROWSPAN = "Number">
โดยที่ - ROWSPAN คือ แอตทริบิวต์ที่ใช้ในการกำหนดการรวมแถว - Number คือ ค่าตัวเลขที่ใช้ในการรวมแถวเข้าเป็นแถวเดียวกัน
ผลลัพธ์
---------------------------------------------------------------
ไม่มีความคิดเห็น:
แสดงความคิดเห็น