เว็บไซต์สำเร็จรูป - เทคนิคการใส่ตารางในรายละเอียดสินค้าบนระบบร้านค้าออนไลน์

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

ถึงตรงนี้ หลาย ๆ ท่านอาจสงสัยว่าจะสร้างตารางได้อย่างไร เนื่องจากไม่มีเครื่องมือตารางในหน้าแก้ไขสินค้า แต่ไม่ใช่เรื่องยากเลยค่ะ ติดตามได้ใน ReadyPlanet HowTo ตอนนี้ได้เลยค่ะ

1. เบื้องต้นจะใช้เครื่องมือในส่วน "เนื้อหาของบทความ" เข้ามาช่วยในการสร้างตารางและใส่ข้อมูลค่ะ โดยไปที่เมนู "ระบบพื้นฐาน" คลิกเมนู "จัดการกลุ่มบทความ/บทความ"

2. คลิก  "เพิ่มบทความใหม่" ที่กลุ่มบทความ "Special Column" (เป็นกลุ่มบทความสำหรับเก็บสำรองบทความที่ไม่ต้องการแสดงบนหน้าเว็บไซต์หรือบทความที่ยังไม่พร้อมออนไลน์ค่ะ)

3. คลิกเครื่องมือ "Insert/Edit Table" จากนั้นตั้งค่าตารางตามต้องการ ดังภาพตัวอย่าง จะกำหนดให้ตารางมี 4 แถว (Rows) 2 คอลัมน์ มีความกว้าง (Width) เป็น 100 Percent (เพื่อให้ตารางมีขนาดพอดีกับหน้าเว็บไซต์อัตโนมัติค่ะ)
และขนาดความหนาของเส้นขอบตาราง (Border size) เป็น 0 (เพื่อซ่อนเส้นขอบตาราง) รวมถึง Alignment คือ รูปแบบการแสดงผลของตารางให้อยู่กึ่งกลาง (Center) ค่ะ

4. ทำการใส่ข้อมูลรายละเอียดสินค้าลงในตาราง และปรับแต่งการแสดงผลเพิ่มเติม ด้วยเครื่องมือ "Cell Properties" เช่น ปรับความกว้างของช่องตาราง (width) , เพิ่มสีให้กับช่องตาราง (Background Color), จัดตำแหน่งการแสดงผลข้อมูลในช่องตาราง (Horizontal Alignment, Vertical Alignmet) เป็นต้น

5. เมื่อปรับแต่งข้อมูลรายละเอียดสินค้าในตารางจนแสดงผลตามต้องการแล้ว สามารถคัดลอกข้อมูลจากส่วนเนื้อหาของบทความไปวางในหน้ารายละเอียดสินค้าของระบบร้านค้าออนไลน์ได้ ด้วยการคลิกเครื่องมือ "Source"

6. ข้อมูลตาราง ตัวอักษร จะถูกแปลงเป็น HTML Code ให้ทำการไฮไลท์โค้ดที่ปรากฎทั้งหมด จากนั้นคลิกขวาแล้ว Copy Code ที่ปรากฎ และคลิกบันทึกบทความนี้ค่ะ

7. การแก้ไขรายละเอียดสินค้า โดยคลิก   เพื่อแก้ไขสินค้าที่ต้องการ (หรือไปที่เมนู "ระบบเสริม" คลิก "จัดการสินค้า" แล้วคลิกที่หมวดหมู่ที่ต้องการ ทำการเพิ่มสินค้าใหม่หรือแก้ไขสินค้าที่ต้องการได้เช่นกันค่ะ)

8. ที่หัวข้อ "รายละเอียดทั้งหมด" ให้คลิกเครื่องมือ "Source" และวางโค้ด HTML ที่คัดลอกมาในช่องรายละเอียดทั้งหมด

9. หากต้องการเพิ่มเนื้อหาหรือรายละเอียดสินค้าเพิ่มเติม ให้คลิกปุ่มเครื่องมือ  "Source" อีกครั้ง จะแสดงผลข้อมูลตารางที่ท่านได้สร้างไว้ โดยในส่วนของรายละเอียดสินค้าทั้งหมด จะมีเครื่องมือ Text Editor อื่น ๆ เช่น เครื่องมือตกแต่งตัวอักษร เครื่องมืออัพโหลดรูปภาพ เครื่องมือสร้างลิงค์ เป็นต้น ให้ใช้งานได้ เมื่อตกแต่งเรียบร้อยแล้ว ให้คลิก บันทึก เพื่อจัดเก็บการเปลี่ยนแปลงแก้ไขรายละเอียดสินค้าด้วยค่ะ

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

ข้อแนะนำเพิ่มเติม :

1. เมื่อเพิ่มตารางเข้ามาในเนื้อหาบทความ ควรกำหนดให้ความกว้าง (Width) เป็น 100 Percent เพื่อความสวยงามในการแสดงผล เพราะตารางจะปรับขนาดให้พอดีกับความกว้างของหน้าเว็บไซต์นั้น ๆ อัตโนมัติค่ะ

2. จากข้อ 6. ในเนื้อหาบทความข้างต้น เมื่อคัดลอกโค้ด HTML ที่ปรากฎเรียบร้อยแล้ว แนะนำให้ตั้งชื่อบทความและบันทึกบทความนี้เก็บไว้ใน Special Column ด้วยนะคะ เพื่อความสะดวกในการแก้ไขข้อมูลภายหลังค่ะ

3. สามารถดูรายละเอียดวิธีการใช้งานเครื่องมือตารางเพิ่มเติม คลิกที่นี่ ค่ะ