การสร้าง Body ของตารางด้วย HTML

### การสร้าง Body ของตารางด้วย HTML

เมื่อเราสร้างตารางใน HTML เรามักจะต้องการแบ่งส่วนต่างๆ ของตารางให้ชัดเจนเพื่อให้การจัดการข้อมูลเป็นระเบียบมากขึ้น ในการนี้เราใช้ `<tbody>` เพื่อระบุองค์ประกอบของ Body ของตาราง โดย `<tbody>` จะทำหน้าที่เป็นส่วนนั้นโดยเฉพาะซึ่งเรียงลำดับข้อมูลในรูปแบบแถว ๆ หนึ่ง

#### โครงสร้างของตาราง HTML

ในการออกแบบตารางด้วย HTML จะมีโครงสร้างพื้นฐานดังนี้:

```html

<table>

<thead>

<tr>

<th>หัวข้อ 1</th>

<th>หัวข้อ 2</th>

<th>หัวข้อ 3</th>

</tr>

</thead>

<tbody>

<tr>

<td>ข้อมูล 1</td>

<td>ข้อมูล 2</td>

<td>ข้อมูล 3</td>

</tr>

<tr>

<td>ข้อมูล 4</td>

<td>ข้อมูล 5</td>

<td>ข้อมูล 6</td>

</tr>

<tr>

<td>ข้อมูล 7</td>

<td>ข้อมูล 8</td>

<td>ข้อมูล 9</td>

</tr>

</tbody>

</table>

```

ในโค้ดข้างต้น:

- `<table>`: ใช้เพื่อเริ่มต้นการสร้างตาราง

- `<thead>`: ใช้เพื่อระบุส่วนหัวของตาราง ซึ่งจะบรรจุ `<tr>` (row) และ `<th>` (header cell)

- `<tbody>`: คือส่วนที่บรรจุข้อมูลหลักที่เราต้องการแสดงในตาราง โดยใช้ `<tr>` เพื่อสร้างแถวและ `<td>` เพื่อแสดงข้อมูลในเซลล์

#### ประโยชน์ของการใช้ `<tbody>`

1. **การจัดระเบียบ**: การใช้ `<tbody>` ช่วยให้ล็อตข้อมูลที่เหมือนกันหรือมีความเกี่ยวข้องกันถูกจัดกลุ่มเข้าด้วยกัน ทำให้สามารถอ่านและทำความเข้าใจได้ง่ายขึ้น

2. **การจัด styling และ scripting**: เราสามารถกำหนด CSS หรือ Javascript ให้มีผลเฉพาะกับ `<tbody>` ได้ ช่วยให้สามารถควบคุมการออกแบบและพฤติกรรมของตารางได้อย่างยืดหยุ่น

3. **การรองรับข้อมูลที่มีขนาดใหญ่**: ในกรณีที่มีข้อมูลมากมาย ช่วยให้การจัดการข้อมูลในตารางทำได้ง่ายขึ้น นอกจากนี้ในบางการใช้ JavaScript จะช่วยให้สามารถจัดการกันระหว่างข้อมูลใน `<thead>` และ `<tbody>` ได้

โดยสรุป การใช้ `<tbody>` ในการสร้างตาราง HTML ช่วยให้การจัดการและแสดงข้อมูลในรูปแบบตารางมีความชัดเจนและสะดวกมากยิ่งขึ้น ทำให้ผู้ใช้สามารถเข้าถึงข้อมูลได้ง่ายดายและมีความเข้าใจในข้อมูลที่นำเสนอมากขึ้น

แสดงความคิดเห็น

ใหม่กว่า เก่ากว่า
Python Game Programming Book