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

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

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

พื้นฐานการใช้งานแท็ก <tr>

HTML
<table border="1">
  <tr>
    <th>ชื่อ</th>
    <th>อายุ</th>
    <th>อาชีพ</th>
  </tr>
  <tr>
    <td>สมชาย</td>
    <td>30</td>
    <td>วิศวกร</td>
  </tr>
  <tr>
    <td>สมหญิง</td>
    <td>25</td>
    <td>นักออกแบบ</td>
  </tr>
</table>

ในตัวอย่างนี้

  • <tr> ใช้เพื่อกำหนดแถวของตาราง
  • <th> ใช้สำหรับเซลล์หัวข้อ
  • <td> ใช้สำหรับเซลล์ข้อมูลทั่วไป

การใช้งาน <tr> ในการจัดกลุ่มข้อมูล

เราสามารถใช้แท็ก <tr> เพื่อสร้างแถวที่จัดกลุ่มข้อมูลเข้าด้วยกัน เช่น การจัดกลุ่มแถวหัวข้อและข้อมูลไว้คนละกลุ่ม

HTML
<table border="1">
  <thead>
    <tr>
      <th>ชื่อ</th>
      <th>อายุ</th>
      <th>อาชีพ</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>สมชาย</td>
      <td>30</td>
      <td>วิศวกร</td>
    </tr>
    <tr>
      <td>สมหญิง</td>
      <td>25</td>
      <td>นักออกแบบ</td>
    </tr>
  </tbody>
</table>

ในตัวอย่างนี้

  • ใช้แท็ก <thead> เพื่อแยกส่วนหัวของตารางออกจากข้อมูลหลัก
  • ใช้ <tbody> เพื่อจัดกลุ่มข้อมูลของตาราง

การปรับแต่งแถวด้วย CSS

สามารถใช้ CSS เพื่อปรับแต่งแถวในตารางเพื่อเพิ่มความสวยงามได้ เช่น การเปลี่ยนสีของแถว หรือการใส่เงื่อนไขการแสดงผล

HTML
<table border="1">
  <tr style="background-color: #f2f2f2;">
    <th>ชื่อ</th>
    <th>อายุ</th>
    <th>อาชีพ</th>
  </tr>
  <tr>
    <td>สมชาย</td>
    <td>30</td>
    <td>วิศวกร</td>
  </tr>
  <tr style="background-color: #e6f7ff;">
    <td>สมหญิง</td>
    <td>25</td>
    <td>นักออกแบบ</td>
  </tr>
</table>

ในตัวอย่างนี้ เราใช้คุณสมบัติ style เพื่อเปลี่ยนสีพื้นหลังของแถว

การรวมเซลล์ (Colspan และ Rowspan)

ในบางครั้งเราจำเป็นต้องรวมเซลล์ในแถวเดียวกันหรือแถวต่างๆ เราสามารถใช้คุณสมบัติ colspan และ rowspan กับแท็ก <td> หรือ <th> เพื่อรวมเซลล์ได้

HTML
<table border="1">
  <tr>
    <th>ชื่อ</th>
    <th>รายละเอียด</th>
  </tr>
  <tr>
    <td rowspan="2">สมชาย</td>
    <td>อายุ: 30</td>
  </tr>
  <tr>
    <td>อาชีพ: วิศวกร</td>
  </tr>
  <tr>
    <td colspan="2">หมายเหตุ: ข้อมูลเพิ่มเติม</td>
  </tr>
</table>
  • rowspan="2" ใช้เพื่อรวมเซลล์ข้อมูลที่อยู่ในแถวเดียวกัน (แถวสมชาย)
  • colspan="2" ใช้เพื่อรวมเซลล์ในแนวนอน (แถวหมายเหตุ)

สรุป

แท็ก <tr> เป็นเครื่องมือสำคัญในการสร้างแถวในตาราง และสามารถปรับแต่งการแสดงผลหรือโครงสร้างของตารางได้หลากหลายผ่านการใช้ CSS, <thead>, <tbody>, และคุณสมบัติ colspan และ rowspan

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

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