ตาราง (Tables)

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

โครงสร้างพื้นฐานของตาราง

โครงสร้างพื้นฐานของตารางใน HTML ประกอบด้วยแท็กหลักๆ ดังนี้:

<table>: แท็กหลักที่กำหนดขอบเขตของตารางทั้งหมด
<tr>: แท็กที่กำหนดแถว (Table Row) ของตาราง
<td>: แท็กที่กำหนดเซลล์ข้อมูล (Table Data) ในแต่ละแถว
<th>: แท็กที่กำหนดเซลล์หัวตาราง (Table Header) มักใช้สำหรับชื่อคอลัมน์

ตัวอย่างโครงสร้างตารางอย่างง่าย:

<table>
  <tr>
    <th>ชื่อ</th>
    <th>อายุ</th>
  </tr>
  <tr>
    <td>สมชาย</td>
    <td>25</td>
  </tr>
  <tr>
    <td>สมหญิง</td>
    <td>30</tdgt;
  </tr>
</table>

โค้ดด้านบนจะสร้างตารางที่มีสองคอลัมน์ (ชื่อและอายุ) และสองแถวของข้อมูล โดย <th> ใช้สำหรับส่วนหัวของตาราง

ผลลัพธ์ที่ได้ (โดยยังไม่มีการกำหนดรูปแบบเพิ่มเติม) จะคล้ายกับ:

ชื่อ	อายุ
สมชาย	25
สมหญิง	30

การกำหนด Border ให้กับตาราง

โดยปกติแล้ว ตารางที่สร้างขึ้นใน HTML จะไม่มีเส้นขอบ (border) การกำหนดเส้นขอบให้กับตารางสามารถทำได้โดยใช้ CSS (Cascading Style Sheets) แต่ใน HTML4 เราสามารถใช้แอตทริบิวต์ border ในแท็ก <table> ได้

ตัวอย่างการกำหนด border โดยใช้แอตทริบิวต์ border:

<table border="1">
  <tr>
    <th>ชื่อ</th>
    <th>อายุ</th>
  </tr>
  <tr>
    <td>สมชาย</td>
    <td>25</td>
  </tr>
  <tr>
    <td>สมหญิง</td>
    <td>30</td>
  </tr>
</table>

การกำหนด border="1" จะทำให้ตารางมีเส้นขอบขนาด 1 พิกเซล

คำแนะนำ: แม้ว่าแอตทริบิวต์ border จะใช้งานได้ แต่ขอแนะนำให้ใช้ CSS ในการกำหนดรูปแบบของตาราง รวมถึงเส้นขอบด้วย วิธีนี้จะทำให้โค้ด HTML ของคุณสะอาดและเป็นระเบียบมากขึ้น

ตัวอย่างการกำหนด border โดยใช้ CSS:

<style>
  table, th, td {
    border: 1px solid black;
    border-collapse: collapse; /* ทำให้เส้นขอบของเซลล์และตารางเป็นเส้นเดียวกัน */
  }
</style>

<table>
  <tr>
    <th>ชื่อ</th>
    <th>อายุ</th>
  </tr>
  <tr>
    <td>สมชาย</td>
    <td>25</td>
  </tr>
  <tr>
    <td>สมหญิง</td>
    <td>30</td>
  </tr>
</table>

ในตัวอย่างนี้ เราใช้ CSS เพื่อกำหนดเส้นขอบให้กับ <table>, <th> และ <td> และใช้ border-collapse: collapse; เพื่อรวมเส้นขอบของเซลล์และตารางให้เป็นเส้นเดียวกัน ทำให้ตารางดูสวยงามและอ่านง่ายขึ้น

การรวมเซลล์ (Colspan และ Rowspan)

บางครั้ง เราอาจต้องการรวมเซลล์ในตาราง เพื่อให้ข้อมูลบางอย่างครอบคลุมหลายคอลัมน์หรือหลายแถว เราสามารถทำได้โดยใช้แอตทริบิวต์ colspan (Column Span) และ rowspan (Row Span) ในแท็ก <th> หรือ <td>

colspan: กำหนดจำนวนคอลัมน์ที่เซลล์นั้นจะครอบคลุม
rowspan: กำหนดจำนวนแถวที่เซลล์นั้นจะครอบคลุม

ตัวอย่างการใช้ colspan:

<table border="1">
  <tr>
    <th colspan="2">ข้อมูลส่วนตัว</th>
  </tr>
  <tr>
    <th>ชื่อ</th>
    <th>อายุ</th>
  </tr>
  <tr>
    <td>สมชาย</td>
    <td>25</td>
  </tr>
</table>

ในตัวอย่างนี้ <th colspan="2">ข้อมูลส่วนตัว</th> จะทำให้เซลล์ "ข้อมูลส่วนตัว" ครอบคลุมสองคอลัมน์

ตัวอย่างการใช้ rowspan:

<table border="1">
  <tr>
    <th rowspan="2">ข้อมูล</th>
    <th>ชื่อ</th>
  </tr>
  <tr>
    <td>สมชาย</td>
  </tr>
</table>

ในตัวอย่างนี้ <th rowspan="2">ข้อมูล</th> จะทำให้เซลล์ "ข้อมูล" ครอบคลุมสองแถว

ข้อควรระวัง: การใช้ colspan และ rowspan มากเกินไป อาจทำให้โครงสร้างตารางซับซ้อนและยากต่อการแก้ไข ควรใช้เท่าที่จำเป็นและวางแผนโครงสร้างตารางให้ดีก่อน

สรุป

ในบทนี้ เราได้เรียนรู้พื้นฐานการสร้างตารางใน HTML โดยใช้แท็ก <table>, <tr>, <td> และ <th> รวมถึงการกำหนดเส้นขอบให้กับตาราง และการรวมเซลล์โดยใช้ colspan และ rowspan ตารางเป็นเครื่องมือที่มีประสิทธิภาพในการนำเสนอข้อมูลที่มีโครงสร้าง และเป็นพื้นฐานสำคัญในการสร้างเว็บไซต์ที่ใช้งานง่ายและเป็นระเบียบ

ในบทถัดไป เราจะมาเรียนรู้เกี่ยวกับการสร้างฟอร์ม (Forms) ใน HTML ซึ่งเป็นส่วนสำคัญในการรับข้อมูลจากผู้ใช้