วิธีใช้แท็ก HTML ภายในตาราง (Nested HTML in Table)

ใน HTML สามารถวางแท็ก HTML อื่นๆ ได้ภายในเซลล์ตาราง (<td> หรือ <th>) เช่น แท็กพารากราฟ <p> รายการ <ul>/<ol> หรือแม้แต่ตารางซ้อน (nested table)

กฎสำคัญ

• แท็กที่เปิดใน <td> ต้องปิดภายใน <td> เดียวกัน (ไม่ให้ข้ามเซลล์)
• สามารถใส่ block-level elements ได้ใน <td> (HTML5 อนุญาต)
• หลีกเลี่ยงการใส่ <tr>, <thead> ฯลฯ ภายในเซลล์

ตัวอย่าง: ใส่รายการ ul ในเซลล์

<!DOCTYPE html>
<html>
<head>
  <style>
    table, th, td { border: 1px solid black; width: 400px; }
  </style>
</head>
<body>
  <h1>Total Points</h1>
  <table>
    <tr>
      <th>Technologies</th>
      <th>Points</th>
    </tr>
    <tr>
      <td>
        Programming Languages
        <ul>
          <li>C++</li>
          <li>Java</li>
          <li>C</li>
        </ul>
      </td>
      <td>100</td>
    </tr>
    <tr>
      <td>
        Database
        <ul>
          <li>MySQL</li>
          <li>Oracle</li>
          <li>CouchDB</li>
        </ul>
      </td>
      <td>50</td>
    </tr>
  </table>
</body>
</html>

กรณีใช้งานทั่วไป

• รายละเอียดสินค้าในตารางราคา
• เมนูนำทาง (navigation) ใน sidebar table layout
• ฟอร์มภายในตาราง (legacy layout)