วิธีสร้างตารางใน WordPress ด้วย TablePress Plugin

การสร้างตารางในเว็บไซต์ WordPress ฟังดูยาก แต่ถ้ามี TablePress Plugin มือใหม่สามารถทำได้ภายในไม่กี่นาที TablePress เป็น Plugin ฟรี 100% ที่ได้รับความนิยมสูงสุดสำหรับการสร้างตาราง มีฟีเจอร์ครบครัน ตั้งแต่การเรียงลำดับคอลัมน์ ค้นหาข้อมูล ไปจนถึงนำเข้าข้อมูลจาก Excel ได้โดยตรง

TablePress Plugin คืออะไร และทำไมต้องใช้?

TablePress เป็น WordPress Plugin สำหรับจัดการตารางข้อมูลโดยเฉพาะ แยกการจัดการตารางออกจาก Post/Page ทำให้แก้ไขตารางครั้งเดียว แล้วอัปเดตทุกหน้าที่ใช้ตารางนั้นพร้อมกัน

ข้อดีของ TablePress เมื่อเทียบกับการพิมพ์ตารางด้วยมือ:

• ไม่ต้องรู้ HTML — ใช้อินเทอร์เฟซแบบตารางคล้าย Excel
• ผู้เยี่ยมชมเรียงคอลัมน์และค้นหาข้อมูลได้ทันที (DataTables)
• นำเข้าจาก Excel, CSV, JSON ได้โดยตรง
• ตารางเดียวใช้ได้หลายหน้า — แก้ครั้งเดียวอัปเดตทุกที่
• Responsive บนมือถือโดยอัตโนมัติ

ขั้นตอนที่ 1: ติดตั้ง TablePress Plugin

การติดตั้งทำผ่าน WordPress Admin ได้เลย ไม่ต้องอัปโหลดไฟล์เอง

1. เข้า WordPress Admin → Plugins → Add New Plugin
2. พิมพ์ TablePress ในช่องค้นหา
3. เลือก "TablePress" โดย Tobias Bäthge แล้วกด Install Now
4. รอติดตั้งเสร็จ แล้วกด Activate
5. เมนู TablePress จะปรากฏในแถบด้านซ้ายของ Admin

ขั้นตอนที่ 2: สร้างตารางใหม่

หลังติดตั้งแล้ว ให้ไปที่ TablePress → Add New Table เพื่อสร้างตารางแรก

1. ใส่ชื่อตาราง เช่น "เปรียบเทียบ Hosting Plan"
2. กำหนดจำนวนแถว (Rows) และคอลัมน์ (Columns) ที่ต้องการ เช่น 5 แถว 4 คอลัมน์
3. กด Add Table เพื่อสร้าง
4. ระบบจะพาไปหน้าแก้ไขตารางทันที

ในหน้าแก้ไขตาราง คุณจะเห็นตารางแบบ Grid ที่คลิกแก้ไขได้แต่ละช่อง เหมือน Google Sheets ขนาดเล็ก

ขั้นตอนที่ 3: กรอกข้อมูลในตาราง

คลิกที่ช่องใดก็ได้เพื่อพิมพ์ข้อมูล ช่องแถวแรก (Row 1) จะเป็น Header ของตาราง

1. คลิกช่อง Row 1, Column 1 แล้วพิมพ์ "แผน"
2. คลิกช่อง Row 1, Column 2 แล้วพิมพ์ "พื้นที่"
3. คลิกช่อง Row 1, Column 3 แล้วพิมพ์ "Email"
4. คลิกช่อง Row 1, Column 4 แล้วพิมพ์ "ราคา/เดือน"
5. กรอกข้อมูลแต่ละแผนในแถวถัดไป

ถ้าต้องการเพิ่มแถวหรือคอลัมน์ ให้เลื่อนลงมาที่ส่วน "Add Rows/Columns" แล้วกด + เพื่อเพิ่ม

ขั้นตอนที่ 4: ตั้งค่าตัวเลือกตาราง (Table Options)

เลื่อนลงมาในหน้าแก้ไขตาราง คุณจะพบส่วน "Table Options" ที่ปรับแต่งได้หลายอย่าง

• Table Head Row — เปิดเพื่อให้แถวแรกเป็น Header สีต่างจากแถวอื่น
• Table Foot Row — เปิดเพื่อให้แถวสุดท้ายเป็น Footer
• Alternating Row Colors — สีสลับแถว ทำให้อ่านง่ายขึ้น
• Row Hover Highlight — ไฮไลท์แถวเมื่อเอาเมาส์ชี้
• Print Name / Print Description — แสดงชื่อและคำอธิบายใต้/เหนือตาราง

เมื่อตั้งค่าเสร็จแล้ว กด Save Changes ที่ด้านบน

ขั้นตอนที่ 5: เปิดใช้งาน DataTables (ค้นหา/เรียง)

DataTables คือฟีเจอร์ที่ทำให้ผู้เยี่ยมชมสามารถค้นหาและเรียงลำดับข้อมูลในตารางได้เองโดยไม่ต้องโหลดหน้าใหม่

1. เลื่อนลงไปที่ส่วน "DataTables JavaScript library"
2. เปิดสวิตช์ "Use DataTables"
3. เลือกฟีเจอร์ที่ต้องการ:
   • Sorting — ให้คลิกหัวคอลัมน์เพื่อเรียงลำดับ
   • Search/Filter — เพิ่มช่องค้นหาเหนือตาราง
   • Pagination — แสดงทีละ 10 แถว มีปุ่มเปลี่ยนหน้า
   • Print button — ปุ่มสั่งพิมพ์ตาราง
4. กด Save Changes

ขั้นตอนที่ 6: แทรกตารางใน Post หรือ Page

TablePress ใช้ Shortcode เพื่อแทรกตารางเข้าไปในเนื้อหา ระบบจะสร้าง Shortcode ให้อัตโนมัติ

ดู Shortcode ได้จากหน้าแก้ไขตาราง ด้านบนสุดจะมีกล่อง "Shortcode" แสดงโค้ดเช่น:

[table id=1 /]

วิธีแทรกตารางใน Gutenberg Editor:

1. เปิด Post หรือ Page ที่ต้องการใส่ตาราง
2. คลิกบล็อกใหม่ แล้วเลือกบล็อกประเภท Shortcode
3. วาง Shortcode เช่น [table id=1 /] ลงไป
4. กด Preview เพื่อดูตัวอย่าง หรือ Publish/Update เพื่อเผยแพร่

ตารางจะแสดงบนหน้าเว็บทันที พร้อมฟีเจอร์ค้นหาและเรียงลำดับ ถ้าเปิดไว้

ขั้นตอนที่ 7: นำเข้าข้อมูลจาก Excel หรือ CSV

ถ้ามีข้อมูลอยู่แล้วใน Excel หรือ Google Sheets ไม่ต้องพิมพ์ใหม่ — นำเข้าได้โดยตรง

1. ใน Excel หรือ Google Sheets → Save As / Export เป็นไฟล์ .csv
2. ใน WordPress Admin ไปที่ TablePress → Import a Table
3. เลือก "Upload file from your computer"
4. คลิก Choose File แล้วเลือกไฟล์ .csv ที่บันทึกไว้
5. เลือก "Import format: CSV" และตั้งค่าตัวเลือกตามต้องการ
6. กด Import — ตารางจะถูกสร้างใหม่พร้อมข้อมูลทันที

ตรวจสอบว่า TablePress ทำงานถูกต้อง

หลังแทรกตารางในหน้าเว็บแล้ว ให้ตรวจสอบด้วยขั้นตอนต่อไปนี้:

# 1. เปิดหน้าเว็บที่ใส่ตาราง แล้วดู Page Source (Ctrl+U)
# ค้นหาคำว่า "tablepress" ควรพบ CSS/JS ของ Plugin
# ตัวอย่างที่ควรพบ:
<link rel="stylesheet" href=".../tablepress/css/tablepress.min.css">
<script src=".../tablepress/js/datatables.min.js"></script>

# 2. ตรวจสอบ HTML ของตาราง
# ค้นหา id="tablepress-1" ใน Source
<table id="tablepress-1" class="tablepress tablepress-id-1">

# 3. เปิด Browser Console (F12) ตรวจดู Error
# ถ้าไม่มี Error สีแดง แสดงว่า DataTables โหลดสำเร็จ

# 4. ทดสอบฟังก์ชัน Sort
# คลิกที่หัวคอลัมน์ ลูกศรควรเปลี่ยนทิศทาง
# ข้อมูลในตารางควรเรียงลำดับใหม่ทันที

# 5. ทดสอบ Search
# พิมพ์คำในช่อง Search ตารางควรกรองข้อมูลทันที

แก้ปัญหาที่พบบ่อย

Error: ตารางไม่แสดงผล — เห็นแค่ Shortcode

ปัญหานี้เกิดเมื่อ WordPress ไม่ประมวลผล Shortcode อาจเกิดจาก:

• ใส่ Shortcode ในบล็อกประเภทผิด — ต้องใช้บล็อก Shortcode ไม่ใช่บล็อก Paragraph
• Plugin ถูก Deactivate — ตรวจสอบที่ Plugins → Installed Plugins
• Theme ปิดการใช้งาน Shortcode ใน Content — ลองทดสอบด้วย Default Theme เช่น Twenty Twenty-Four

Error: ตารางแสดงผลแต่ไม่ Responsive บนมือถือ

TablePress ฟรีไม่มี Responsive Mode ในตัว วิธีแก้:

• ติดตั้ง Extension เสริม "TablePress Extension: Responsive Tables" (ฟรี)
• หรือเพิ่ม CSS ใน WordPress Customizer เพื่อให้ตารางเลื่อนซ้าย-ขวาได้บนมือถือ
• เพิ่ม overflow-x: auto ให้กับ .tablepress-table-description

Error: ข้อมูล Import จาก CSV มีตัวอักษรภาษาไทยแสดงผลเพี้ยน

ปัญหา Encoding — ตรวจสอบว่าไฟล์ CSV บันทึกด้วย UTF-8

• ใน Excel: Save As → เลือก "CSV UTF-8 (Comma delimited)"
• ใน Google Sheets: File → Download → "Comma-separated values (.csv)"
• ถ้ายังเพี้ยน ลองเปิดไฟล์ด้วย Notepad++ แล้ว Encoding → Convert to UTF-8

Error: DataTables ทำงานช้าหรือขัดแย้งกับ Plugin อื่น

อาจเกิดจาก jQuery โหลดซ้ำหรือ Library ขัดแย้ง:

• ไปที่ TablePress → Plugin Options
• ในส่วน "Custom Commands for Initialization" ลอง Disable แล้วเปิดใหม่ทีละอย่าง
• ตรวจสอบ Browser Console (F12) ว่ามี Error "jQuery is not defined" หรือไม่
• ถ้าใช้ Cache Plugin เช่น WP Rocket ให้ Exclude ไฟล์ tablepress ออกจาก Minify

Error: ตารางที่ Export จาก TablePress ไม่ครบข้อมูล

ตรวจสอบว่าไม่มีแถวหรือคอลัมน์ที่ "ซ่อน" อยู่:

• ใน Table Editor มองหาช่อง Visibility ของแถว/คอลัมน์
• ถ้ามีไอคอน "ตา" บางช่องถูก Toggle ให้ซ่อน ให้คลิกเปิดใหม่
• กด Save Changes แล้ว Export ใหม่อีกครั้ง

คำถามที่พบบ่อย (FAQ)

Q: TablePress ฟรีหรือเปล่า? ต้องจ่ายเพิ่มไหม?

A: TablePress เวอร์ชัน Core ฟรี 100% ใช้งานได้ไม่มีข้อจำกัด สร้างตารางได้ไม่จำกัดจำนวน มีเวอร์ชัน Extension ที่ต้องจ่ายสำหรับฟีเจอร์พิเศษเช่น Responsive, Charts และ Row Filtering แต่สำหรับงานทั่วไปเวอร์ชันฟรีเพียงพอมาก

Q: ถ้าแก้ตารางแล้ว ทุกหน้าที่ใช้ตารางนี้จะอัปเดตอัตโนมัติไหม?

A: ใช่ — นี่คือจุดเด่นหลักของ TablePress ตารางถูกเก็บแยกจาก Post/Page ดังนั้นเมื่อแก้ไขตารางใน TablePress Editor แล้ว Save ทุกหน้าที่มี Shortcode [table id=X /] จะแสดงข้อมูลใหม่ทันทีโดยไม่ต้องแก้ทีละหน้า

Q: TablePress รองรับการแสดงรูปภาพในตารางได้ไหม?

A: ได้ เพียงใส่ HTML Image Tag ในช่องตาราง เช่น <img src="https://example.com/image.jpg" width="80" alt="รายการ"> TablePress จะ Render HTML ในช่องนั้นโดยอัตโนมัติ ทำให้ตารางสินค้าที่มีรูปภาพประกอบทำได้ง่ายมาก