这是表的有效用法吗？有更好的选择吗？

Question

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

我写了一个在这里使用表的工作解决方案（http://jsfiddle.net/Cfj4T/1/）。在这个例子主要目的是为了证明我可以改变整个颜色的宽度仅通过设置在容器上的宽度选择：

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

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

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

注意 - 该示例由角度生成并复制到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％）。