เครื่องมือสร้างตาราง HTML

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

<table>
  <caption>Q1 sales figures</caption>
  <thead>
    <tr>
      <th scope="col">Region</th>
      <th scope="col">Q1</th>
      <th scope="col">Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">EU</th>
      <td>$120k</td>
      <td>$145k</td>
    </tr>
  </tbody>
</table>

องค์ประกอบและบทบาทของแต่ละชนิด

รูปแบบที่ตอบสนองได้

• การเลื่อนแนวนอน: ให้ล้อมตารางด้วย <div style="overflow-x:auto"> เพื่อให้ช่องแสดงผลที่แคบสามารถเลื่อนได้โดยไม่ทำให้ลักษณะการจัดวางเปลี่ยนแปลง
• การจัดเรียงข้อมูลบนมือถือ: ใช้หัวข้อเดิมซ้ำตามแอตทริบิวต์ของ data-label และเปลี่ยนแถวให้อยู่ในรูปแบบการจัดวางแนวตั้งโดยใช้ CSS, เหมาะสำหรับชุดข้อมูลขนาดเล็ก
• การจัดเรียงแบบรีฟลูว์พร้อมกริด (Reflow with Grid): สามารถสร้างตารางที่ซับซ้อนขึ้นมาใหม่โดยใช้ CSS Grid ได้ แต่จะสูญเสียระบบนำทางผ่านคีย์บอร์ดตามตั้งแต่เดิม จึงเหมาะเฉพาะสำหรับแดชบอร์ดเท่านั้น

รายการตรวจสอบการเข้าถึง

• ทุก <th> มีแอตทริบิวต์ scope
• สำหรับเซลล์ที่ผสานกันซับซ้อน ให้ใช้ headers="..." เพื่อเชื่อมโยงเซลล์ข้อมูลเข้ากับรหัสหัวข้อ (header IDs)
• ใช้คำบรรยายสรุปวัตถุประสงค์ของตาราง
• อย่าใช้ตารางเพื่อจัดวางรูปแบบทางสายตา, ควรใช้ CSS Grid หรือ Flexbox แทน