ตารางใน HTML: คู่มือขั้นตอนต่อขั้นตอน

ตาราง HTML เป็นชุดข้อมูลที่จัดแสดงในแถวและคอลัมน์ ใช้เอลิเมนต์ <table> สร้างตาราง ใช้ <tr> สร้างแถว <td> สร้างคอลัมน์ และ <th> สร้างหัวตาราง

ตารางนำเสนอข้อมูลให้เข้าใจง่ายด้วยแถวและคอลัมน์ เราพบตารางในชีวิตประจำวัน ตั้งแต่ตารางเวลารถบัส จนถึงตารางส่วนผสมอาหาร

ใน HTML ตารางใช้เพื่อนำเสนอข้อมูล บทช่วยสอนนี้จะอธิบายพื้นฐานตาราง HTML, เซลล์ที่ครอบหลายคอลัมน์/แถว, และการจัดสไตล์ตาราง จนคุณเชี่ยวชาญการสร้างและจัดการตาราง

การสร้างตาราง HTML

ตารางคือชุดข้อมูลในแถวและคอลัมน์ ช่วยเห็นความสัมพันธ์ของค่าในชุดข้อมูลได้ง่าย

ใน HTML ตารางถูกกำหนดโดยเอลิเมนต์ <table> ภายในใช้:

• <tr> สร้างแถว
• <td> สร้างคอลัมน์ (เซลล์ข้อมูล)
• <th> สร้างหัวตาราง

สมมติเราต้องการตารางรายการกาแฟและราคา 2 คอลัมน์ 3 แถว โค้ด:

<table> <tr> <th>Coffee</th> <th>Price</th> </tr> <tr> <td>Espresso</td> <td>$2.00</td> </tr> <tr> <td>Cappuccino</td> <td>$2.50</td> </tr> <tr> <td>Latte</td> <td>$2.75</td> </tr> </table>

ผลลัพธ์:

โค้ดสร้างตาราง 1 แถวหัว 2 คอลัมน์ 3 แถวข้อมูล ใช้ <table> เริ่มต้น <tr> สร้างแถว <th> หัวคอลัมน์ (Coffee, Price) แล้ว <tr> อีก 3 แถว แต่ละแถวมี <td> แทนเซลล์ข้อมูล เช่น Espresso และ $2.00

การจัดสไตล์ตาราง

มีหลายวิธีจัดสไตล์ตารางใน HTML

ขอบตาราง (Borders)

ตาราง HTML ไม่มีขอบโดยต้องใช้ CSS คุณสมบัติ border ใช้เพิ่มขอบ สมมติต้องการขอบสีดำทึบ:

table, th, td { border: 1px solid black; }

ตารางจะมีขอบรอบทุกเซลล์และตัวตารางเอง:

แต่ขอบแยกจากกัน หากต้องการรวมขอบเป็นขอบเดียว ใช้ border-collapse:

table { border-collapse: collapse }

ตารางใหม่:

ตอนนี้ตารางมีขอบเดียวแทนที่จะเป็นขอบแยก

จัดตำแหน่งหัวตาราง (Align Headings)

โดยค่าเริ่มต้นหัวตารางจัดกึ่งกลางเซลล์ หากต้องการจัดซ้าย/ขวา ใช้ text-align กับ <th>:

th { text-align: left; }

นำไปใช้กับตารางเดิม:

หัวคอลัมน์จัดชิดซ้าย ยังมีสไตล์อื่นมากมาย แต่บทความนี้เน้นขอบและขอบรวม

การครอบหลายแถวและคอลัมน์ (Spanning Multiple Rows and Columns)

เมื่อทำงานกับตาราง อาจต้องการให้เซลล์ครอบหลายแถวหรือคอลัมน์ ใช้แอตทริบิวต์ rowspan (ครอบหลายแถว) และ colspan (ครอบหลายคอลัมน์)

ตัวอย่าง ใช้ colspan ให้คอลัมน์ Price ครอบ 2 คอลัมน์:

<table> <tr> <th>Coffee</th> <th colspan="2">Price</th> </tr> <tr> <td>Espresso</td> <td>$2.00 (new)</td> <td>$2.00 (old)</td> </tr> </table>

ผลลัพธ์:

คอลัมน์ Price ครอบ 2 คอลัมน์ ใช้ rowspan แบบเดียวกันสำหรับแถว

สมมติตารางเก็บรายละเอียดกาแฟ ต้องการราคาปกติและราคาลด (วันสุดท้ายของเดือน) อยู่ภายใต้หัว Price เดียวกัน พร้อมฉลากแยก:

<table> <tr> <th>Coffee</th> <td>Espresso</td> </tr> <tr> <th rowspan="2">Price</th> <td>$2.00 (regular)</td> </tr> <tr> <td>$1.80 (discounted)</td> </tr> </table>

ผลลัพธ์:

เห็นว่าฉลาก Price ครอบ 2 แถว

การกำหนดส่วนหัว ส่วนเนื้อหา และส่วนท้ายของตาราง

มี 3 แท็กช่วยจัดโครงสร้างข้อมูล:

• <thead> กำหนดหัวตาราง
• <tbody> กำหนดเนื้อหาตาราง
• <tfoot> กำหนดท้ายตาราง

ใช้ตารางกาแฟตัวอย่าง แยกส่วนหัว ส่วนเนื้อหา ส่วนท้าย:

<table> <thead> <tr> <th>Coffee</th> <th>Price</th> </tr> </thead> <tbody> <tr> <td>Espresso</td> <td>$2.00</td> </tr> <tr> <td>Cappuccino</td> <td>$2.50</td> </tr> <tr> <td>Latte</td> <td>$2.75</td> </tr> </tbody> <tfoot> <tr> <th>Last Updated</th> <td>January 9th, 2020</td> </tr> </tfoot> </table>

<thead> แยกแถวหัวที่มี Coffee, Price <tbody> เก็บแถวข้อมูลหลัก (ราคากาแฟ) <tfoot> เก็บแถวบอกวันอัปเดตล่าสุด (ไม่ใช่รายการกาแฟ) แท็กเหล่านี้เป็นทางเลือกแต่ช่วยจัดโครงสร้างให้ดีขึ้น

คำอธิบายตาราง (Table Captions)

แท็ก <caption> ใช้เพิ่มหัวข้อ (caption) ให้ตาราง ต้องวางทันทีหลังแท็ก <table> เปิด ตัวอย่างเพิ่มหัวข้อ "Coffee Menu":

<table> <caption>Coffee Menu</caption> <tr> <th>Coffee</th> <th>Price</th> </tr> <tr> <td>Espresso</td> <td>$2.00</td> </tr> <tr> <td>Cappuccino</td> <td>$2.50</td> </tr> <tr> <td>Latte</td> <td>$2.75</td> </tr> </table>

ตารางแสดงดังนี้:

โค้ดใช้ <caption> เพิ่มหัวข้อ "Coffee Menu"

สรุป

ตารางสามารถเรียบง่ายหรือซับซ้อนได้ตามต้องการ บทความนี้ครอบคลุมพื้นฐานตาราง HTML ทั้งการสร้าง, จัดสไตล์, จัดโครงสร้าง, ครอบหลายแถว/คอลัมน์, และใช้ caption

ตอนนี้คุณมีความรู้พร้อมทำงานกับตาราง HTML อย่างมืออาชีพแล้ว!