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

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

ใน HTML5 แท็ก <td> ใช้ในการสร้าง “เซลล์ข้อมูล” (data cell) ภายในตาราง (table) โดยอยู่ภายในแท็ก <tr> (table row) เพื่อกำหนดแต่ละเซลล์ในแถวของตาราง <table>

การใช้งานพื้นฐานของ <td>

HTML
<table border="1">
  <tr>
    <td>ข้อมูล 1</td>
    <td>ข้อมูล 2</td>
    <td>ข้อมูล 3</td>
  </tr>
  <tr>
    <td>ข้อมูล 4</td>
    <td>ข้อมูล 5</td>
    <td>ข้อมูล 6</td>
  </tr>
</table>
  • <table>: สร้างตาราง
  • <tr>: สร้างแถวในตาราง
  • <td>: สร้างเซลล์ในแต่ละแถว

การประยุกต์ใช้งานเพิ่มเติม

การรวมเซลล์ (colspan)

  • ใช้ colspan เพื่อลดจำนวนเซลล์ในแถวเดียวกัน โดยการรวมเซลล์เข้าด้วยกัน
HTML
<table border="1">
  <tr>
    <td colspan="2">เซลล์รวม 2 คอลัมน์</td>
    <td>ข้อมูล 3</td>
  </tr>
  <tr>
    <td>ข้อมูล 4</td>
    <td>ข้อมูล 5</td>
    <td>ข้อมูล 6</td>
  </tr>
</table>

ผลลัพธ์: เซลล์แรกของแถวแรกจะรวม 2 คอลัมน์

การรวมเซลล์ในแนวตั้ง (rowspan)

  • ใช้ rowspan เพื่อรวมเซลล์ในหลายแถวในแนวตั้ง
HTML
<table border="1">
  <tr>
    <td rowspan="2">เซลล์รวม 2 แถว</td>
    <td>ข้อมูล 2</td>
    <td>ข้อมูล 3</td>
  </tr>
  <tr>
    <td>ข้อมูล 4</td>
    <td>ข้อมูล 5</td>
  </tr>
</table>

ผลลัพธ์: เซลล์แรกจะครอบคลุม 2 แถวในแนวตั้ง

การจัดวางเนื้อหาใน <td>

  • เราสามารถใช้ CSS หรือแอตทริบิวต์ของ HTML เพื่อจัดการเนื้อหาภายในเซลล์ เช่น การจัดวางในแนวนอน (align), แนวตั้ง (valign)
HTML
<table border="1">
  <tr>
    <td align="center">จัดกึ่งกลาง</td>
    <td valign="top">จัดชิดบน</td>
    <td valign="bottom">จัดชิดล่าง</td>
  </tr>
</table>

การจัดการสไตล์ด้วย CSS

นอกจากการใช้แอตทริบิวต์แบบ inline เราสามารถใช้ CSS เพื่อจัดการรูปแบบเซลล์ได้

HTML
<style>
  table {
    border-collapse: collapse;
  }
  td {
    border: 1px solid black;
    padding: 10px;
  }
  .highlight {
    background-color: yellow;
  }
</style>

<table>
  <tr>
    <td class="highlight">เซลล์ไฮไลท์</td>
    <td>ข้อมูล 2</td>
  </tr>
</table>

ในตัวอย่างนี้ใช้ CSS เพื่อสร้างเส้นขอบและการไฮไลท์สีเซลล์

สรุป

  • <td> ใช้สร้างเซลล์ข้อมูลในตาราง
  • สามารถใช้ colspan และ rowspan เพื่อรวมเซลล์ในแนวนอนและแนวตั้ง
  • สามารถใช้แอตทริบิวต์จัดวางเนื้อหา หรือใช้ CSS เพื่อจัดการสไตล์เพิ่มเติม
Tags
แชร์เรื่องนี้

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