Droptables: ตารางจัดสไตล์

1. จัดรูปแบบในตาราง

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

สามารถกำหนดความสูงของแถวและความกว้างของคอลัมน์เป็นพิกเซลได้ โปรดไปที่เมนู รูปแบบ > ใช้ขนาดคอลัมน์/แถว จากนั้นเลือก ปรับขนาดคอลัมน์ / ปรับขนาดแถว ในหน้าต่างป๊อปอัพ คุณสามารถเลือกช่วงและตั้งค่าพิกเซลสำหรับคอลัมน์หรือแถวได้ คลิก เสร็จสิ้น เพื่อเสร็จสิ้น

2. ตัวเลือกธีมและการเรียงลำดับ

ในแต่ละตาราง คุณจะพบ การเลือกธีมได้ ที่เมนู ธีม เพียงคลิกที่ธีมเพื่อใช้งาน

ใน เมนู Theme > Alternate colors ฟีเจอร์ "Automatic styling" จะช่วยให้คุณกำหนดสีให้กับเส้นในตารางของคุณโดยใช้ สไตล์ส่วนหัว และ ส่วนท้าย คุณสามารถเลือกสไตล์จากเทมเพลตหรือสร้างสไตล์ของคุณเองได้ในการตั้งค่าปลั๊กอิน

พารามิเตอร์ sortable ช่วยให้คุณสามารถเรียงลำดับข้อมูล AJAX บนฝั่ง frontend ได้ คุณสามารถดูได้ที่ เมนู Format > Sort

การจัดแนวตารางคือการจัดแนว div ที่บรรจุตารางทั้งหมด เช่น จัดตารางทั้งหมดให้อยู่ตรงกลาง คุณสามารถค้นหาได้ที่ เมนู รูปแบบ > จัดแนว ตาราง

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

3. เพิ่มคำแนะนำเมื่อวางเมาส์เหนือเซลล์

นอกจากนี้ยังมีคำแนะนำเพิ่มเติมเมื่อวางเมาส์เหนือเซลล์ (ต้องเปิดใช้งานจากตัวเลือกส่วนประกอบ) คุณสามารถดู คำแนะนำเพิ่มเติม ได้เมื่อคลิกขวา

คุณสามารถกำหนดความกว้างของคำแนะนำ (tooltip) เป็นพิกเซลได้ เมื่อกำหนดแล้ว ระบบจะนำคุณไปยังคำแนะนำที่มีตัวแก้ไขให้แก้ไขได้.

เพิ่มเนื้อหาและบันทึก เท่านี้ก็เสร็จแล้ว จะมีคำแนะนำแสดงขึ้นบนฝั่งสาธารณะเมื่อวางเมาส์เหนือคำแนะนำนั้น.

4. การบริหารจัดการ ACL และส่วนหน้า (Frontend)

คุณสามารถจัดการตารางของคุณได้จากส่วนหน้าของ Joomla จากตัวจัดการเมนูของ Joomla ให้เพิ่มรายการเมนูใหม่ เลือกประเภทเป็น " จัดการตาราง" และเลือก Droptables frontend - Default"

นี่คือสิ่งที่คุณสามารถเห็นได้ใน Droptables Manager จากส่วนหน้าเว็บ.

คุณสามารถใช้ Joomla User Group ACL เพื่อควบคุมการแก้ไขตารางได้ ขั้นแรก ในการตั้งค่าว่าใครได้รับอนุญาตให้ดูตาราง คุณควรไปที่ User Roles ใน การตั้งค่า Droptables

คุณสามารถกำหนดเจ้าของตารางได้จากเมนู ตาราง > สิทธิ์การเข้าถึงตาราง

5. การตรึงแถวและคอลัมน์

การแช่แข็งคอลัมน์

การตรึงคอลัมน์สามารถทำได้ในเมนู รูปแบบ > ตัวเลือกการตอบสนอง คุณสามารถตรึงได้สูงสุด 5 คอลัมน์ โดยจะนับจากคอลัมน์แรก

เพื่อให้การตรึงคอลัมน์/แถวคงอยู่ มีตัวเลือกเพิ่มเติมที่ช่วยให้คุณกำหนดความสูงของตารางได้ (เนื่องจากคอนเทนเนอร์ตารางของคุณอาจมีความสูงไม่จำกัด).

เมื่อคุณเลือกคอลัมน์ที่จะตรึงแล้ว คุณจะสามารถเลื่อนดูตารางได้โดยที่คอลัมน์นั้นจะแสดงอยู่เสมอ.

การแช่แข็งแถว

คุณสามารถค้นหาได้ที่ เมนู รูปแบบ > ส่วนหัวตาราง จากตรงนี้คุณสามารถเปิดใช้งานตัวเลือกและตั้งค่าแถวให้ตรึงไว้ (สูงสุด 5 แถว)

หากต้องการตั้งค่าความสูงของตาราง โปรดกลับไปที่ ตัวเลือกการปรับขนาดตามหน้าจอ

จากนั้นแถวแรกจะถูกตรึงไว้ที่ส่วนหน้าตามการตั้งค่า.

6. การกรองข้อมูลในคอลัมน์

ตัวเลือกการกรองข้อมูลมีอยู่ในเมนู รูปแบบ > ตัวกรอง คุณสามารถเปิดใช้งานได้โดยคลิกเพื่อเปิดใช้งานช่องกรองข้อมูลสาธารณะ

ตัวอย่างตัวกรอง:

7. ระยะห่างภายในเซลล์และรัศมีขอบ

คุณสามารถค้นหาไอคอนเส้นขอบบนแถบเครื่องมือ ซึ่งช่วยในการปรับระยะห่างภายในและรัศมีของเส้นขอบบนเซลล์ได้.

8. CSS แบบกำหนดเอง

ลองก้าวไปอีกขั้น หากคุณเป็นนักออกแบบเว็บไซต์ที่มีทักษะในการแก้ไข CSS คุณจะสามารถเพิ่ม CSS ได้ที่ เมนู รูปแบบ > CSS กำหนด เอง

เซลล์ แถว และคอลัมน์ มีพิกัดเพื่อระบุแต่ละส่วนและนำไปใช้กับ CSS แบบกำหนดเอง R คือแถว C คือคอลัมน์ ในที่นี้คือ แถวที่ 1 (r1) คอลัมน์ที่ 4 (c4) = dtr1 dtc4

โค้ด CSS ถูกระบายสีโดยใช้ Code Mirror โค้ด CSS สามารถเขียนให้สั้นลงได้ และมันก็ยังใช้งานได้!

9. ตาราง Joomla ที่ตอบสนองต่อขนาดหน้าจอ

ตารางของฉันมีการปรับขนาดตามหน้าจอหรือใช้การเลื่อนบนอุปกรณ์ขนาดเล็กหรือไม่?

การซ่อนคอลัมน์

Droptables จัดการการออกแบบที่ตอบสนองต่อขนาดหน้าจอด้วยเครื่องมือจัดลำดับความสำคัญ ซึ่งเป็นตัวเลือกเสริม โดยค่าเริ่มต้น คุณสมบัติการตอบสนองต่อขนาดหน้าจอจะถูกปิดใช้งาน ทำให้เกิดการแสดงผลเกินขอบเขต (ซึ่งทำงานได้ดีบนมือถือ) หากต้องการใช้ การซ่อนคอลัมน์ คุณควรไปที่ เมนู รูปแบบ > ตัวเลือกการตอบสนองต่อขนาดหน้าจอ

โหมดตอบสนองขั้นสูง คุณสามารถกำหนดลำดับความสำคัญในการซ่อนคอลัมน์บนขนาดหน้าจอมือถือได้ เมื่อคอลัมน์ถูกซ่อน เมนูมือถือพร้อมช่องทำเครื่องหมายจะปรากฏขึ้นเพื่อบังคับแสดง/ซ่อนคอลัมน์
ขนาดของคอลัมน์จะคงที่ในระหว่างการแก้ไขตาราง หากขนาดของคอลัมน์ทั้งหมดใหญ่เกินไปสำหรับคอนเทนเนอร์ คุณจะเห็นส่วนที่ล้นออกมา และคุณจะสามารถเลื่อนดูได้อย่างง่ายดายบนอุปกรณ์มือถือ

ตารางที่มีแถบเลื่อน (เหมาะสำหรับตารางที่มีจำนวนคอลัมน์ไม่มาก)

ตารางที่มีการซ่อนคอลัมน์ (เหมาะสำหรับตารางที่มีจำนวนคอลัมน์มาก)

ส่วนหัวซ้ำ

นี่เป็นอีกทางเลือกหนึ่งหากคุณต้องการแทรกตารางในพื้นที่เล็กๆ บนเว็บไซต์ของคุณ คุณควรไปที่ เมนู รูปแบบ > ตัวเลือกการตอบสนอง จากนั้นเลือก ประเภทการตอบสนอง > ส่วนหัวแบบซ้ำ

จะมีตัวเลือกให้ปรับแต่งตามความต้องการของคุณ:

• จุดเปลี่ยนการแสดงผลแบบตอบสนอง (พิกเซล): เลือกค่าจุดเปลี่ยนการแสดงผลเป็นพิกเซลเพื่อกำหนดว่าตารางจะเปลี่ยนไปใช้โหมดตอบสนองเมื่อใด
• ความสูงสูงสุดแบบตอบสนอง (พิกเซล): เมื่อเปิดใช้งานโหมดตอบสนอง ค่าจุดแบ่งหน้าจอจะให้กำหนดความสูงสูงสุดเพื่อป้องกันไม่ให้ตารางยาวเกินไป
• การจัดรูปแบบโหมดตอบสนอง: ใช้การจัดรูปแบบเริ่มต้นสำหรับโหมดตอบสนองนี้ หรือใช้สีที่กำหนดไว้ในตาราง

หลังจากนั้น คุณจะเห็นว่าตารางจะแสดงผลอย่างไรบนหน้าเว็บ.

10. ดาวน์โหลดตาราง

หากต้องการแชร์ตารางของคุณกับสาธารณะ ให้ไปที่ เมนู ตาราง และเลือก ส่งออกเป็นไฟล์ Excel ไฟล์ที่ได้จะเป็นนามสกุล *.xlsx เมื่อดาวน์โหลดบนหน้าเว็บ

11. การแบ่งหน้า

คุณสามารถค้นหาฟีเจอร์นี้ได้ที่ เมนู รูปแบบ > การแบ่งหน้า ในแต่ละการแก้ไขตาราง ใช้ปุ่มสลับเพื่อเปิดใช้งานและเลือกจำนวนแถวที่จะแสดงในแต่ละหน้า

12. รูปแบบสำหรับเซลล์เดี่ยว 

คุณสามารถตั้งค่ารูปแบบ: วันที่และเวลา สกุลเงิน ตัวเลข สำหรับเซลล์เดียวใน Droptables ได้ ก่อนอื่น คุณควรเลือกเซลล์หนึ่งเซลล์หรือหลายเซลล์ จากนั้นไปที่ เมนู รูปแบบ > วันที่และเวลา

หลังจากนั้น สกุลเงินและตัวเลข ก็สามารถทำได้ในลักษณะเดียวกัน

13. พิมพ์ตารางบนส่วนหน้า (frontend)

บางครั้ง คุณอาจต้องการพิมพ์ตารางของคุณ ดังนั้น เพื่อให้ ปุ่มพิมพ์ บนหน้าเว็บ คุณควรไปที่ เมนู ตาราง แล้วเลือก ตัวเลือก ปุ่มพิมพ์