Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

วิธีแสดงส่วนเนื้อหาตาราง (Table Body) ใน HTML

ใช้แท็ก <tbody> ใน HTML เพื่อแสดงส่วนเนื้อหาตาราง (table body) แท็กนี้ใช้ร่วมกับ <thead> (หัวตาราง) และ <tfoot> (ท้ายตาราง) เพื่อแบ่งส่วนตารางให้ชัดเจน

แอตทริบิวต์ของ <tbody> (เลิกใช้งานแล้ว)

แอตทริบิวต์ ค่า คำอธิบาย
align right, left, center, justify, char Deprecated - การจัดตำแหน่งแนวนอน
char Character Deprecated - ระบุตัวอักษรสำหรับจัดตำแหน่ง ใช้เมื่อ align="char"
charoff pixels หรือ % Deprecated - ระบุออฟเซ็ตการจัดตำแหน่ง ใช้เมื่อ align="char"
valign top, middle, bottom, baseline Deprecated - การจัดตำแหน่งแนวตั้ง

หมายเหตุ: แอตทริบิวต์เหล่านี้ถูก Deprecated ใน HTML5 ควรใช้ CSS แทน

ตัวอย่าง

คุณสามารถลองรันโค้ดต่อไปนี้เพื่อแสดงส่วนเนื้อหาตารางใน HTML:

<!DOCTYPE html> 
<html> 
  <head> 
    <title>HTML tbody Tag</title> 
  </head> 
  <body> 
    <table style="width:100%" border="1"> 
      <thead> 
        <tr> 
          <td colspan="4">หัวตาราง</td> 
        </tr> 
      </thead> 
      <tfoot> 
        <tr> 
          <td colspan="4">ท้ายตาราง</td> 
        </tr> 
      </tfoot> 
      <tbody> 
        <tr> 
          <td>เซลล์ 1</td> 
          <td>เซลล์ 2</td> 
          <td>เซลล์ 3</td> 
          <td>เซลล์ 4</td> 
        </tr> 
        <tr> 
          <td>เซลล์ 5</td> 
          <td>เซลล์ 6</td> 
          <td>เซลล์ 7</td> 
          <td>เซลล์ 8</td> 
        </tr> 
      </tbody> 
      <tbody> 
        <tr> 
          <td>เซลล์ 9</td> 
          <td>เซลล์ 10</td> 
          <td>เซลล์ 11</td> 
          <td>เซลล์ 12</td> 
        </tr> 
      </tbody> 
    </table> 
  </body> 
</html>

การใช้ <tbody> ช่วยให้จัดกลุ่มแถวข้อมูลได้หลายกลุ่ม และรองรับการจัดรูปแบบด้วย CSS ได้ง่ายขึ้น