定价页是任何网上商店的主要内容。它被用于SaaS产品、服务公司和遍布网络的电子商务商店。
如果没有一个比较选项、功能和（自然）价格的定价表，任何定价页都是不完整的。但是，从头开始设计你自己的定价表可能是一件麻烦事。
这就是这些开源定价表可以帮助的地方。这些都是完全响应的，而且无论你是想定制你自己的，还是想重用现有的代码以节省时间，它们都可以作为模板使用。
1.图标表 作者：Travis Williamson
优秀的视觉效果总是很有吸引力。这些可能是产品照片或定制的插图，但视觉效果比文字更能抓住人们的注意力。
这个图标化的定价表是一个很好的例子，说明了可视化表列的可能性。通过添加图标，你可以在客户阅读之前告知他们每个套餐的内容。这些图标展示了不同的功率和功能。最小的计划有一个纸飞机，而最大的计划使用一个完整的火箭船。说到对比!
见Travis Williamson (@travisw)的Pen 定价表。
2.Agustin Ortiz的《斑马线与颜色》（Zebra Striping w/ Colors）
这个例子有一个简单得多的定价表，并遵循更多的传统设计规则。它使用了斑马条纹、大的定价标题和各种颜色，以帮助一个特定的定价格式从其他地方脱颖而出。
这些颜色会让人感觉有点强烈，所以它并不适合每一种布局。但你可以很容易地改变颜色，仍然保持相同的格式，让这个定价表在你自己的网站上发挥作用。
请参阅Agustin Ortiz的钢笔 定价表|Tabla de Precios
3.深紫色桌子 作者：Mike Torosian
对于一个更黑暗和更丰富的表格设计，请看这个紫色的定价表。它使用了背景渐变和边框悬停效果，创造了网络上最专业的定价表之一。它也是完全响应的，所以当浏览器变小时，表格元素会被分解成行。
请看迈克-托罗西恩的钢笔定价表
4.LittleSnippets的专业定价表
B2B网站经常寻找更专业的设计，远离创造性的配色方案和不相干的图标。这个定价设计就是这样一个例子，它采用了典型的深色和浅色的色彩方案。
有一个定价栏使用了深蓝色的高光，从表格的其他部分跳出来。遵循这一技巧是标准的做法，因为它可以带来更高的转换率。这就是为什么 "专业 "计划也使用阴影出现在其他列的顶部。但当调整到较小的尺寸时，它就会落入一个堆叠的形成，以方便浏览。
请看笔 #1214 -LittleSnippets的 定价表
5.Nidheesh Balachandran设计的带有悬停效果的表格
在这个定价表的设计中，你会发现一些华丽的悬停效果，为深色的表头增添了色彩。它们都为你选择的背景图片留出了空间，而且悬停效果是通过CSS管理的。
我喜欢的另一件事是与整个表列绑定的点击事件。这样一来，如果访问者点击该列的任何地方，就会直接带他们到相关的注册页面。
请看Nidheesh Balachandran的Pen定价表
6.Bootstrap定价表 by Sahar Ali Raza
我是Bootstrap的超级粉丝，因为你可以用这个框架和它的相关主题做很多事情。其中一个例子就是这个定价表的例子。
这个设计有很多是自定义编码的，包括倾斜的标题背景和悬停动画。但整体布局依赖于Bootstrap，这使得它在默认情况下是完全响应的。排版是惊人的，我也喜欢移动到每一行时的悬停动画。这是一个干净的表格设计，几乎可以用于任何类型的网站。
请看Sahar Ali Raza的PenBootstrap定价表
7.材料设计定价表 by Morten Sørensen
如果你喜欢谷歌的材料设计，那么你一定会喜欢这个定价表。这是一个遵循谷歌建议的许多功能的材料UI表，如阴影悬停和平面配色。
请看Morten Sørensen的Pen
Material Design定价表（flexbox）。
8.简洁的定价表 by Daniel Hearn
超级干净和轻量级最能说明这个白色定价表。它并不依赖许多颜色或花哨的功能来突出自己。相反，它使用灰色作为标题，黑/白作为文字对比。这实际上效果很好，因为CTA按钮保持了强烈的绿色轮廓效果。
当你减少表格中的颜色时，你会把注意力吸引到唯一有颜色的地方，这通常会鼓励更多的点击。由于这是纯CSS，你可以很容易地更新按钮的颜色以适应你的设计。
请看丹尼尔-赫恩的钢笔定价表-1
9.Dylan Mcleod的WIP表
对于一个正在进行的工作，我不得不说这套彩色的定价表看起来令人难以置信。它遵循了许多传统的技术，如突出表头，并保持一列比其他列大。
但给我印象最深的是不同的颜色选择，它们很好地融合在一起。这几乎就像这些表格有几个不同的标题，而且它们都因各种原因而吸引你的注意力。
见迪伦-姆克洛德的钢笔定价表
10.CSSGirl的《Flexbox定价物语》
现在，对于一个真正的前向型表格设计，请看这个Flexbox表格。当鼠标在表格上移动时，每一列都会变大一点，并增加背景颜色。这有助于该列从其他列中脱颖而出，更快地抓住人们的注意力。这是一个很好的效果，在调整浏览器大小时，它还能延续到表格的CSS过渡。
虽然这里最大的特点是使用了flexbox来格式化表格的列。这个例子证明了Flexbox是响应式网站的未来。
请看林赛的《PenFlexbox定价计划》。
