html

"การแทรกตาราง

ในการนำเสนอข้อมูลต่าง ๆ นั้น จะเห็นว่าการนำเสนอข้อมูลด้วยตาราง จะทำให้เกิดความเข้าใจได้ง่ายขึ้น สามารถเปรียบเทียบความแตกต่าง ๆ ของข้อมูลได้อย่างชัดเจน นอกจากประโยชน์ดังกล่าวในการสร้างเว็บเพจนั้น ตารางยังสามารถนำมาช่วยในการจัดรูปแบบของจอภาพบนเว็บเพจได้อีกด้วย เพื่อแบ่งแยกหน้าเว็บเพจออกเป็น ส่วน ๆ เกิดความเป็นระเบียบและความสวยงามมากขึ้น

ในการสร้างตารางนั้น ในเบื้องต้นต้องใช้คำสั่งหรือแท็กดังต่อไปนี้

<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">

border="1" หมายความว่าให้ตีเส้่นด้วยความหนาของเส้น 1 จุด (pixel) หากไม่ต้องการเส้นให้กำหนดค่าเป็น "0" หรือไม่ต้องใช้แอททริบิวต์นี้
bordercolor="ค่าสี" หมายถึงกำหนดสีเ้ส้นตาราง สามารถระบุค่าสี เช่น "blue" คือสีน้ำเงิน หรือใส่เป็นค่าตัวเลขฐานสิบหกก็ได้

cellspacing="5" หมายถึงระยะห่างระหว่างช่องเซลล์มีค่าเป็น 5 จุด (pixel)
cellpadding="10" หมายถึงระยะห่างระหว่างข้อมูลในเซลล์กับกรอบเซลล์มีค่าเป็น 10 จุด (pixel)

ตัวอย่างการใช้คำสั่ง

ผลลัพธ์

การกำหนดความกว้างความสูง

การกำหนดความกว้างและความสูงให้กับตารางโดยใช้แอททริบิวต์ width และ height ในแท็ก <table> ซึ่งสามารถกำหนดได้ 2 รูปแบบดังนี้

1.กำหนดเป็นเปอร์เซ็น ซึ่งจะปรับขนาดตารางตามขนาดหน้าจอของเบราว์เซอร์ในขณะนั้น

          <table width="50%" height="60%">

   2.กำหนดความกว้าง และความยาวเป็นจุด   (pixel)   ซึ่งขนาดตารางจะไม่ปรับตามขนาดหน้าจอของเบราว์เซอร์ในขณะแสดงผล วิธีนี้จะไม่ทำให้ตารางและข้อมูลในตารางขยับเปลี่ยนตำแหน่ง
           <table width="400" height="200">

ตัวอย่างการใช้คำสั่ง

ผลลัพธ์

การจัดตำแหน่งตาราง

ตารางสามารถจัดตำแหน่งให้อยู่ ชิดซ้าย ชิดขวา หรือตรงการเซลล์ได้ โดยการใช้ แอททริบิวต์ align="ตำแหน่งของตาราง"

"ตำแหน่งของตาราง" มีดังนี้
                    "center" หมายถึง อยู่ตรงกลางเซลล์
                    "left"     หมายถึง อยู่ชิดด้านซ้ายเซลล์
                    "right"   หมายถึง อยู่ชิดด้านขวาเซลล์

ตัวอย่างการใช้คำสั่ง