这是一个有效的使用表吗？有更好的选择吗？ [英] Is this a valid use of a table? Is there a better alternative?

问题描述

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

我在这里写了一个使用表格的工作解决方案（ 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/ ）。他们工作得很好，所以非常感谢！

/ code>用于表格数据以外的任何其他功能。

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

用你的表格和表格单元格替换使用 display的元素： table 和 display：table-cell ，您将得到相同的结果，并带有更好的标记。

以下是一个jsFiddle示例： http：// jsfiddle。 net / r9AgB / 1 /

如果您必须支持不适用于的较旧浏览器，请使用display：table-cell ，根据所需的数量在< a> 元素上设置百分比宽度。 CSS支持十进制百分比值（1.234％）。

I have a few pages on a site where I need to allow the user to select a color from a list of colors. The list is loaded from a database and can have any number of colors in it. The exact size of the control depends on the page. I know there are great plug ins available to select colors but I built this based on a design. (Read: I can't use third party controls)

I wrote a working solution using a table here (http://jsfiddle.net/Cfj4T/1/). Main purpose in this example is to show that I can change the width of the entire color select by just setting a width on the container:

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

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

The question is: Is this a wrong use of a table? Is there a solution that would use css on the "a" tags or div elements instead? What would that look like?

Note - The example was generated by angular and copied into JSFiddle so don't read too much into the extra attributes in the "a" tags.

All Options In One Place: - In case anyone wants to see the answers so far I have put them all into the original JSFiddle (http://jsfiddle.net/Cfj4T/6/). They work really well, so thanks to all!

解决方案

Don't use <table> for anything other than tabular data.

The reason is that now you can get all of the benefits of table-style layout with modern CSS, and your document will be semantically correct which is nice for tools such as screen-readers.

Replace your tables and table cells with elements that use display: table and display: table-cell and you'll get the same result with nicer markup.

Here's a jsFiddle example: http://jsfiddle.net/r9AgB/1/

If you have to support older browsers that don't work with display: table-cell, set a percentage width on the <a> elements depending on the number required. CSS supports decimal percentage values (1.234%).

这篇关于这是一个有效的使用表吗？有更好的选择吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！