10 ตัวอย่าง CSS ฟรีสำหรับการสร้างตารางราคาที่ตอบสนอง

หน้าการกำหนดราคาเป็นหลักสำหรับร้านค้าออนไลน์ใดๆ ใช้สำหรับผลิตภัณฑ์ SaaS บริษัทที่ให้บริการ และร้านค้าอีคอมเมิร์ซทั่วทั้งเว็บ

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

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

1. Icon Table โดย Travis Williamson

ภาพสวยขายได้ตลอด อาจเป็นภาพถ่ายผลิตภัณฑ์หรือภาพประกอบที่กำหนดเอง แต่ภาพจะดึงดูดความสนใจได้เร็วกว่าข้อความ

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

ดูปากกา
ตารางราคาโดย Travis Williamson (@travisw)

2. ลายทางม้าลายพร้อมสี โดย Agustin Ortiz

ตัวอย่างนี้มีตารางราคาที่ง่ายกว่ามากและเป็นไปตามกฎการออกแบบทั่วไป ใช้แถบลายทางม้าลาย ส่วนหัวราคาขนาดใหญ่ และสีต่างๆ เพื่อช่วยให้รูปแบบการกำหนดราคาเฉพาะรูปแบบหนึ่งโดดเด่นกว่ารูปแบบอื่นๆ

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

ดูตารางราคาปากกา | Tabla de Precios โดย Agustin Ortiz

3. โต๊ะสีม่วงเข้ม โดย Mike Torosian

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

ดูตารางราคาปากกาโดย Mike Torosian

4. การกำหนดราคาอย่างมืออาชีพโดย LittleSnippets

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

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

ดูปากกา #1214 – ตารางราคาโดย LittleSnippets

5. ตารางที่มีเอฟเฟกต์โฮเวอร์โดย Nidheesh Balachandran

ในการออกแบบตารางราคานี้ คุณจะได้พบกับเอฟเฟกต์โฮเวอร์ที่สวยงามซึ่งจะช่วยเพิ่มสีสันให้กับส่วนหัวของตารางที่มืดลง พวกเขาแต่ละคนออกจากที่ว่างสำหรับภาพพื้นหลังที่คุณเลือก และเอฟเฟกต์โฮเวอร์ได้รับการจัดการผ่าน CSS

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

ดูตารางราคาปากกาโดย Nidheesh Balachandran

6. ตารางราคา Bootstrap โดย Sahar Ali Raza

ฉันเป็นแฟนตัวยงของ Bootstrap เนื่องจากมีกรอบงานและธีมที่เกี่ยวข้องมากมายที่คุณสามารถทำได้ ตัวอย่างหนึ่งคือ ตัวอย่างตารางราคานี้

การออกแบบนี้จำนวนมากได้รับการกำหนดรหัสเอง รวมทั้งพื้นหลังส่วนหัวที่เอียงและภาพเคลื่อนไหวเมื่อวางเมาส์เหนือ แต่เลย์เอาต์โดยรวมนั้นอาศัย Bootstrap ซึ่งทำให้ตอบสนองอย่างเต็มที่ตามค่าเริ่มต้น การออกแบบตัวอักษรนั้นน่าทึ่งมาก และฉันก็ชอบแอนิเมชั่นเมื่อวางเมาส์ไว้เหนือแต่ละแถวด้วย นี่คือการออกแบบตารางที่สะอาดตาซึ่งสามารถใช้ได้กับเว็บไซต์เกือบทุกประเภท

ดูตารางราคา Pen Bootstrap โดย Sahar Ali Raza

7. ตารางราคาการออกแบบวัสดุโดย Morten Srensen

หากคุณชอบดีไซน์ Material ของ Google คุณจะต้องชอบตารางราคานี้อย่างแน่นอน เป็นตาราง UI ที่เป็นวัสดุซึ่งเป็นไปตามคุณลักษณะต่างๆ ที่แนะนำของ Google เช่น การวางเมาส์เหนือเงาและโครงร่างสีแบบเรียบ

ดูปากกา
ตารางราคาการออกแบบวัสดุ (flexbox) โดย Morten Srensen

8. ตารางราคาที่สะอาดและเรียบง่ายโดย Daniel Hearn

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

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

ดูตารางราคาปากกา -1 โดย Daniel Hearn

9. ตาราง WIP โดย Dylan Mcleod

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

แต่ฉันประทับใจมากที่สุดกับตัวเลือกสีต่างๆ ที่ผสมผสานกันอย่างลงตัว เกือบจะเหมือนกับว่าตารางเหล่านี้มีส่วนหัวที่แตกต่างกันสองสามรายการ และทั้งหมดนั้นดึงดูดความสนใจของคุณด้วยเหตุผลหลายประการ

ดูตารางราคาปากกาโดย Dylan Mcleod

10. เรื่องราคา Flexbox โดย CSSGirl

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

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

ดูแผนราคา Pen Flexbox โดย Lindsey