จัดการข้อมูลสวย ๆ ด้วยตาราง

ตารางทำให้การจัดการกับข้อมูลในเว็บไซต์ดูเป็นระเบียบมากยิ่งขึ้น มาดูตัวอย่างของการสร้างตารางกัน

<!DOCTYPE html>
<html>
<body>

<h2>ตารางสินค้า</h2>
<table border="1">
  <tr>
    <th>ลำดับ</th>
    <th>ชื่อสินค้า</th> 
    <th>ราคา</th>
  </tr>
  <tr>
    <td>1</td>
    <td>เสื้อยืด</td>
    <td>199</td>
  </tr>
  <tr>
    <td>2</td>
    <td>กางเกง</td>
    <td>1,200</td>
  </tr>
</table>

</body>
</html>

ดูผลลัพธ์

อธิบายเพิ่มเติม แท็กที่ใช้ในการสร้างตารางประกอบไปด้วย

<table></table> ต้องเปิดด้วยแท็กนี้ก่อนเสมอ เพื่อให้รู้ว่าจะมีการสร้างตาราง
<tr></tr> คือการสร้างแถวในตารางใหม่
<th></th> คือคอลัมน์ที่อยู่ในส่วนหัวตาราง (แถวแรกของตาราง)
<td></td> คือคอลัมน์ของตาราง

ส่วนแอททริบิวต์ border=”1″ คือกำหนดเส้นขอบให้ตาราง มีขนาดเท่ากับ 1

การผสานเซลล์ในตารางก็สามารถทำได้ มีอยู่ 2 แบบ คือผสานคอลัมน์ตาราง และผสานแถวตาราง โดยจะใช่แอททริบิวต์ colspan และ rolspan ดังตัวอย่าง

<td colspan=”2″ >ยอดรวม </td> คำสั่งนี้จะผสานคอลัมน์เข้าด้วยกัน 2 คอลัมน์

<td rolspan=”2″ >ยอดรวม </td> คำสั่งนี้จะผสานแถวเข้าด้วยกัน 2 แถว

เพื่อความเข้าใจมากยิ่งขึ้น ควรทดลองเปลี่ยนแปลงโค้ดแล้วแสดงผลดู