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

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

我在这里使用表编写了一个工作解决方案（ 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

不要将

用于表格数据以外的任何内容。

原因是现在您可以使用现代CSS获得表格式布局的所有好处，并且您的文档在语义上是正确的，这对于诸如屏幕阅读器之类的工具来说是很好的。

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

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

如果必须支持不能与display: table-cell一起使用的旧浏览器，请根据所需数量在元素上设置百分比宽度。 CSS支持小数百分比值（1.234％）。

Answer 2

绝对不。 这是“使用表格进行布局”的经典案例，这通常表示无知更好的手段 – 不是说这是一件坏事，只是意味着你需要学习的东西;）

使用 （或 ）与display:inline-block代替。 对这些元素应用百分比宽度，以便您可以继续动态调整容器的宽度（百分比应为(100 / number_of_spans) ，可以很容易地计算）