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

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

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

<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>

<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>

<caption>: ใส่คำอธิบายตาราง ใช้เพิ่มคำอธิบายที่อ่านง่าย

    <table>
        <caption>Example Table</caption>
        <tr>
            <th>Column</th>
            <th>Data</th>
        </tr>
    </table>

<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>

<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>: ปรับรูปแบบคอลัมน์ได้ละเอียด