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

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

<tbody> เป็นหนึ่งในแท็กที่ใช้ใน HTML5 เพื่อกำหนดกลุ่มของแถว (rows) ในตาราง <table> ใช้เพื่อจัดกลุ่มเนื้อหาที่เป็นแถวของข้อมูลในตาราง โดยปกติจะใช้ควบคู่กับ <thead> สำหรับหัวตาราง และ <tfoot> สำหรับท้ายตาราง

รูปแบบการใช้งาน <tbody>

โครงสร้างพื้นฐาน

โครงสร้างของ <tbody> จะถูกวางอยู่ภายในแท็ก <table> และควบคุมแถวของข้อมูลที่เป็นเนื้อหาหลักของตาราง

HTML
<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
        <tr>
            <td>Data 3</td>
            <td>Data 4</td>
        </tr>
    </tbody>
</table>

การใช้งานร่วมกับ <thead> และ <tfoot>

การใช้ <tbody> มักจะมีการใช้ร่วมกับ <thead> สำหรับหัวข้อของตาราง และ <tfoot> สำหรับข้อมูลในส่วนท้ายของตาราง

HTML
<table>
    <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Apple</td>
            <td>$1</td>
        </tr>
        <tr>
            <td>Banana</td>
            <td>$2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total</td>
            <td>$3</td>
        </tr>
    </tfoot>
</table>

การจัดการกับสไตล์ผ่าน CSS

<tbody> สามารถใช้งานร่วมกับ CSS เพื่อกำหนดสไตล์ให้กับแถวในส่วนของเนื้อหาหลักได้

HTML
<style>
    tbody tr:nth-child(even) {
        background-color: #f2f2f2;
    }
</style>

<table>
    <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Apple</td>
            <td>$1</td>
        </tr>
        <tr>
            <td>Banana</td>
            <td>$2</td>
        </tr>
        <tr>
            <td>Orange</td>
            <td>$3</td>
        </tr>
    </tbody>
</table>

การซ่อนหรือแสดง <tbody> โดยใช้ JavaScript

เราสามารถจัดการกับการซ่อนหรือแสดง <tbody> ผ่านการเขียน JavaScript ได้ เพื่อเพิ่มความยืดหยุ่นในหน้าเว็บ

HTML
<button onclick="toggleBody()">Toggle Table Body</button>

<table>
    <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody id="table-body">
        <tr>
            <td>Apple</td>
            <td>$1</td>
        </tr>
        <tr>
            <td>Banana</td>
            <td>$2</td>
        </tr>
    </tbody>
</table>

<script>
    function toggleBody() {
        var tbody = document.getElementById("table-body");
        if (tbody.style.display === "none") {
            tbody.style.display = "table-row-group";
        } else {
            tbody.style.display = "none";
        }
    }
</script>

สรุป

<tbody> ใช้เพื่อจัดกลุ่มแถวของข้อมูลในตาราง และช่วยให้การแยกส่วนของหัวตารางและท้ายตารางชัดเจนขึ้น ทำให้สามารถปรับแต่งทั้งในด้านการแสดงผลด้วย CSS และการจัดการผ่าน JavaScript ได้อย่างยืดหยุ่น

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

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