特性表格设计

我在 Shopify 上的 Pattern Tap 遇到了特性表格设计，我当时就觉得，哇，Shopify，这表格太性感了。我受到启发，尝试复制它。首先是在 Photoshop 中，然后是在 HTML/CSS 中。重现你在网络上发现的酷炫事物绝对是我推荐的练习（几天后，我读了 这篇 文章——我完全同意）。像往常一样，这些练习让我走上了一些有趣的道路。

这是我的仿制品

查看演示   下载文件

标记

以下是简化的 HTML 代码

<table id="feature-table">
  <colgroup class="basic"></colgroup>
  <colgroup class="plus"></colgroup>
  <colgroup class="premium" id="featured"></colgroup>
  <colgroup class="pro"></colgroup>
	<thead>
		<tr>
			<th id="header-basic"><span>$15 Basic</span> <a class="button" href="#">Sign Up</a></th>
			<th id="header-plus"><span>$35 Plus</span><a class="button" href="#">Sign Up</a></th>
			<th id="header-premium"><span>$99 Premium</span><a class="button" href="#">Sign Up</a></th>
			<th id="header-pro"><span>$150 Pro</span><a class="button" href="#">Sign Up</a></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>50 pages</td>
			<td>75 pages</td>
			<td>Unlimited</td>
			<td>Unlimited</td>
		</tr>
    <!-- More rows here -->
	</tbody>
</table>

非常简洁。唯一不那么干净的地方是标题中的 <span>。那里有所有那些花哨的渐变和花哨的字体样式。理论上，可以使用大量的 CSS3 来实现，但你知道，有时一张图片就足够了，特别是当它完全可访问时 CSS 图片替换。

值得注意的是 <colgroup> 元素，我认为它被低估了。Colgroup 允许你定位表格单元格的整列并应用样式，即使这些表格单元格实际上不是 <colgroup> 的后代。有点奇怪的概念，但它确实有效，而且比在每个表格单元格上应用一个类名来表示它所在的列更容易。

如果你需要一些快速标记，我有一些你可以复制粘贴到 HTML-Ipsum 上。

CSS 代码

每个表头单元格 (<th>) 都有一个 ID。我们将为它们设置一个静态高度并为其设置背景图片。通过一点底部填充垂直对齐到底部，我们可以使链接按钮均匀放置。这些标题中的 span 通过绝对定位（即可访问隐藏）被踢出页面。

#feature-table th { height: 120px; padding-bottom: 14px; vertical-align: bottom; }
#header-basic { background: url(../images/header-15.png) no-repeat; }
#header-plus { background: url(../images/header-35.png) no-repeat; }
#header-premium { background: url(../images/header-99.png) no-repeat; }
#header-pro { background: url(../images/header-150.png) no-repeat; }
#feature-table th span { position: absolute; top: -9999px; left: -9999px; }

说到这些按钮。我只是使用了 CSS 按钮生成器 来快速设计一个我认为看起来不错且符合配色方案的按钮，并将 CSS 复制粘贴到此演示中。

要为单元格着色，我设置了一个回退十六进制颜色代码，然后是一个 HSLa 颜色值。这些类名正在定位 colgroup 元素。

.basic   { background-color: #d5e4bc; background-color: hsla(85,  30%, 80%, 1); }
.plus    { background-color: #c1dcb7; background-color: hsla(110, 30%, 80%, 1); }
.premium { background-color: #bad6c8; background-color: hsla(150, 30%, 80%, 1); }
.pro     { background-color: #bbd3dc; background-color: hsla(190, 30%, 80%, 1); }

最终产品是斑马纹，并且具有“特色列”的功能，但我们可以用 JavaScript 来实现它……

JavaScript 代码

jQuery，显然。我们可以将“odd”类应用于奇数行表格行，以及使用 jQuery 超级轻松地应用“final-row”类

$("tr:odd").addClass("odd");  // Zebra action
$("tr:last").addClass("final-row");  // For extra padding

为了处理“特色”列，并保持语义，我们只需在 colgroup 上应用一个 ID

<colgroup class="premium" id="featured"></colgroup>

现在 JavaScript 需要找出该列的列号。

// Figure out which column # is featured.
var featuredCol;
$("colgroup").each(function(i) {
    if (this.id == "featured") featuredCol = i+1;
});

现在我们将遍历所有表格单元格，并确定单元格是否位于特色列之前的列（如果是，则应用“leftOfFeatured”类）或特色列之后的列（如果是，则应用“rightOfFeatured”类）。

趁此机会，我们不妨将类名应用于所有指示其列的表格单元格。Colgroup 应该消除了这种需求，但事实证明它们有一个相当大的弱点。你不能做这样的事情

.basic .odd { 
   /* 
      .basic is the colgroup, .odd is the row
      the row really isn't a descendant of the colgroup 
      in other words, this doen't work
   */
}

此设计要求根据列进行不同的颜色更改。因此，当我们运行该循环时，我们将只将类名应用于表格单元格并使用这些类名来执行我们的操作。

// Apply classes to each table cell indicating column
// Also applies classes if cell is right or left of featured column

var numCols = $("colgroup").length;

$("td, th").each(function(i) {
    $(this).addClass("table-col-" + ((i % numCols) + 1));
    if (((i%numCols)+1) == (featuredCol-1)) $(this).addClass("leftOfFeatured");
    if (((i%numCols)+1) == (featuredCol+1)) $(this).addClass("rightOfFeatured");
});

此函数中的变量 i 是索引。它基本上告诉我们循环的哪个迭代我们正在进行。因此，它找到的第 50 个表格单元格，索引将为 49（索引是从零开始的）。因此，如果我们取索引模数列数（通过测试 jQuery 集的长度确定）并加 1，我们将得到单元格所在的列号。例如：4 列，找到第 10 个单元格。 9 % 4 = 1，加 1 是 2，所以第 10 个单元格在第 2 列。因此，该单元格获得类“table-col-2”。

使用行 .odd 类和新的 table-col-x 类，我们现在可以根据设计要求真正地创建斑马纹效果

.odd .table-col-1 { background-color: #edf3e2; background-color: hsla(85,  30%, 94%, 1); }
.odd .table-col-2 { background-color: #edf3e2; background-color: hsla(110, 30%, 94%, 1); }
.odd .table-col-3 { background-color: #edf3e2; background-color: hsla(150, 30%, 94%, 1); }
.odd .table-col-4 { background-color: #e2ecf0; background-color: hsla(190, 30%, 94%, 1); }

注意，它又是十六进制代码回退和 HSLa。在这里使用 HSLa 的乐趣在于，除了第三个值（“亮度”）之外，所有值都完全相同。我们将该值增加 14%，这就是明显的色调差异。

“leftOfFeatured”和“rightOfFeatured”类应用背景图片，只是一个分别向左或向右对齐和重复的 alpha 透明 PNG 阴影。

.leftOfFeatured  { background-image: url(../images/shadow-left.png);  background-repeat: repeat-y; background-position: right center; }
.rightOfFeatured { background-image: url(../images/shadow-right.png); background-repeat: repeat-y; background-position: left  center; }

结论

就是这样，朋友们。尝试重现我认为很棒的东西对我来说很有趣，但只是以“这是我将如何做”的方式，而不是查看他们的任何代码。如果您时间允许，我强烈推荐这种练习。

查看演示   下载文件