พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน th Tag

แท็ก <th> ใน HTML5 ใช้สำหรับระบุส่วนหัวของตาราง (Table Header) ซึ่งมักจะอยู่ในแท็ก <thead> ของตารางหรือใช้ร่วมกับแท็ก <tr> เพื่อกำหนดหัวข้อคอลัมน์หรือแถวในตาราง <table>

รูปแบบการใช้งานแท็ก <th>

กำหนดหัวของคอลัมน์: ใช้ <th> ภายใน <tr> เพื่อกำหนดหัวข้อของคอลัมน์ ดังตัวอย่าง

HTML
<table border="1">
    <tr>
        <th>Product</th>
        <th>Price</th>
        <th>Quantity</th>
    </tr>
    <tr>
        <td>Apple</td>
        <td>$1</td>
        <td>10</td>
    </tr>
</table>

ในตัวอย่างนี้ <th> ถูกใช้ใน <tr> แรกเพื่อกำหนดหัวของแต่ละคอลัมน์ในตาราง

กำหนดหัวของแถว: นอกจากการใช้งานในคอลัมน์แล้ว <th> สามารถใช้ในแถวเพื่อกำหนดหัวของแถวได้ด้วย ดังตัวอย่าง

HTML
<table border="1">
    <tr>
        <th>Type</th>
        <th>Apple</th>
        <th>Banana</th>
    </tr>
    <tr>
        <th>Price</th>
        <td>$1</td>
        <td>$0.5</td>
    </tr>
    <tr>
        <th>Quantity</th>
        <td>10</td>
        <td>20</td>
    </tr>
</table>

ในตัวอย่างนี้ <th> ใช้ในแถวแรกเป็นหัวของคอลัมน์ และในแถวที่สองและสามเพื่อระบุหัวของแถว

การจัดแนวข้อความ: ค่าเริ่มต้นของแท็ก <th> คือข้อความจะถูกทำให้เป็นตัวหนาและอยู่กึ่งกลางของเซลล์ แต่สามารถปรับการจัดวางตำแหน่งได้โดยใช้ CSS เช่น text-align หรือ vertical-align

HTML
<table border="1">
    <tr>
        <th style="text-align: left;">Product</th>
        <th style="text-align: right;">Price</th>
        <th style="text-align: center;">Quantity</th>
    </tr>
    <tr>
        <td>Apple</td>
        <td>$1</td>
        <td>10</td>
    </tr>
</table>

ในตัวอย่างนี้ได้กำหนดการจัดตำแหน่งของแต่ละหัวข้อคอลัมน์ด้วย CSS เพื่อให้อยู่ซ้าย ขวา และกึ่งกลาง

การรวมเซลล์ (colspan / rowspan): สามารถใช้คุณสมบัติ colspan หรือ rowspan กับ <th> เพื่อรวมเซลล์ในแนวนอนหรือแนวตั้งได้

การรวมคอลัมน์ (colspan)

HTML
<table border="1">
    <tr>
        <th colspan="2">Product Info</th>
        <th>Quantity</th>
    </tr>
    <tr>
        <td>Apple</td>
        <td>$1</td>
        <td>10</td>
    </tr>
</table>

ตัวอย่างนี้ใช้ colspan="2" เพื่อรวมเซลล์ของหัวข้อ “Product Info” เป็นสองคอลัมน์

การรวมแถว (rowspan)

HTML
<table border="1">
    <tr>
        <th rowspan="2">Product</th>
        <th>Price</th>
        <th>Quantity</th>
    </tr>
    <tr>
        <td>$1</td>
        <td>10</td>
    </tr>
</table>

ตัวอย่างนี้ใช้ rowspan="2" เพื่อรวมเซลล์ของหัวข้อ “Product” ครอบคลุมสองแถว

สรุป

แท็ก <th> มีความสำคัญในการกำหนดหัวของตารางใน HTML เพื่อให้ตารางมีความชัดเจนและใช้งานง่ายขึ้น เราสามารถใช้แท็ก <th> ร่วมกับ CSS เพื่อปรับการแสดงผลตามความต้องการ

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ