WP Table Manager: การจัดรูปแบบตาราง
- 1. รูปแบบ
- 2. ธีมและตัวเลือก
- 3. เพิ่มคำแนะนำเมื่อวางเมาส์เหนือเซลล์
- 4. การตรึงแถวและคอลัมน์
- 5. การจัดเรียงและการกรอง
- 6. ระยะห่างภายในเซลล์และรัศมีขอบ
- 7. CSS แบบกำหนดเอง
- 8. ตาราง WordPress ที่ตอบสนองต่อขนาดหน้าจอ
- 9. ส่งออกไปยัง Excel
- 10. การแบ่งหน้า
- 11. การจัดรูปแบบเส้นขอบเซลล์
- 12. พิมพ์ตารางบนส่วนหน้า (frontend)
1. รูปแบบ
บนแถบเครื่องมือ คุณสามารถตั้งค่าสไตล์สำหรับเซลล์ได้ เช่น แบบอักษร ขนาดตัวอักษร รูปแบบข้อความ สีพื้นหลังของเซลล์ สีข้อความ การจัดแนวแนวนอนและแนวตั้งของเซลล์ เป็นต้น สามารถนำไปใช้กับเซลล์เดียวหรือหลายเซลล์ก็ได้
คุณสามารถเลือกเปอร์เซ็นต์สำหรับตัวแก้ไขตารางได้ ซึ่งหมายความว่าคุณสามารถซูมเข้า/ซูมออกตารางได้ในช่วงตั้งแต่ 50% ถึง 200%.
สามารถกำหนดความสูงของแถวและความกว้างของคอลัมน์เป็นพิกเซลได้ โปรดไปที่ เมนู รูปแบบ > ใช้ขนาดคอลัมน์/แถว จากนั้นเลือก ปรับขนาดคอลัมน์ / ปรับขนาดแถว ในหน้าต่างป๊อปอัพ คุณสามารถเลือกช่วงและตั้งค่าพิกเซลสำหรับคอลัมน์หรือแถวได้ คลิก เสร็จสิ้น เพื่อเสร็จสิ้น
2. ธีมและตัวเลือก
ในแต่ละตาราง คุณจะพบ การเลือกธีมได้ ที่ เมนูธีม เพียงคลิกที่ธีมเพื่อใช้งาน
สีสลับกัน
ใน เมนู Theme > Alternate colors ฟีเจอร์ "Automatic styling" จะช่วยให้คุณกำหนดสีให้กับเส้นในตารางของคุณโดยใช้ สไตล์ส่วนหัว และ ส่วนท้าย คุณสามารถเลือกสไตล์จากเทมเพลตหรือสร้างสไตล์ของคุณเองได้ในการตั้งค่าปลั๊กอิน
และคุณสามารถลบสีสำรองได้โดยคลิก "ลบ > ลบการจัดสไตล์อัตโนมัติ" ในเมนูคลิกขวา จากนั้นสีจะถูกล้างออกหลังจากที่คุณยืนยันแล้ว
การจัดแนวตาราง
การจัดแนวตาราง (Table align) คือการจัดแนว div ที่บรรจุตารางทั้งหมด เช่น จัดตารางทั้งหมดให้อยู่ตรงกลาง คุณสามารถค้นหาได้ที่ เมนู รูปแบบ (Format) > การจัดแนวตาราง (Table align )
การไฮไลต์เซลล์
นอกจากนี้ยังมีตัวเลือกในการเน้นเซลล์ คุณสามารถเปิดใช้งานคุณสมบัตินี้ได้ในการตั้งค่า โดยค่าเริ่มต้นจะปิดใช้งานอยู่ คุณสามารถเลือกแถวที่ต้องการเน้นเพื่อปรับสีและความโปร่งใสของการเน้นได้.
3. เพิ่มคำแนะนำเมื่อวางเมาส์เหนือเซลล์
ในแต่ละเซลล์ของตาราง คุณจะเห็นตัวเลือก "เพิ่มคำแนะนำ" เมื่อคลิกขวาที่เซลล์นั้น.
คุณสามารถกำหนดความกว้างของคำแนะนำ (tooltip) เป็นพิกเซลได้ เมื่อกำหนดแล้ว ระบบจะนำคุณไปยังคำแนะนำที่มีตัวแก้ไขให้แก้ไขได้.
เพิ่มเนื้อหาและบันทึก เท่านี้ก็เสร็จแล้ว จะมีคำแนะนำแสดงขึ้นบนฝั่งสาธารณะเมื่อวางเมาส์เหนือคำแนะนำนั้น.
4. การตรึงแถวและคอลัมน์
การแช่แข็งคอลัมน์
การตรึงคอลัมน์สามารถทำได้ในเมนู รูปแบบ > ตัวเลือกการตอบสนอง คุณสามารถตรึงได้สูงสุด 5 คอลัมน์ โดยจะนับจากคอลัมน์แรก
เพื่อให้การตรึงคอลัมน์/แถวคงอยู่ มีตัวเลือกเพิ่มเติมที่ช่วยให้คุณกำหนดความสูงของตารางได้ (เนื่องจากคอนเทนเนอร์ตารางของคุณอาจมีความสูงไม่จำกัด).
เมื่อคุณเลือกคอลัมน์ที่จะตรึงแล้ว คุณจะสามารถเลื่อนดูตารางได้โดยที่คอลัมน์นั้นจะแสดงอยู่เสมอ.
การแช่แข็งแถว
คุณสามารถค้นหาได้ที่ เมนู รูปแบบ > ส่วนหัวตาราง จากตรงนี้คุณสามารถเปิดใช้งานตัวเลือกและตั้งค่าแถวให้ตรึงไว้ (สูงสุด 5 แถว)
หากต้องการตั้งค่าความสูงของตาราง โปรดกลับไปที่ ตัวเลือกการปรับขนาดตามหน้าจอ
จากนั้นแถวแรกจะถูกตรึงไว้ที่ส่วนหน้าตามการตั้งค่า.
5. การจัดเรียงและการกรอง
หากต้องการเรียงลำดับหรือกรองข้อมูลในตาราง โปรดไปที่เมนู ตัวเลือก การเรียงลำดับและตัวกรอง
จากนั้นจะมีหน้าต่างป๊อปอัพปรากฏขึ้น ซึ่งมีตัวเลือกการเรียงลำดับและการกรองข้อมูล.
หากต้องการเรียงลำดับตาราง เพียงเปิดใช้งาน การเรียงลำดับในส่วนหน้า คุณสามารถเลือกคอลัมน์สำหรับการเรียงลำดับเริ่มต้นและทิศทางการเรียงลำดับได้
ตัวอย่างเช่น ในกรณีนี้ ให้เลือก คอลัมน์ A โดย (ASC )
มีตัวเลือกการกรอง 2 แบบ:
- ภายในคอลัมน์: คุณสามารถกรองข้อมูลได้ที่ส่วนหัวของแต่ละคอลัมน์ ปุ่มสลับจะช่วยให้คุณแสดงหรือซ่อนช่องค้นหาที่ส่วนหัวได้
- แบบฟอร์มตัวกรองขั้นสูง: เมื่อเลือกตัวเลือกนี้แล้ว คุณสามารถค้นหาและกรองข้อมูลในตารางได้
การค้นหาหลัก: เมื่อคุณเปิดใช้งานฟีเจอร์นี้ ระบบจะเพิ่มช่องป้อนข้อมูลการค้นหาในส่วนหน้าเว็บไซต์ ซึ่งจะช่วยให้ผู้ใช้สามารถค้นหาข้อมูลทั้งหมดในตารางได้อย่างง่ายดาย
6. การเว้นระยะห่างภายในเซลล์และรัศมีขอบ
คุณสามารถค้นหาไอคอนเส้นขอบบนแถบเครื่องมือ ซึ่งช่วยในการปรับระยะห่างภายในและรัศมีของเส้นขอบบนเซลล์ได้.
7. CSS แบบกำหนดเอง
ลองก้าวไปอีกขั้น หากคุณเป็นนักออกแบบเว็บไซต์ที่มีทักษะ CSS คุณจะสามารถเพิ่ม CSS ได้ที่ เมนู รูปแบบ > CSS กำหนดเอง
โค้ด CSS นี้มีการใส่สีโดยใช้ Code Mirror และสามารถเขียนด้วย CSS ที่น้อยกว่าก็ได้ และมันก็ใช้งานได้เช่นกัน!
เซลล์ แถว และคอลัมน์ มีพิกัดเพื่อระบุแต่ละส่วนและนำ CSS แบบกำหนดเองมาใช้ R คือแถว C คือคอลัมน์.
8. ตาราง WordPress ที่ตอบสนองต่อขนาดหน้าจอ
ตารางของฉันมีการปรับขนาดตามหน้าจอหรือใช้การเลื่อนบนอุปกรณ์ขนาดเล็กหรือไม่?
การซ่อนคอลัมน์
WP Table Manager จัดการการออกแบบที่ตอบสนองต่อขนาดหน้าจอด้วยเครื่องมือจัดลำดับความสำคัญเป็นตัวเลือก โดยค่าเริ่มต้น คุณสมบัติการตอบสนองต่อขนาดหน้าจอจะถูกปิดใช้งาน ทำให้เกิดการแสดงผลเกินขอบเขต (ซึ่งใช้งานได้ดีบนมือถือ) หากต้องการใช้ การซ่อนคอลัมน์ คุณควรไปที่ เมนู รูปแบบ > ตัวเลือกการตอบสนองต่อขนาดหน้าจอ
โหมดตอบสนองขั้นสูง คุณสามารถกำหนดลำดับความสำคัญในการซ่อนคอลัมน์บนขนาดหน้าจอมือถือได้ เมื่อคอลัมน์ถูกซ่อน เมนูมือถือพร้อมช่องทำเครื่องหมายจะปรากฏขึ้นเพื่อบังคับแสดง/ซ่อนคอลัมน์
ขนาดของคอลัมน์จะคงที่ในระหว่างการแก้ไขตาราง หากขนาดของคอลัมน์ทั้งหมดใหญ่เกินไปสำหรับคอนเทนเนอร์ คุณจะพบกับปัญหาข้อมูลล้น และคุณจะสามารถเลื่อนดูได้ง่ายบนอุปกรณ์มือถือ
ตารางที่มีแถบเลื่อน (เหมาะสำหรับตารางที่มีจำนวนคอลัมน์ไม่มาก)
ตารางที่มีการซ่อนคอลัมน์ (เหมาะสำหรับตารางที่มีจำนวนคอลัมน์มาก)
ส่วนหัวซ้ำ
นี่เป็นอีกทางเลือกหนึ่งหากคุณต้องการแทรกตารางในพื้นที่เล็กๆ บนเว็บไซต์ของคุณ คุณควรไปที่ เมนู รูปแบบ > ตัวเลือกการตอบสนอง จากนั้นเลือก ประเภทการตอบสนอง > ส่วนหัวแบบซ้ำ
จะมีตัวเลือกให้ปรับแต่งตามความต้องการของคุณ:
- จุดเปลี่ยนการแสดงผลแบบตอบสนอง (พิกเซล): เลือกค่าจุดเปลี่ยนการแสดงผลเป็นพิกเซลเพื่อกำหนดว่าตารางจะเปลี่ยนไปใช้โหมดตอบสนองเมื่อใด
- ความสูงสูงสุดแบบตอบสนอง (พิกเซล): เมื่อเปิดใช้งานโหมดตอบสนอง ค่าจุดแบ่งหน้าจอจะให้กำหนดความสูงสูงสุดเพื่อป้องกันไม่ให้ตารางยาวเกินไป
- การจัดรูปแบบโหมดตอบสนอง: ใช้การจัดรูปแบบเริ่มต้นสำหรับโหมดตอบสนองนี้ หรือใช้สีที่กำหนดไว้ในตาราง
หลังจากนั้น คุณจะเห็นว่าตารางจะแสดงผลอย่างไรบนหน้าเว็บ.
หากคุณใช้ ส่วนหัวแบบซ้ำ และ การกรอง คุณสามารถกรองข้อมูลโดยพิมพ์ข้อความลงในช่องข้อความในมุมมองบนมือถือได้
9. ส่งออกไปยัง Excel
ในการบันทึกตารางลงในคอมพิวเตอร์ของคุณ คุณควรไปที่เมนู ตาราง แล้ว คลิกที่ ส่งออกเป็น Excel จากนั้นประเภทไฟล์จะเป็น *.xlsx หลังจากส่งออกในส่วนหน้าเว็บไซต์
10. การแบ่งหน้า
คุณสามารถค้นหาฟีเจอร์นี้ได้ที่ เมนู รูปแบบ > การแบ่งหน้า ในแต่ละการแก้ไขตาราง ใช้ปุ่มสลับเพื่อเปิดใช้งานและเลือกจำนวนแถวที่จะแสดงในแต่ละหน้า
11. การจัดรูปแบบเส้นขอบเซลล์
คุณสามารถกำหนดประเภทเส้นขอบให้กับตารางของคุณได้ เช่น ความกว้างของเส้นขอบ สีของเส้นขอบ และรูปแบบของเส้นขอบ ขั้นแรก ให้เลือกช่วงเซลล์ จากนั้นคลิกที่ไอคอนบนแถบเครื่องมือ.
12. พิมพ์ตารางบนส่วนหน้า (frontend)
บางครั้ง คุณอาจต้องการพิมพ์ตารางของคุณ ดังนั้น เพื่อให้ ปุ่มพิมพ์ บนหน้าเว็บ คุณควรไปที่ เมนู ตาราง แล้วเลือก ปุ่มพิมพ์




































