jquery - 这是对表格的有效使用吗？有更好的选择吗？

Question

我在网站上有几个页面需要允许用户从颜色列表中选择一种颜色。该列表是从数据库中加载的，并且可以包含任意数量的颜色。控件的确切大小取决于页面。我知道有很棒的插件可供选择颜色，但我是根据设计构建的。 (阅读:我不能使用第三方控件)

我在此处使用表格 (http://jsfiddle.net/Cfj4T/1/) 编写了一个可行的解决方案。这个例子的主要目的是展示我可以通过在容器上设置宽度来改变整个颜色选择的宽度:

div.select-large {
    width: 560px;
}

div.select-small {
    width: 280px;
}

问题是:这是对表格的错误使用吗？有没有一种解决方案可以在“a”标签或 div 元素上使用 css？那会是什么样子？

注意 - 该示例由 angular 生成并复制到 JSFiddle 中，因此不要过度解读“a”标签中的额外属性。

一个地方的所有选项: - 如果有人想看到到目前为止的答案，我已将它们全部放入原始 JSFiddle ( http://jsfiddle.net/Cfj4T/6/ )。他们工作得很好，所以感谢所有人!

Answer 1

不要使用 <table>对于表格数据以外的任何内容。

原因是现在您可以使用现代 CSS 获得表格样式布局的所有好处，并且您的文档在语义上将是正确的，这对于屏幕阅读器等工具非常有用。

用使用 display: table 的元素替换您的表格和表格单元格和 display: table-cell并且您将通过更好的标记获得相同的结果。

这是一个 jsFiddle 示例:http://jsfiddle.net/r9AgB/1/

如果您必须支持不支持 display: table-cell 的旧版浏览器, 在 <a> 上设置百分比宽度元素取决于所需的数量。 CSS 支持小数百分比值 (1.234%)。