Is This A Valid Use Of A Table? Is There A Better Alternative?

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

Solution 1:

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%).

Solution 2:

Absolutely not. This is a classic case of "using tables for layout", which is typically a sign of ignorance of better means - not that that's a bad thing, just means you have things to learn ;)

Use <span> (or <a>) with display:inline-block instead. Apply a percentage width to these elements so you can continue to adjust the width of the container dynamically (percentage should be (100 / number_of_spans) which can be calculated easily enough)