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

HTML5 การสร้างและใช้งานตาราง

ใน HTML5 การใช้งาน Table (ตาราง) เป็นการจัดข้อมูลให้อยู่ในรูปแบบแถวและคอลัมน์ เหมาะสำหรับการแสดงข้อมูลที่เป็นโครงสร้าง เช่น รายการสินค้า ตารางสรุปข้อมูล หรือผลลัพธ์จากการคำนวณ ข้อดีของตารางคือสามารถจัดการข้อมูลให้อยู่ในระเบียบ และทำให้การอ่านเข้าใจง่ายขึ้น

โครงสร้างของ Table ใน HTML

ตารางใน HTML จะมีแท็กหลัก ๆ ดังนี้:

  • <table>: ใช้เพื่อกำหนดเริ่มต้นและสิ้นสุดตาราง
  • <tr> (Table Row): ใช้สร้างแถวในตาราง
  • <th> (Table Header): ใช้สร้างหัวข้อของตาราง โดยค่าใน <th> จะถูกจัดให้เป็นตัวหนาและจัดให้อยู่กึ่งกลาง
  • <td> (Table Data): ใช้สร้างช่องข้อมูลในตาราง

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

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>
  • ตารางมีแถวหนึ่งเป็นหัวข้อ ได้แก่ ชื่อ, อายุ และเพศ (ใช้ <th>)
  • ข้อมูลจริงอยู่ใน <td> ของแถวต่อ ๆ ไป
ชื่อ อายุ เพศ
สมชาย 30 ชาย
สมหญิง 25 หญิง

คุณสมบัติเสริมของ Table

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

  • Colspan: ใช้เพื่อรวมคอลัมน์หลายช่องให้เป็นช่องเดียว
  • Rowspan: ใช้เพื่อรวมแถวหลายแถวให้เป็นช่องเดียว

ตัวอย่าง

HTML
<table border="1">
    <tr>
        <th>ชื่อ</th>
        <th colspan="2">ข้อมูลติดต่อ</th>
    </tr>
    <tr>
        <td>สมชาย</td>
        <td>อีเมล</td>
        <td>โทรศัพท์</td>
    </tr>
    <tr>
        <td rowspan="2">สมหญิง</td>
        <td>สมหญิง@example.com</td>
        <td>081-1234567</td>
    </tr>
    <tr>
        <td>สมหญิง_เพิ่มเติม@example.com</td>
        <td>091-9876543</td>
    </tr>
</table>
  • ใช้ colspan="2" ในหัวข้อ “ข้อมูลติดต่อ” เพื่อรวมคอลัมน์ 2 คอลัมน์เข้าด้วยกัน
  • ใช้ rowspan="2" เพื่อรวมแถว 2 แถวในช่องข้อมูลของ “สมหญิง”
ชื่อ ข้อมูลติดต่อ
สมชาย อีเมล โทรศัพท์
สมหญิง สมหญิง@example.com 081-1234567
สมหญิง_เพิ่มเติม@example.com 091-9876543

การจัดตำแหน่งข้อมูลใน Table

สามารถใช้ CSS เพื่อจัดตำแหน่งข้อมูลในตารางได้ ตัวอย่างเช่นการจัดกึ่งกลาง จัดซ้าย หรือขวา รวมถึงการปรับขนาดตาราง

HTML
<table border="1" style="width: 100%; text-align: center;">
    <tr>
        <th style="background-color: lightgray;">ชื่อ</th>
        <th>อายุ</th>
        <th>เพศ</th>
    </tr>
    <tr>
        <td>สมชาย</td>
        <td>30</td>
        <td>ชาย</td>
    </tr>
</table>
  • ใช้ style="width: 100%; text-align: center;" เพื่อให้ตารางมีขนาดเต็มหน้าจอและจัดข้อมูลให้อยู่กึ่งกลาง
  • ใช้ background-color: lightgray; เพื่อปรับสีพื้นหลังของหัวข้อ
ชื่อ อายุ เพศ
สมชาย 30 ชาย

การประยุกต์ใช้ Table

การใช้งาน Table สามารถประยุกต์ได้หลากหลาย เช่น:

  • ตารางแสดงข้อมูลสินค้าหรือรายการราคา
  • ตารางสรุปผลข้อมูลในรายงานต่าง ๆ
  • ตารางเปรียบเทียบคุณสมบัติสินค้า

ตัวอย่างเพิ่มเติม

HTML
<h2>รายการสินค้า</h2>
<table border="1" style="width: 100%;">
    <tr>
        <th>สินค้า</th>
        <th>ราคา</th>
        <th>จำนวน</th>
    </tr>
    <tr>
        <td>โทรศัพท์มือถือ</td>
        <td>10,000 บาท</td>
        <td>2 เครื่อง</td>
    </tr>
    <tr>
        <td>คอมพิวเตอร์</td>
        <td>25,000 บาท</td>
        <td>1 เครื่อง</td>
    </tr>
</table>

รายการสินค้า

สินค้า ราคา จำนวน
โทรศัพท์มือถือ 10,000 บาท 2 เครื่อง
คอมพิวเตอร์ 25,000 บาท 1 เครื่อง

สรุป

Table ใน HTML5 เป็นเครื่องมือที่มีประโยชน์ในการจัดข้อมูลที่ซับซ้อนให้อยู่ในรูปแบบที่เป็นระเบียบ โดยสามารถปรับแต่งให้เข้ากับความต้องการใช้งานได้หลากหลาย ทั้งในแง่ของการจัดตำแหน่ง การรวมเซลล์ และการจัดรูปแบบเพื่อให้ตารางดูน่าอ่านและสวยงามขึ้น

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

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