การใช้ตารางเหมาะสำหรับการนำเสนอข้อมูลจำนวนมาก โดยตารางสามารถใช้งานได้หลายแบบตั้งแต่ใช้เป็นตารางธรรมดาเพื่อแสดงค่าตัวเลขทางสถิติหรือตัวเลขที่มีความสัมพันธ์กัน ซึ่งการใช้ตารางนำเสนอข้อมูลแบบนี้ทำให้เห็นการเปรียบเทียบที่ชัดเจน และการประยุกต์ใช้ตารางกับข้อมูลประเภทอื่นๆ เช่น ข้อความ หรือรูปภาพเพื่อช่วยออกแบบโฮมเพจ (เว็บเพจหน้าแรก) ซึ่งตารางสามารถจัดองค์ประกอบต่าง ๆ ได้อย่างเป็นสัดส่วนและอยู่ในตำแหน่งที่ต้องการได้ Show 1. โครงสร้างของตาราง <table>
คุณสมบัติของตาราง <table> แอตทริบิวต์คุณสมบัติalign= “align-type”กำหนดตำแหน่งตาราง โดยleft=กำหนดตารางให้อยู่ทางซ้าย center = กำหนดตารางให้อยู่กึ่งกลาง right=กำหนดตารางให้อยู่ทางขวาbackground=“url”ใส่ภาพกราฟิก เป็นพื้นหลังตาราง โดย url เป็น ตำแหน่งภาพbgcolor=“n”กำหนดสีพื้นหลังให้ตาราง โดย n คือ #รหัสสี หรือชื่อสีborder=“n”กำหนดเส้นขอบตาราง โดย n เป็นค่าความหนาของขอบตารางbordercolor=“n”กำหนดสี ให้ขอบตาราง โดยสัมพันธ์กับ BORDER ซึ่ง n คือ #รหัสสี หรือชื่อสีcellpadding=“n”กำหนดระยะห่างระหว่างตัวหนังสือและเส้นแบ่งตาราง โดย n เป็นค่าระยะห่างcellspacing=“n”กำหนดขนาดความห่างของซ่องเซลล์ โดย n เป็นขนาดของความห่างwidth=“n”กำหนดความกว้างของตาราง เป็นตัวเลขและเป็น %height=“n”กำหนดความสูงของตารางเป็นตัวเลขและเป็น %
คุณสมบัติของแท็ก <tr> แอตทริบิวต์คุณสมบัติalign= “align-type”กำหนดตำแหน่งตาราง โดยleft=กำหนดตารางให้อยู่ทางซ้าย center = กำหนดตารางให้อยู่กึ่งกลาง right=กำหนดตารางให้อยู่ทางขวาbackground=“url”ใส่ภาพกราฟิก เป็นพื้นหลังตาราง โดย url เป็น ตำแหน่งภาพbgcolor=“n”กำหนดสีพื้นหลังให้ตาราง โดย n คือ #รหัสสี หรือชื่อสีbordercolor=“n”กำหนดสี ให้ขอบตาราง โดยสัมพันธ์กับ BORDER ซึ่ง n คือ #รหัสสี หรือชื่อสีvalign=“align-type”จัดตำแหน่งข้อมูลในแนวตั้ง โดย top= จัดอยู่ข้างบน middle = จัดอยู่ตรงกลาง bottom= จัดอยู่ข้างล่าง
คุณสมบัติของแท็ก <th> แอตทริบิวต์คุณสมบัติalign= “align-type”กำหนดตำแหน่งตาราง โดยleft=กำหนดตารางให้อยู่ทางซ้าย center = กำหนดตารางให้อยู่กึ่งกลาง right=กำหนดตารางให้อยู่ทางขวาbackground=“url”ใส่ภาพกราฟิก เป็นพื้นหลังตาราง โดย url เป็น ตำแหน่งภาพbgcolor=“n”กำหนดสีพื้นหลังให้ตาราง โดย n คือ #รหัสสี หรือชื่อสีbordercolor=“n”กำหนดสี ให้ขอบตาราง โดยสัมพันธ์กับ BORDER ซึ่ง n คือ #รหัสสี หรือชื่อสีcolspan=“n”ปรับขนาดของคอลัมน์ให้มีขนาดเป็นเท่าของความกว้างปกติ สูงสุดเท่ากับจำนวนคอลัมน์ที่มี โดย n คือ ค่าตัวเลขของคอลัมน์rowspan=“n”ปรับขนาดความสูงของแถวในตารางเป็นเท่าของแถวปกติ สูงสุดเท่ากับ จำนวนแถวที่มี โดย n คือ ค่าตัวเลขของแถวvalign=“align-type”จัดตำแหน่งข้อมูลในแนวตั้ง โดย top= จัดอยู่ข้างบน middle = จัดอยู่ตรงกลาง bottom= จัดอยู่ข้างล่าง
คุณสมบัติของแท็ก <td> แอตทริบิวต์คุณสมบัติalign= “align-type”กำหนดตำแหน่งตาราง โดยleft=กำหนดตารางให้อยู่ทางซ้าย center = กำหนดตารางให้อยู่กึ่งกลาง right=กำหนดตารางให้อยู่ทางขวาbackground=“url”ใส่ภาพกราฟิก เป็นพื้นหลังตาราง โดย url เป็น ตำแหน่งภาพbgcolor=“n”กำหนดสีพื้นหลังให้ตาราง โดย n คือ #รหัสสี หรือชื่อสีbordercolor=“n”กำหนดสี ให้ขอบตาราง โดยสัมพันธ์กับ BORDER ซึ่ง n คือ #รหัสสี หรือชื่อสีcolspan=“n”ปรับขนาดของคอลัมน์ให้มีขนาดเป็นเท่าของความกว้างปกติ สูงสุดเท่ากับจำนวนคอลัมน์ที่มี โดย n คือ ค่าตัวเลขของคอลัมน์rowspan=“n”ปรับขนาดความสูงของแถวในตารางเป็นเท่าของแถวปกติ สูงสุดเท่ากับ จำนวนแถวที่มี โดย n คือ ค่าตัวเลขของแถวvalign=“align-type”จัจัดตำแหน่งข้อมูลในแนวตั้ง โดย top= จัดอยู่ข้างบน middle = จัดอยู่ตรงกลาง bottom= จัดอยู่ข้างล่าง
2. การสร้างตาราง ชื่อแท็ก table, tr, td ตัวอย่างการใช้งาน <html> ผลลัพธ์ที่ได้  3. การใส่หัวเรื่อง <th> และตีเส้นตาราง รูปแบบแท็ก HTML (การใส่หัวเรื่อง) รูปแบบแท็ก HTML (การตีเส้นตาราง) <table border=“ความหนาของเส้น”> ตัวอย่างการใช้งาน <html> ผลลัพธ์ที่ได้ 4. การกำหนดข้อความกำกับให้กับตาราง รูปแบบแท็ก HTML <caption align=“ตำแหน่ง”>ข้อความกำกับ</caption> ตัวอย่างการใช้งาน <html> ผลลัพธ์ที่ได้ 5. การปรับความห่างและการเว้นระยะระหว่างข้อมูลในเซลล์กับกรอบเซลล์ รูปแบบแท็ก HTML <table cellspacing=“ความห่าง”> รูปแบบแท็ก HTML <table cellpadding=“ระยะที่ต้องการเว้น”> ตัวอย่างการใช้งาน <html> ผลลัพธ์ที่ได้ 6. การปรับความกว้างและความสูงของตาราง รูปแบบแท็ก HTML <table width=“ความกว้าง” height=“ความสูง”> ตัวอย่างการใช้งาน <html> ผลลัพธ์ที่ได้ 7. การปรับขนาดช่องเซลล์ หากเราต้องการปรับขนาดช่องเซลล์จากปกติ 1 ช่อง ที่มีขนาด 1 แถว 1 คอลัมน์เป็นแบบ 1 แถว 3 คอลัมน์ เราก็สามารถทำได้ดังนี้ รูปแบบแท็ก HTML <td colspan=“จำนวนคอลัมน์ที่ต้องการขยาย”> ตัวอย่างการขยายเซลล์เกิน 1 คอลัมน์ <html> ผลลัพธ์ที่ได้ รูปแบบแท็ก HTML <td rowspan=“จำนวนแถวที่ต้องการขยาย”> ตัวอย่างการขยายเซลล์เกิน 1 แถว <html> ผลลัพธ์ที่ได้ 8. การใส่สีในช่องเซลล์ รูปแบบแท็ก HTML bgcolor=“ชื่อสี/#รหัสสี” ตัวอย่างการใช้งาน <html> ผลลัพธ์ที่ได้ 9. การกำหนดสีกรอบตาราง รูปแบบแท็ก HTML bordercolor=“ชื่อสี/#รหัสสี” ตัวอย่างการใช้งาน <html> ผลลัพธ์ที่ได้ 10. การใส่รูปภาพพื้นหลังตาราง รูปแบบแท็ก HTML background=“ตำแหน่งรูปภาพ” ตัวอย่างการใช้งาน <html> ผลลัพธ์ที่ได้ 11. การจัดตำแหน่งตาราง แถว และคอลัมน์ รูปแบบแท็ก HTML <table align=“ตำแหน่งของข้อมูล” >, <tr align=”ตำแหน่งของข้อมูล”>, <td align=”ตำแหน่งของข้อมูล”> ตัวอย่างการจัดตำแหน่งข้อมูลแนวนอน <html> ผลลัพธ์ที่ได้ รูปแบบแท็ก HTML <td vlign=“ตำแหน่งของข้อมูล”> ตัวอย่างการจัดตำแหน่งข้อมูลแนวตั้ง <html> ผลลัพธ์ที่ได้ 12. การกำหนดการแสดงเส้นตาราง เป็นการกำหนดให้แสดงเส้นตารางบางด้านเพื่อความเหมาะสมสำหรับการแสดงข้อมูล เช่น ต้องการแสดงเส้นเฉพาะคอลัมน์ รูปแบบแท็ก HTML <table frame=“ตัวเลือก” rules=“ตัวเลือก”> ตัวเลือกของแอตทริบิวต์ frame ประกอบด้วย คำสั่งรายละเอียด คำสั่งรายละเอียดAboveแสดงเฉพาะด้านบนของช่องเซลล์Insแสดงเฉพาะด้านซ้ายของช่องเซลล์Belowแสดงเฉพาะด้านล่างของช่องเซลล์Rhsแสดงเฉพาะด้านขวาของช่องเซลล์Borderแสดงเส้นทุกด้านVoidไม่มีเส้นกรอบboxแสดงเส้นทุกด้านvsidesแสดงเส้นแนวตั้งทุกเส้นhsidesแสดงเส้นแนวนอนทุกเส้นตัวเลือกของแอตทริบิวต์ rules ประกอบด้วย คำสั่งรายละเอียดallแสดงเส้นแบ่งช่องเซลล์ทุกเส้นcolsแสดงเส้นแบ่งช่องเซลล์เฉพาะเส้นแนวคอลัมน์ (แนวตั้ง)groupsแสดงเฉพาะเส้นแบ่งกลุ่มเซลล์ที่เกิดจากแท็ก thead, tbody, tfoot หรือ colgroupnoneไม่แสดงเส้นแบ่งช่องเซลล์rowsแสดงเส้นแบ่งช่องเซลล์เฉพาะเส้นแนวแถว (แนวนอน)ตัวอย่างการเปิด/ปิดเส้นตาราง <html> ผลลัพธ์ที่ได้ 13. การสร้างตารางซ้อนตาราง <html> ผลลัพธ์ที่ได้ 14. การใส่รูปภาพในตาราง <html> 15. การกำหนดความกว้างของคอลัมน์ รูปแบบแท็ก HTML <colgroup span=“จำนวน” width=“ความกว้าง”>…</colgroup> ตัวอย่างการใช้งาน <html> ผลลัพธ์ที่ได้ 16. การกำหนดความกว้างแต่ละคอลัมน์ รูปแบบแท็ก <col span=“จำนวน” width=“ความกว้าง” /> <html> คำอธิบาย
17. การแบ่งเส้นตาราง <thead>, <tfoot>, <tbody> การแบ่งส่วนตาราง เราสามารถทำได้ 3 ส่วนคือ
โดยทั้งสามส่วนเราไม่ต้องเรียงลำดับกันก็ได้ เช่น อาจวางแท็ก tfoot มาก่อนแท็ก tbody ก็ได้ แต่ตอนแสดงผลบราวเซอร์จะจัดแท็ก tfoot ไว้ข้างล่างสุด ลักษณะของแท็กทั้ง 3 ประการจะเป็นดังนี้ รูปแบบแท็ก HTML <thead><tr><td>…</td></tr></thead> ตัวอย่างการใช้งาน <html> ผลลัพธ์ที่ได้ การแบ่งตารางเป็นส่วน ๆ ทำให้สามารถจัดรูปแบบ ตกแต่งตารางได้ง่าย โดยสามารถกำหนดรูปแบบตัวอักษร ขนาดตัวอักษร สีตัวอักษร สีพื้นหลัง ฯลฯ โดยจะทำให้ข้อมูลส่วนนั้นแสดงผลทั้งหมด อีกทั้งยังสามารถกำหนดรูปแบบการแสดงผลข้อมูลได้อย่างเหมาะสมอีกด้วย คำสั่ง เป็นคำสั่งในการกำหนดอะไรคำสั่งต่างๆที่ใช้ในการสร้างตาราง
</tr> ใช้ในการกำหนดจุดเริ่มต้นของแถว (Row) คำสั่ง <tr>.. </tr> หมายถึง 1แถว และภายใน <tr> นั้นก็ยังมีคำสั่งในการเริ่มคอลัมน์ดังต่อไปนี้อีกครับ <td>... </td> เป็นคำสั่งในการกำหนดค่าเริ่มต้นของคอลัมน์ นอกจากคำสั่ง <td> ก็ยังมีอีกคำสั่งซึ่งคล้ายกับ <td> คือ
คำสั่งใดเป็นการกำหนดการสร้างตาราง<table>... </table> เป็นคำสั่งเริ่มต้นที่ใช้ในการสร้างตาราง ซึ่งเป็นการกำหนดจุดเริ่มต้นและสิ้นสุดของตาราง
คำสั่ง และหมายถึงอะไรtd ย่อมาจาก table data ซึ่งจะเก็บข้อมูลของแต่ละเซลล์ โดยแต่ละเซลล์สามารถใส่ข้อความ, รูปภาพ, แบบฟอร์ม, รายการ หรือ ตารางอื่น ๆ ก็ได้ - แอตทริบิวต์ border ในแท็ก table คือส่วนที่ใช้กำหนดเส้นขอบตาราง โดยใส่เป็นค่าตัวเลข ในส่วนนี้อาจไม่กำหนดก็ได้ หากว่าเราต้องการให้ตารางไม่มีเส้นขอบ
คำสั่ง Bordercolor เป็นคำสั่งในการกำหนดอะไรคำสั่ง bordercolor เป็นคำสั่งกำหนดให้แสดงอะไรเกี่ยวกับตาราง สีของพื้นตาราง สีของเส้นขอบตาราง
|
กระทู้ที่เกี่ยวข้อง
