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

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

แท็ก <table> ใน HTML5 ใช้ในการสร้างตารางข้อมูลในหน้าเว็บ โดยมีองค์ประกอบหลักต่างๆ ที่ใช้ร่วมกันเพื่อจัดระเบียบข้อมูลในรูปแบบแถวและคอลัมน์ ตารางใน HTML ประกอบด้วยองค์ประกอบพื้นฐานต่อไปนี้

องค์ประกอบหลักของแท็ก <table>

  1. <table>: เป็นแท็กหลักที่ครอบคลุมทุกส่วนของตาราง
  2. <tr> (Table Row): ใช้ในการกำหนดแถวของตาราง
  3. <th> (Table Header): ใช้กำหนดหัวข้อของคอลัมน์ในแถว ส่วนนี้มักจะถูกจัดให้อยู่ตรงกลางและเป็นตัวหนาโดยอัตโนมัติ
  4. <td> (Table Data): ใช้กำหนดข้อมูลในแต่ละเซลล์

ตัวอย่างการใช้งานพื้นฐาน

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>28</td>
    <td>เชียงใหม่</td>
  </tr>
</table>
  • <th> ใช้ในส่วนหัวของคอลัมน์ (ชื่อ, อายุ, ที่อยู่)
  • <tr> ใช้ในการแบ่งแถว (เช่น แถวของสมชายและสมศรี)
  • <td> ใช้ใส่ข้อมูลในแต่ละเซลล์ (ชื่อ, อายุ, และที่อยู่ของสมชายและสมศรี)

การใช้งานที่ซับซ้อนมากขึ้น

การรวมแถว (rowspan) และการรวมคอลัมน์ (colspan)

สามารถใช้ rowspan เพื่อรวมแถวหลายๆ แถวเข้าด้วยกัน และใช้ colspan เพื่อรวมคอลัมน์หลายๆ คอลัมน์เข้าด้วยกันได้

HTML
<table border="1">
  <tr>
    <th rowspan="2">ชื่อ</th>
    <th colspan="2">รายละเอียด</th>
  </tr>
  <tr>
    <th>อายุ</th>
    <th>ที่อยู่</th>
  </tr>
  <tr>
    <td>สมชาย</td>
    <td>30</td>
    <td>กรุงเทพฯ</td>
  </tr>
  <tr>
    <td>สมศรี</td>
    <td>28</td>
    <td>เชียงใหม่</td>
  </tr>
</table>
  • rowspan="2" ทำให้เซลล์ในคอลัมน์ “ชื่อ” ครอบคลุมแถวที่ 1 และ 2
  • colspan="2" ทำให้เซลล์ “รายละเอียด” ครอบคลุมคอลัมน์ “อายุ” และ “ที่อยู่”

การกำหนดส่วนหัว ตาราง เนื้อหา และส่วนท้าย แท็ก <thead>, <tbody>, และ <tfoot> ใช้ในการกำหนดส่วนต่างๆ ของตารางเพื่อแยกเป็นหัวเรื่อง เนื้อหา และท้ายเรื่อง

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>28</td>
      <td>เชียงใหม่</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">ข้อมูลนี้เป็นข้อมูลสมมติ</td>
    </tr>
  </tfoot>
</table>
  • <thead> ใช้กำหนดส่วนหัวของตาราง
  • <tbody> ใช้กำหนดเนื้อหาหลักของตาราง
  • <tfoot> ใช้สำหรับกำหนดส่วนท้ายของตาราง

การตกแต่งตารางด้วย CSS

เราสามารถปรับแต่งรูปแบบตารางโดยใช้ CSS เช่น การจัดตำแหน่งตัวอักษร การกำหนดสีพื้นหลัง และการเพิ่มพื้นที่ว่างในเซลล์

HTML
<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }

  th, td {
    padding: 10px;
    text-align: left;
    border: 1px solid #ddd;
  }

  th {
    background-color: #f2f2f2;
  }

  tr:nth-child(even) {
    background-color: #f9f9f9;
  }
</style>

<table>
  <thead>
    <tr>
      <th>ชื่อ</th>
      <th>อายุ</th>
      <th>ที่อยู่</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>สมชาย</td>
      <td>30</td>
      <td>กรุงเทพฯ</td>
    </tr>
    <tr>
      <td>สมศรี</td>
      <td>28</td>
      <td>เชียงใหม่</td>
    </tr>
  </tbody>
</table>
  • border-collapse: collapse; ทำให้เส้นกรอบของเซลล์อยู่ติดกัน
  • nth-child(even) ใช้ในการกำหนดสีพื้นหลังของแถวที่เป็นเลขคู่

สรุป:

การใช้งานแท็ก <table> ใน HTML5 สามารถปรับใช้ได้หลายรูปแบบตามความต้องการของผู้ใช้งาน ตั้งแต่การแสดงข้อมูลที่ง่ายไปจนถึงการสร้างตารางที่มีการจัดโครงสร้างซับซ้อน

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

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