ทำความเข้าใจ HTML Table Tags

·

ในบทความนี้เราจะพาคุณไปรู้จักและเข้าใจการใช้งานแท็กต่าง ๆ ที่เกี่ยวข้องกับการสร้างตารางใน HTML

HTML Table Tags และการใช้งาน

  1. <table>: แท็กหลักสำหรับการสร้างตาราง ใช้เพื่อประกาศตารางใน HTML
    <table border="1">
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
    </table>
  1. <th>, <tr>, <td>: โครงสร้างพื้นฐานของตาราง
    • <tr>: กำหนดแถวของตาราง
    • <th>: กำหนดหัวข้อในแต่ละคอลัมน์
    • <td>: กำหนดข้อมูลในแต่ละเซลล์
    <table>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
        <tr>
            <td>Row 1 Data</td>
            <td>Row 1 Data</td>
        </tr>
    </table>
  1. <caption>: ใส่คำอธิบายตาราง ใช้เพิ่มคำอธิบายที่อ่านง่าย
    <table>
        <caption>Example Table</caption>
        <tr>
            <th>Column</th>
            <th>Data</th>
        </tr>
    </table>
  1. <colgroup> และ <col>: กำหนดคุณสมบัติของคอลัมน์ ใช้จัดการรูปแบบคอลัมน์ เช่น ความกว้างหรือการจัดตำแหน่ง
    <table>
        <colgroup>
            <col span="1" style="background-color: #f2f2f2;">
            <col span="1" style="background-color: #ffffff;">
        </colgroup>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
    </table>
  1. <thead>, <tbody>, <tfoot>: แบ่งส่วนเนื้อหาตาราง
    • <thead>: กำหนดหัวตาราง
    • <tbody>: แบ่งส่วนข้อมูลในตาราง
    • <tfoot>: กำหนดส่วนท้ายของตาราง
    <table>
        <thead>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="2">Footer Data</td>
            </tr>
        </tfoot>
    </table>

การเลือกใช้ HTML Table Tags ให้เหมาะสม

Tagจุดเด่นกรณีใช้งาน
<table>กำหนดโครงสร้างตารางใช้ทุกครั้งที่ต้องการสร้างตาราง
<th>กำหนดหัวข้อของคอลัมน์เมื่อมีการแสดงข้อมูลที่ต้องการหัวข้อ
<tr>สร้างแถวของตารางใช้กับทุกแถวในตาราง
<td>ใส่ข้อมูลในเซลล์ใช้สำหรับข้อมูลในแต่ละแถว
<caption>เพิ่มคำอธิบายให้ตารางใช้เมื่อมีความจำเป็นต้องอธิบายตาราง
<colgroup>กำหนดรูปแบบของกลุ่มคอลัมน์ใช้สำหรับปรับรูปแบบหลายคอลัมน์พร้อมกัน
<col>กำหนดรูปแบบของแต่ละคอลัมน์ใช้เมื่อต้องการปรับเฉพาะคอลัมน์ใดคอลัมน์หนึ่ง
<thead>แยกส่วนหัวของตารางใช้ในตารางที่มีหัวข้อแยกชัดเจน
<tbody>แยกส่วนเนื้อหาข้อมูลใช้สำหรับตารางที่มีข้อมูลหลายชุด
<tfoot>แยกส่วนท้ายของตารางใช้เมื่อมีข้อมูลท้ายตาราง

ตัวอย่างการนำไปใช้

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Table Tags Example</title>
</head>
<body>
    <h1>HTML Table Tags</h1>
    
    <table border="1">
        <caption>Example Table</caption>
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="2">Footer Information</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

สรุป

HTML Table Tags เป็นเครื่องมือที่ช่วยจัดการข้อมูลในรูปแบบตารางให้มีโครงสร้างที่ชัดเจนและอ่านง่าย

  • <table>: โครงสร้างหลักของตาราง
  • <thead>/<tbody>/<tfoot>: ช่วยแบ่งเนื้อหาให้เป็นส่วน ๆ
  • <colgroup>/<col>: ปรับรูปแบบคอลัมน์ได้ละเอียด