"การแทรกตาราง
ในการนำเสนอข้อมูลต่าง ๆ นั้น จะเห็นว่าการนำเสนอข้อมูลด้วยตาราง จะทำให้เกิดความเข้าใจได้ง่ายขึ้น สามารถเปรียบเทียบความแตกต่าง ๆ ของข้อมูลได้อย่างชัดเจน นอกจากประโยชน์ดังกล่าวในการสร้างเว็บเพจนั้น ตารางยังสามารถนำมาช่วยในการจัดรูปแบบของจอภาพบนเว็บเพจได้อีกด้วย เพื่อแบ่งแยกหน้าเว็บเพจออกเป็น ส่วน ๆ เกิดความเป็นระเบียบและความสวยงามมากขึ้น
ในการสร้างตารางนั้น ในเบื้องต้นต้องใช้คำสั่งหรือแท็กดังต่อไปนี้
<table>...</table> เป็นการบอกจุดเิ่ริ่มต้นและจุดสิ้นสุดในการสร้างตาราง
<tr>....</tr> เป็นการบอกจำนวนแถว (row)
<td>...</td> เป็นการบอกจำนวนคอลัมน์ (colunm)
ตัวอย่างการใช้คำสั่ง
ผลลัพธ์
จากตัวอย่างจะเห็นว่าไม่ปรากฎเส้นตารางขึ้นมาบนหน้าเว็บเพจ หากต้องการให้มีเส้นตาราง ต้องมีการใช้คุณสมบัติหรือแอททริบิวต์ border ช่วย ซึ่งจะต้องเขียนไว้ในแท็ก <table> ดังนี้
<table border="1">
นอกจากความหนาของเส้นตารางแล้ว ยังมีแอททริบิวต์ที่กำหนดสีของเส้นตาราง bordercolor ความห่างของช่องเซล์ cellspacing และการเว้นระยะ ระหว่างข้อมูลในเซลล์ กับกรอบเซลล์ cellpadding โดยใช้แอททริบิวต์ดังต่อไปนี้ bordercolor,cellspacing และ cellpadding เขียนต่อท้่ายในแท็ก <table> ดังนี้
<table border="1" bordercolor="blue" cellspacing="5" cellpadding="10">
<table border="1">
นอกจากความหนาของเส้นตารางแล้ว ยังมีแอททริบิวต์ที่กำหนดสีของเส้นตาราง bordercolor ความห่างของช่องเซล์ cellspacing และการเว้นระยะ ระหว่างข้อมูลในเซลล์ กับกรอบเซลล์ cellpadding โดยใช้แอททริบิวต์ดังต่อไปนี้ bordercolor,cellspacing และ cellpadding เขียนต่อท้่ายในแท็ก <table> ดังนี้
<table border="1" bordercolor="blue" cellspacing="5" cellpadding="10">
border="1" หมายความว่าให้ตีเส้่นด้วยความหนาของเส้น 1 จุด (pixel) หากไม่ต้องการเส้นให้กำหนดค่าเป็น "0" หรือไม่ต้องใช้แอททริบิวต์นี้
bordercolor="ค่าสี" หมายถึงกำหนดสีเ้ส้นตาราง สามารถระบุค่าสี เช่น "blue" คือสีน้ำเงิน หรือใส่เป็นค่าตัวเลขฐานสิบหกก็ได้
bordercolor="ค่าสี" หมายถึงกำหนดสีเ้ส้นตาราง สามารถระบุค่าสี เช่น "blue" คือสีน้ำเงิน หรือใส่เป็นค่าตัวเลขฐานสิบหกก็ได้
cellspacing="5" หมายถึงระยะห่างระหว่างช่องเซลล์มีค่าเป็น 5 จุด (pixel)
cellpadding="10" หมายถึงระยะห่างระหว่างข้อมูลในเซลล์กับกรอบเซลล์มีค่าเป็น 10 จุด (pixel)
cellpadding="10" หมายถึงระยะห่างระหว่างข้อมูลในเซลล์กับกรอบเซลล์มีค่าเป็น 10 จุด (pixel)
ตัวอย่างการใช้คำสั่ง
ผลลัพธ์
การกำหนดความกว้างความสูง
การกำหนดความกว้างและความสูงให้กับตารางโดยใช้แอททริบิวต์ width และ height ในแท็ก <table> ซึ่งสามารถกำหนดได้ 2 รูปแบบดังนี้
1.กำหนดเป็นเปอร์เซ็น ซึ่งจะปรับขนาดตารางตามขนาดหน้าจอของเบราว์เซอร์ในขณะนั้น
1.กำหนดเป็นเปอร์เซ็น ซึ่งจะปรับขนาดตารางตามขนาดหน้าจอของเบราว์เซอร์ในขณะนั้น
<table width="50%" height="60%">
2.กำหนดความกว้าง และความยาวเป็นจุด (pixel) ซึ่งขนาดตารางจะไม่ปรับตามขนาดหน้าจอของเบราว์เซอร์ในขณะแสดงผล วิธีนี้จะไม่ทำให้ตารางและข้อมูลในตารางขยับเปลี่ยนตำแหน่ง
<table width="400" height="200">
2.กำหนดความกว้าง และความยาวเป็นจุด (pixel) ซึ่งขนาดตารางจะไม่ปรับตามขนาดหน้าจอของเบราว์เซอร์ในขณะแสดงผล วิธีนี้จะไม่ทำให้ตารางและข้อมูลในตารางขยับเปลี่ยนตำแหน่ง
<table width="400" height="200">
ตัวอย่างการใช้คำสั่ง
ผลลัพธ์
การจัดตำแหน่งตาราง
ตารางสามารถจัดตำแหน่งให้อยู่ ชิดซ้าย ชิดขวา หรือตรงการเซลล์ได้ โดยการใช้ แอททริบิวต์ align="ตำแหน่งของตาราง"
"ตำแหน่งของตาราง" มีดังนี้
"center" หมายถึง อยู่ตรงกลางเซลล์
"left" หมายถึง อยู่ชิดด้านซ้ายเซลล์
"right" หมายถึง อยู่ชิดด้านขวาเซลล์
"center" หมายถึง อยู่ตรงกลางเซลล์
"left" หมายถึง อยู่ชิดด้านซ้ายเซลล์
"right" หมายถึง อยู่ชิดด้านขวาเซลล์
ตัวอย่างการใช้คำสั่ง
ผลลัพธ์
การรวมเซลล์
colspan="x" [การผสานคอลัมน์โดยที่ x เป็นจำนวนคอลัมน์ที่ต้องการรวม]
ตัวอย่างการใช้คำสั่ง
ผลลัพธ์
rowspan="x" [การผสานแถวโดยที่ x เป็นจำนวนแถวที่ต้องการรวม]
ตัวอย่างการใช้คำสั่ง
ผลลัพธ์
วันที่ 2 กันยายน 2555
