การเเทรกตาราง

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

ในการสร้างตารางนั้นจะมี Tag ต่าง ๆ ที่ใช้สำหรับสร้างตารางในภาษา html ดังนี้

1. การสร้างตาราง  <table> </table>
2. การสร้างแถวภายในตาราง  <tr> </tr> แท็กนี้ต้องอยู่ภายในแท็ก <table> </table>
3. การสร้างคอลัมน์ภายในแถวแต่ละแถว <td> </td> แท็กนี้ต้องอยู่ภายในแท็ก <tr> </tr>

 <table>...........</table>
เป็นคำสั่งที่กำหนดให้โปรแกรมเบราว์เซอร์สร้างตาราง

<tr>............</tr>
เป็นคำสั่งที่ใช้กำหนดแถว (row)

<th>...........</th>
เป็นคำสั่งที่ใช้ในการกำหนดข้อมูลส่วนหัวของตาราง

<td>...........</td>
เป็นคำสั่งที่ใช้ในการกำหนดข้อมูลในแต่ละแถว

 

การปรับความกว้าง

คำสั่ง WIDTH ใช้กำหนดความกว้างของตารางทั้งหมด  มีหน่วยเป็น Pixel หรือ เปอร์เซ็นต์ก็ได้

การปรับความสูง

คำสั่ง HEIGHT  ใช้กำหนดความสูงของตารางทั้งหมด มีหน่วยเป็น Pixel หรือ เปอร์เซ็นต์ก็ได้

 ตัวอย่างโค้ด

 ผลที่เเสดง

การจัดวางตาราง

LEFT - จัดตารางชิดซ้าย (ค่าปกติ) ของจอภาพ
RIGHT - จัดตารางชิดขวาของจอภาพ
CENTER - จัดตารางไว้กึ่งกลางของจอภาพ  

ตัวอย่างโค้้ด

ผลที่เเสดง

คำสั่ง Colspan และ Rowspan

คำสั่ง <TD  COLSPAN> เป็นคำสั่งในการรวมคอลัมน์เข้าด้วยกัน ตามค่าของจำนวนคอลัมน์ที่กำหนดไว้ รูปแบบคำสั่ง      <TD  COLSPAN = "Number"> โดยที่

• COLSPAN คือ แอตทริบิวต์ที่ใช้ในการกำหนดการรวมคอลัมน์
• Numberคือ ค่าตัวเลขที่ใช้ในการรวมคอลัมน์เข้าเป็นคอลัมน์เดี่ยวกัน

คำสั่ง <TD  ROWSPAN> เป็นคำสั่งในการรวมแถวเข้าด้วยกัน ตามค่าของจำนวนแถวที่กำหนดไว้
รูปแบบคำสั่ง     <TD  ROWSPAN = "Number">

โดยที่ 

• ROWSPAN คือ แอตทริบิวต์ที่ใช้ในการกำหนดการรวมแถว
• Number คือ ค่าตัวเลขที่ใช้ในการรวมแถวเข้าเป็นแถวเดียวกัน

 ตัวอย่างโค้ด

 ผลที่เเสดง

ที่มา
https://sites.google.com/site/cirayus/sux-kar-reiyn-ru/kar-srang-tarang
http://www.thainextstep.com/html/html_08.php
http://www.aw.ac.th/web_html/011.htm