TablePressต่างจาก
MCE Table Buttons ตรงที่จะทำการเก็บข้อมูลของตารางลงไว้ในฐานข้อมูล และเวลาจะนำมาแสดงก็ใช้ Shortcode แทน จะไม่สามารถแก้ไขที่หน้าบทความได้เหมือน MCE Table Buttons แต่ก็มีความสามารถมากกว่าเยอะพอสมควร เช่น การ Import/Export ตารางได้ มี Sorting, Filter, Search ในตัว
Download
เพิ่มตารางไปที่เมนู TablePress > Add New Table
ตั้งชื่อตารางและกำหนดจำนวนแถวและคอลัมน์ที่ต้องการ เสร็จแล้วคลิก
Add Table
จากนั้นเราก็จะเข้าสู่หน้ากรอกข้อมูลตาราง สามารถใส่ลิงค์หรือภาพได้ หรือคลิกที่
Advance Editor เราสามารถที่จะลบตารางโดยการคลิกที่แถวหรือคอลัมน์ที่ต้องการแล้วคลิกที่ปุ่ม
Delete หรือทำการรวม (
Combine) เซลใดๆ ด้วยการเลือกเซลที่ต้องการแล้ว Combine ก็ได้ หากต้องการเพิ่มแถวหรือคอลัมน์ ก็ใส่จำนวนที่ต้องการแล้วกด
AddTable Options ใช้สำหรับกำหนดคุณลักษณะของตาราง เช่น การกำหนดให้แถวแรกเป็น Header โดยอัตโนมัติ หรือการกำหนดให้เปลี่ยนสีพื้นหลังเมื่อเราเคลื่อนเม้าส์อยู่เหนือแถวใดๆ ทำให้เราสังเกตุข้อมูลได้ง่ายขึ้นค่ะ
Featured of the DataTable ใช้สำหรับการกำหนดการทำงานเพิ่มเติมให้กับตาราง เช่น การเปิดใช้งานการเรียงข้อมูล (Sorting) โดยเมื่อมีการคลิกที่หัวข้อคอลัมน์ใดๆ หากเป็นข้อมูลตัวเลข ก็จะแสดงแบบไล่ลำดับ น้อย – มาก, มาก – น้อย เป็นต้น, การแบ่งข้อมูลเป็นหลายๆ หน้า (Pagination) โดยกำหนดจำนวนแถวที่ตัดขึ้นหน้าใหม่ในช่อง Show _ row per page. หรือการเพิ่มช่อง Search เป็นต้น
ตัวอย่างจากนั้นคลิกที่ปุ่ม
Preview เพื่อดูตัวอย่างตารางที่เราสร้างขึ้น แล้วกดปุ่ม
Save Changes เพื่อจัดเก็บตาราง
Import/Export ใช้สำหรับการ Import หรือ Export ตารางจากข้อมูลประเภทต่างๆ สามารถอัพโหลดเป็นไฟล์หรือก๊อปปี้ข้อมูลมาวางได้หากเลือกเป็นแบบ Manual Input
การใช้งานตาราง เราสามารถแทรกตารางลงไปในโพสใดๆ ด้วยการใช้
shortcode ของตารางนั้นๆ เช่น [[table id=4 /]] หรือที่หน้าเขียนบทความ คลิกที่ปุ่มแทรกตารางของ TablePress แล้วเลือกตารางที่เราต้องการแทรกลงไป
Footableคือปลั๊กอินที่ช่วยทำให้ตารางนั้นแสดงผลแบบ Responsive ตามหน้าจอขนาดต่างๆ เพราะโดยปกติแล้วตารางจะไม่สามารถแสดงผลแบบ Responsive ได้
Download
ตั้งค่า
Settings > FooTableGeneralเรา จะเปิดการทำงานของ Fooble ให้ใช้งานกับ TablePress โดยอัตโนมัติด้วยการติ๊กที่ช่องด้านล่าง ส่วนตัวเลือกอื่นๆ เช่น Sorting, Filtering, Pagination นั้นเราก็ติ๊กออกเสีย เนื่องจาก TablePress ที่เราตั้งค่าก่อนหน้านี้มีฟังชั่นเหล่านี้อยู่แล้ว
Breakpoints คือการกำหนดจุดเปลี่ยนสำหรับหน้าจอของ
Tabet และ
Phoneโดยมีหน่วยเป็น pixel คือ เมื่อหน้าจอต่ำกว่าตัวเลขที่กำหนดนี้ ก็จะทำการย่อตารางลง
Column Visibility คือการกำหนดจำนวนตารางที่จะแสดงเมื่ออยู่บนหน้าจอของ Tablet และ Phone เมื่อตั้งค่าเรียบร้อยก็กดปุ่ม
Save Changesจากตัวอย่างด้านล่าง เมื่อหน้าจอลดลงเป็นขนาด
320 pixel ตารางก็จะหดลงเหลือแค่
2 คอลัมน์ เหลือเพียง ชื่อ และ อายุ โดยหากจะดูข้อมูลอื่นๆ ก็คลิกที่แถวนั้นๆ หรือที่เครื่องหมาย
ที่มา:
http://www.wpthaiuser.com/tablepress-footable/