รับซื้อ Tablet

HTML Table คืออะไร?

HTML Table คือโครงสร้าง HTML สำหรับนำเสนอข้อมูลประเภทตาราง หรือ Tabular Data ซึ่งข้อมูลแต่ละรายการมีความสัมพันธ์กันผ่านแถวและคอลัมน์

ลองนึกถึง Excel หรือ Google Sheets ที่ข้อมูลแบ่งออกเป็นช่อง ๆ แต่ละแถวมีความหมาย และแต่ละคอลัมน์มีหัวข้อกำกับ HTML Table ก็มีแนวคิดในลักษณะเดียวกัน เพียงแต่ถูกออกแบบเพื่อแสดงข้อมูลบนหน้าเว็บไซต์

ตัวอย่างข้อมูลที่เหมาะกับ Table เช่น

• ตารางราคาสินค้าและบริการ
• ตารางสเปกคอมพิวเตอร์หรืออุปกรณ์ IT
• ตารางเปรียบเทียบ Package
• ตารางเวลาเรียนหรือเวลาทำงาน
• รายชื่อพนักงาน
• รายงานยอดขาย
• รายการ Invoice
• ข้อมูล Stock สินค้า
• ผลการแข่งขันหรือคะแนน
• ตารางค่าใช้จ่าย
• รายงาน Server / Network / Monitoring

โครงสร้างและสเปคของ HTML Table

องค์ประกอบหลักของ Table เริ่มจากแท็ก <table> ซึ่งทำหน้าที่ครอบข้อมูลตารางทั้งหมด จากนั้นภายในจะประกอบด้วย Element อื่น ๆ เพื่อระบุส่วนหัว ส่วนข้อมูล แถว และเซลล์อย่างชัดเจน

DOM Interface

ใน JavaScript ตัว <table> เชื่อมโยงกับ DOM Interface ที่ชื่อ HTMLTableElement ทำให้นักพัฒนาสามารถจัดการแถวหรือส่วนประกอบของ Table ผ่าน JavaScript ได้ เช่น เพิ่มแถว ลบแถว หรือเข้าถึง rows และ tBodies

Browser Support

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

อย่างไรก็ตาม สิ่งที่ต้องพิจารณาในเว็บไซต์สมัยใหม่ไม่ใช่เพียงว่า Browser แสดง Table ได้หรือไม่ แต่ต้องดูเรื่อง Responsive, Accessibility, UX และ Performance เพิ่มเติมด้วย

ตัวอย่าง HTML Table พื้นฐาน

สมมติว่าเราต้องการสร้างตารางเปรียบเทียบแพ็กเกจ IT Support สามารถเขียนได้ดังนี้

<table>
  <caption>แพ็กเกจ IT Support</caption>

  <thead>
    <tr>
      <th scope="col">Package</th>
      <th scope="col">จำนวนเครื่อง</th>
      <th scope="col">Remote Support</th>
      <th scope="col">On-site Support</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">Starter</th>
      <td>1-10 เครื่อง</td>
      <td>รองรับ</td>
      <td>ตามเงื่อนไข</td>
    </tr>

    <tr>
      <th scope="row">Business</th>
      <td>11-50 เครื่อง</td>
      <td>รองรับ</td>
      <td>รองรับ</td>
    </tr>
  </tbody>
</table>

โครงสร้างแบบนี้มีข้อดีคือ Browser, Search Engine และเทคโนโลยีช่วยเหลือผู้ใช้งาน สามารถเข้าใจได้ว่าข้อมูลใดคือหัวตาราง และข้อมูลใดคือรายละเอียดของแต่ละรายการ

รู้จัก Element สำคัญของ Table ให้มากขึ้น

1. <table>

เป็น Container หลักของตาราง สิ่งสำคัญคือควรใช้เมื่อเนื้อหานั้นเป็นข้อมูลแบบตารางจริง ๆ ไม่ใช่ใช้เพราะต้องการให้ Element สองตัววางอยู่ข้างกัน

2. <caption>

ใช้ระบุชื่อหรือวัตถุประสงค์ของตาราง เช่น “ตารางเปรียบเทียบแพ็กเกจ IT Outsource” หรือ “รายงานค่าใช้จ่ายประจำเดือน”

Caption มีประโยชน์มากกว่าแค่เรื่องหน้าตา เพราะช่วยให้ผู้ใช้งานทราบทันทีว่าตารางนี้เกี่ยวกับอะไร รวมถึงช่วยผู้ใช้ Screen Reader ตัดสินใจว่าจะอ่านรายละเอียดของตารางต่อหรือไม่

3. <thead>

ใช้รวมแถวที่เป็นหัวตาราง เช่น ชื่อสินค้า ราคา ระยะเวลารับประกัน หรือสถานะ

4. <tbody>

ใช้ครอบข้อมูลหลักของตาราง แม้ Browser สามารถสร้าง <tbody> ใน DOM ให้ในบางกรณี แต่การเขียนอย่างชัดเจนทำให้โครงสร้างโค้ดอ่านง่าย และสะดวกต่อการจัด Style หรือ Manipulate ด้วย JavaScript

5. <tfoot>

เหมาะสำหรับข้อมูลสรุปท้ายตาราง เช่น ยอดรวม จำนวนรายการ ค่าเฉลี่ย หรือสรุปผล

6. <th> กับ <td> ต่างกันอย่างไร?

<th> หมายถึง Header Cell ส่วน <td> หมายถึง Data Cell

อย่าเลือกใช้ <th> เพียงเพราะ Browser แสดงตัวหนา เพราะความหมายทาง Semantic สำคัญกว่าหน้าตา หากต้องการให้ข้อความตัวหนา ควรจัดการผ่าน CSS แทน

7. rowspan และ colspan

สอง Attribute นี้ใช้รวมเซลล์หลายแถวหรือหลายคอลัมน์เข้าด้วยกัน

<th colspan="2">ข้อมูลการติดต่อ</th>

<td rowspan="2">สำนักงานใหญ่</td>

แม้จะมีประโยชน์กับตารางซับซ้อน แต่ไม่ควรใช้มากจนเกินไป เพราะ Table ที่ซับซ้อนมากจะอ่านยากทั้งสำหรับผู้ใช้งานทั่วไปและผู้ใช้ Assistive Technology

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

Table ที่ไม่ได้เขียน CSS มักมีหน้าตาค่อนข้างธรรมดา แต่เราสามารถปรับให้อ่านง่ายขึ้นได้ด้วย CSS ไม่กี่บรรทัด

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td {
  padding: 12px 16px;
  border: 1px solid #ddd;
  text-align: left;
}

.table th {
  background: #f5f5f5;
  font-weight: 600;
}

.table tbody tr:nth-child(even) {
  background: #fafafa;
}

border-collapse คืออะไร?

Property border-collapse: collapse; ช่วยให้เส้น Border ของ Cell ที่ติดกันรวมเป็นเส้นเดียว ทำให้ตารางดูสะอาดขึ้น

เพิ่ม Zebra Striping

การทำสีพื้นหลังสลับแถวช่วยให้ผู้อ่านติดตามข้อมูลตามแนวนอนได้ง่ายขึ้น โดยเฉพาะตารางที่มีข้อมูลจำนวนมาก

tbody tr:nth-child(even) {
  background-color: #f8fafc;
}

Hover Row

tbody tr:hover {
  background-color: #eef6ff;
}

เทคนิคนี้เหมาะกับรายงานหรือระบบหลังบ้านที่มีข้อมูลหลายคอลัมน์ เพราะช่วยให้ผู้ใช้งานรู้ว่ากำลังอ่านแถวไหน

Responsive Table: ทำอย่างไรให้ Table ใช้งานบนมือถือได้ดี?

หนึ่งในปัญหาใหญ่ที่สุดของ HTML Table คือข้อมูลอาจมีหลายคอลัมน์มากกว่าความกว้างของหน้าจอ Smartphone

หากปล่อยไว้โดยไม่จัดการ ตารางอาจล้นออกนอกหน้าจอ ทำให้ Layout เว็บไซต์เสียหรืออ่านข้อความได้ลำบาก

วิธีที่ 1: Horizontal Scroll

วิธีนี้เป็นแนวทางที่ง่าย เสถียร และรักษาความสัมพันธ์ระหว่างแถวกับคอลัมน์ได้ดี

<div class="table-responsive">
  <table>
    ...
  </table>
</div>

.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive table {
  min-width: 700px;
}

วิธีที่ 2: ซ่อนคอลัมน์ที่ไม่สำคัญ

หากข้อมูลบางคอลัมน์ไม่จำเป็นบน Mobile สามารถใช้ Media Query ซ่อนได้

@media (max-width: 600px) {
  .optional-column {
    display: none;
  }
}

อย่างไรก็ตามต้องระวังไม่ซ่อนข้อมูลสำคัญ และควรพิจารณาว่าผู้ใช้ Mobile ยังสามารถเข้าถึงข้อมูลนั้นด้วยวิธีอื่นได้หรือไม่

วิธีที่ 3: เปลี่ยน Table เป็น Card บน Mobile

อีกเทคนิคหนึ่งคือแสดงข้อมูลแต่ละ Row เป็น Card เมื่อหน้าจอเล็ก เหมาะกับข้อมูลประเภทสมาชิก รายการสินค้า หรือ Order

ข้อเสียคือความสามารถในการเปรียบเทียบข้อมูลระหว่างหลาย Row จะลดลง จึงไม่เหมาะกับ Table ทุกประเภท

ควรเลือก Responsive Table แบบไหน?

เทคนิค HTML Table สำหรับงานจริง

1. ใช้ Sticky Header กับตารางยาว

เมื่อ Table มีหลายสิบหรือหลายร้อยแถว ผู้ใช้อาจเลื่อนจนไม่เห็นหัวคอลัมน์ Sticky Header ช่วยให้ Header ติดอยู่ด้านบน

thead th {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
}

2. จัดตัวเลขชิดขวา

ข้อมูลตัวเลข เช่น ราคา ยอดเงิน เปอร์เซ็นต์ หรือจำนวน มักอ่านและเปรียบเทียบได้ง่ายกว่าเมื่อจัดชิดขวา

.number {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

3. ใช้ table-layout: fixed เมื่อเหมาะสม

table {
  width: 100%;
  table-layout: fixed;
}

เมื่อใช้ table-layout: fixed Browser สามารถกำหนด Layout โดยอิงความกว้างของ Table และ Column มากกว่าต้องพึ่งเนื้อหาทุก Cell

เหมาะกับ Table ที่ต้องการควบคุมความกว้างคอลัมน์อย่างชัดเจน แต่ต้องจัดการข้อความยาวด้วย

td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

4. อย่าใส่ข้อมูลมากเกินความจำเป็น

Table ที่ดีไม่ใช่ Table ที่แสดงทุกอย่างพร้อมกัน แต่คือ Table ที่ช่วยให้ผู้ใช้ค้นหาข้อมูลที่ต้องการได้เร็ว

หากข้อมูลจำนวนมาก ควรพิจารณาเพิ่ม

• Search
• Filter
• Sort
• Pagination
• Column Visibility
• Export CSV / Excel

5. ใช้ Formatting ให้สม่ำเสมอ

ตัวอย่างเช่น ถ้าคอลัมน์ราคาใช้รูปแบบ “฿10,000” ก็ควรใช้ Format เดียวกันทั้งคอลัมน์ ไม่ควรมีบางแถวเป็น “10000 บาท” และบางแถวเป็น “10K”

6. ใช้ข้อความแทนสีเพียงอย่างเดียว

สมมติ Table แสดงสถานะ Server: ไม่ควรใช้เพียงจุดสีเขียวและสีแดงเท่านั้น ควรมีข้อความประกอบ เช่น “Online” และ “Offline” เพื่อให้ผู้ใช้ทุกกลุ่มเข้าใจได้

7. เพิ่ม Sorting เฉพาะเมื่อมีประโยชน์

ตารางเล็ก 5 แถวอาจไม่จำเป็นต้องมี Sorting แต่ถ้ามีข้อมูลหลายสิบหรือหลายร้อยแถว การ Sort ตามชื่อ ราคา วันที่ หรือสถานะสามารถเพิ่ม UX ได้มาก

HTML Table กับ Accessibility เรื่องที่ไม่ควรมองข้าม

ข้อดีสำคัญของ HTML Table คือมี Semantic ที่ Browser และเทคโนโลยีช่วยเหลือสามารถเข้าใจได้ แต่ต้องเขียนโครงสร้างให้ถูกต้อง

ใช้ <caption> อธิบาย Table

<table>
  <caption>รายงานค่าใช้จ่ายด้าน IT ประจำปี</caption>
  ...
</table>

Caption ช่วยบอกวัตถุประสงค์ของ Table ก่อนที่ผู้ใช้จะเริ่มอ่าน Cell ต่าง ๆ

ใช้ th สำหรับ Header

อย่าเขียน Header ด้วย <td> แล้วทำตัวหนาด้วย CSS เพราะทาง Semantic แล้วมันยังเป็น Data Cell

ใช้ scope

<th scope="col">ชื่อพนักงาน</th>
<th scope="col">แผนก</th>
<th scope="col">อีเมล</th>

และกรณี Header ของ Row:

<th scope="row">Server-01</th>

scope="col" บอกว่า Header นี้เป็นหัวของคอลัมน์ ส่วน scope="row" บอกว่าเป็นหัวของแถว

หลีกเลี่ยง Table ซับซ้อนโดยไม่จำเป็น

การใช้ rowspan และ colspan จำนวนมาก อาจทำให้ความสัมพันธ์ Header และ Data ซับซ้อนตามไปด้วย

หาก Table เริ่มซับซ้อนมาก บางครั้งการแบ่งออกเป็นหลาย Table ที่มีความหมายชัดเจนอาจให้ UX ที่ดีกว่า

จุดเด่นและจุดด้อยของ HTML Table

เปรียบเทียบ HTML Table vs CSS Grid vs Flexbox

หนึ่งในคำถามที่นักพัฒนาเว็บมือใหม่ถามกันบ่อยคือ “ทำไมไม่ใช้ Grid หรือ Flexbox แทน Table ไปเลย?”

คำตอบคือทั้งสามอย่างมีวัตถุประสงค์ต่างกัน

Table vs CSS Grid

CSS Grid ถูกออกแบบมาเพื่อจัด Layout สองมิติที่มี Row และ Column เช่นเดียวกัน แต่ความเหมือนตรงนี้ไม่ได้หมายความว่าสามารถใช้แทน Table ในทุกกรณี

ถ้าข้อมูลมีความหมายเชิงตาราง เช่น “ชื่อสินค้า / ราคา / Stock / วันที่” ควรใช้ Table

แต่ถ้าเป็นโครงสร้างหน้าจอ เช่น “Sidebar / Main Content / Widget” CSS Grid เหมาะกว่า

Table vs Flexbox

Flexbox เหมาะกับการจัด Element ตามแกนเดียวเป็นหลัก เช่น Navigation, Toolbar, Button Group หรือ Card Row

ไม่ควรพยายามใช้ Flexbox จำลอง Table ขนาดใหญ่ หากข้อมูลมีความสัมพันธ์ระหว่าง Row และ Column จริง ๆ เพราะนอกจาก CSS จะซับซ้อนแล้ว ยังสูญเสีย Semantic ของ Table อีกด้วย

Table vs Card

Card มีข้อดีเรื่อง Mobile และการนำเสนอข้อมูลเป็นรายการ แต่มีข้อเสียเมื่อต้องเปรียบเทียบหลายข้อมูลพร้อมกัน

ตัวอย่างเช่น การเปรียบเทียบ CPU, RAM, SSD และราคา ของ Notebook 10 รุ่น การใช้ Table ทำให้กวาดสายตาเทียบแต่ละคอลัมน์ได้เร็วกว่า Card

HTML Table เหมาะกับงานประเภทไหน?

1. ตารางเปรียบเทียบสินค้า

เหมาะกับเว็บไซต์ E-commerce หรือเว็บไซต์ Review ที่ต้องการเปรียบเทียบสเปก ราคา หรือ Feature

2. ตารางราคา

เช่น ราคาบริการ IT, ค่าแรง, Package, Hosting หรือ Maintenance

3. ระบบหลังบ้าน

Admin Dashboard มักใช้ Table จำนวนมาก เช่น

• รายการ User
• รายการ Order
• รายการ Ticket
• Asset Management
• Inventory
• Log Management
• Monitoring

4. รายงานทางธุรกิจ

ข้อมูล Revenue, Cost, Profit, KPI หรือ Performance เหมาะกับ Table เนื่องจากต้องมีการเทียบระหว่างช่วงเวลาและหมวดหมู่

5. ตารางข้อมูล IT Infrastructure

ตัวอย่างเช่น

ข้อผิดพลาดที่พบบ่อยในการใช้ HTML Table

1. ใช้ Table ทำ Layout หน้าเว็บ

ในอดีตนักพัฒนาเว็บเคยใช้ Table สร้างโครงสร้างเว็บไซต์ เช่น Header, Sidebar และ Content แต่แนวทางนี้ไม่เหมาะกับเว็บไซต์ยุคใหม่

ควรใช้ CSS Grid หรือ Flexbox สำหรับ Layout และเก็บ Table ไว้สำหรับข้อมูลประเภทตาราง

2. ใช้ td เป็น Header

<!-- ไม่แนะนำ -->
<tr>
  <td><strong>ชื่อ</strong></td>
  <td><strong>ราคา</strong></td>
</tr>

ควรเป็น

<tr>
  <th scope="col">ชื่อ</th>
  <th scope="col">ราคา</th>
</tr>

3. ไม่วางแผน Mobile

Table ที่ดูดีบน Monitor ขนาด 27 นิ้ว อาจใช้งานแทบไม่ได้เมื่อเปิดบน Smartphone

จึงควรทดสอบอย่างน้อยในช่วงความกว้างหลัก ๆ เช่น Desktop, Tablet และ Mobile

4. ใช้ Font Size เล็กเกินไปเพื่อบังคับให้ Table พอดีจอ

การลด Font จาก 16px เหลือ 9px ไม่ใช่ Responsive Design เพราะแม้ Table จะพอดี แต่ผู้ใช้อ่านข้อมูลลำบาก

หาก Table กว้างเกินไป การ Scroll แนวนอนมักเป็นวิธีที่เหมาะสมกว่า

5. Table มีข้อมูลหลายร้อยแถวโดยไม่มี Search

หาก User ต้องกด Ctrl+F เพื่อหาข้อมูลทุกครั้ง อาจเป็นสัญญาณว่าระบบควรมี Search หรือ Filter

6. ใช้สีมากเกินไป

Table ที่ทุก Column มีคนละสี ทุก Status มี Background และทุก Row มี Highlight มักทำให้ Cognitive Load สูงขึ้น

ใช้สีเฉพาะเพื่อสื่อความหมายที่สำคัญจะดีกว่า

HTML Table กับ Performance

สำหรับ Table ขนาดเล็กถึงระดับทั่วไป ปัญหา Performance มักไม่ใช่สิ่งที่ต้องกังวลมาก แต่เมื่อข้อมูลเพิ่มเป็นหลักพันหรือหลักหมื่น Row การ Render DOM จำนวนมากสามารถส่งผลต่อประสบการณ์ผู้ใช้ได้

Pagination

แทนที่จะแสดงข้อมูล 10,000 รายการพร้อมกัน สามารถแบ่งเป็นหน้า เช่น หน้าละ 25, 50 หรือ 100 รายการ

Server-side Pagination

ระบบขนาดใหญ่ไม่ควรโหลดข้อมูลทั้งหมดจาก Database แล้วค่อยแบ่งหน้าใน Browser เสมอไป

สามารถให้ Server หรือ API ส่งเฉพาะข้อมูลหน้าที่ผู้ใช้กำลังดู ช่วยลด Network Payload และจำนวน DOM Node ได้

Virtualization

สำหรับ Data Grid ขนาดใหญ่มาก อาจใช้เทคนิค Virtualization ซึ่ง Render เฉพาะ Row ที่อยู่ใน Viewport หรือใกล้กับพื้นที่ที่ผู้ใช้กำลังเห็น

เทคนิคนี้เหมาะกับ Web Application ที่ต้องจัดการข้อมูลมหาศาล แต่เพิ่มความซับซ้อนในการพัฒนา จึงไม่จำเป็นสำหรับ Table ทั่วไป

ตัวอย่าง Responsive Table ที่นำไปใช้ได้ทันที

<div class="responsive-table">
  <table class="data-table">
    <caption>Server Inventory</caption>

    <thead>
      <tr>
        <th scope="col">Hostname</th>
        <th scope="col">IP Address</th>
        <th scope="col">OS</th>
        <th scope="col">CPU</th>
        <th scope="col">RAM</th>
        <th scope="col">Status</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <th scope="row">WEB-01</th>
        <td>192.168.1.10</td>
        <td>Ubuntu Server</td>
        <td>4 Core</td>
        <td>8 GB</td>
        <td>Online</td>
      </tr>

      <tr>
        <th scope="row">DB-01</th>
        <td>192.168.1.20</td>
        <td>Ubuntu Server</td>
        <td>8 Core</td>
        <td>32 GB</td>
        <td>Online</td>
      </tr>
    </tbody>
  </table>
</div>

CSS:

.responsive-table {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.data-table {
  width: 100%;
  min-width: 750px;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
}

.data-table thead th {
  background: #f8fafc;
  position: sticky;
  top: 0;
}

.data-table tbody tr:hover {
  background: #f8fafc;
}

แนวทางเลือกใช้ Table สำหรับนักพัฒนาเว็บ

ก่อนสร้าง Table ลองถามตัวเอง 5 คำถามต่อไปนี้

1. ข้อมูลนี้มีความสัมพันธ์ระหว่าง Row กับ Column จริงหรือไม่?
2. ผู้ใช้จำเป็นต้องเปรียบเทียบค่าระหว่างหลายรายการหรือไม่?
3. ข้อมูลจะมีจำนวน Column มากแค่ไหน?
4. ผู้ใช้ Mobile ต้องดูข้อมูลทั้งหมดหรือไม่?
5. ข้อมูลอาจเพิ่มจาก 20 Row เป็น 20,000 Row ในอนาคตหรือไม่?

คำถามเหล่านี้ช่วยให้เราไม่เพียงเลือก HTML Element ได้ถูกต้อง แต่ยังช่วยออกแบบ Architecture ของระบบในระยะยาวได้ดีขึ้นด้วย

HTML Table มีผลกับ SEO หรือไม่?

Table ไม่ได้เป็น “เทคนิค SEO” ที่นำไปใช้แล้วทำให้อันดับดีขึ้นโดยอัตโนมัติ แต่การใช้ HTML ที่มี Semantic เหมาะสมช่วยให้โครงสร้างเนื้อหาชัดเจน และทำให้ข้อมูลสำหรับผู้ใช้อ่านง่ายขึ้น

สิ่งสำคัญกว่าเรื่อง Tag คือคุณภาพของเนื้อหา ความถูกต้องของข้อมูล User Experience, ความเร็วเว็บไซต์, Mobile Experience และความเกี่ยวข้องกับ Search Intent

หากเนื้อหาเป็นข้อมูลตารางจริง การใช้ Table อย่างถูกต้องย่อมเหมาะกว่า การสร้างทุกอย่างด้วย <div> เพียงเพราะต้องการควบคุมหน้าตา

FAQ: คำถามที่พบบ่อยเกี่ยวกับ HTML Table

สรุป: Table ยังคงเป็นพื้นฐานสำคัญของ Web Development

แหล่งข้อมูลสำหรับศึกษาเพิ่มเติม

เนื้อหาด้านโครงสร้างและแนวทางการใช้งาน HTML Table ในบทความนี้ อ้างอิงหลักการจากมาตรฐาน HTML Living Standard และเอกสาร MDN Web Docs เกี่ยวกับ Table, Table Accessibility, Caption และ Table Sections