이것이 유효한 테이블인가요? 더 나은 대안이 있습니까?

Question

사용자가 색상 목록에서 색상을 선택할 수 있도록해야하는 사이트에 몇 페이지가 있습니다. 목록은 데이터베이스에서로드되며 그 안에 여러 색상을 가질 수 있습니다. 컨트롤의 정확한 크기는 페이지에 따라 다릅니다. 색상을 선택하는 데 사용할 수있는 훌륭한 플러그인이 있다는 것을 알고 있지만 디자인을 기반으로 제작했습니다. (읽기 : 타사 컨트롤을 사용할 수 없음)

여기에 표를 사용하여 작업 솔루션을 작성했습니다 (http://jsfiddle.net/Cfj4T/1/). 이 예제의 주요 목적은 내가 전체 색상의 폭이 단지 용기에 폭을 설정하여 선택 변경할 수 있음을 보여주는 것입니다 :

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

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

질문은 :이 테이블의 잘못된 사용인가? 대신 "a"태그 나 div 요소에 CSS를 사용하는 솔루션이 있습니까? 그게 어떻게 생겼어?

주 - 예는 각도에 의해 생성 그래서 "A"태그의 추가 속성에 너무 많이 읽지 않는 JSFiddle에 복사했다. 한 곳에서

모든 옵션 : - 경우에 사람이 지금까지 내가 원래 JSFiddle (http://jsfiddle.net/Cfj4T/6/)에 모두 넣어 한 답변을보고 싶어. 그들은 정말 잘 작동합니다. 덕분에 모두!

Answer 1

<table>을 표 형식 데이터 이외에 사용하지 마십시오.

이제는 최신 CSS로 표 스타일 레이아웃의 모든 이점을 얻을 수 있으며 화면 판독기와 같은 도구에 적합한 문서가 의미 상 정확합니다.

표 및 표 셀을 display: table 및 display: table-cell을 사용하는 요소로 바꾸면 더 멋진 마크 업과 동일한 결과를 얻을 수 있습니다.

당신이 display: table-cell 작동하지 않는 이전 브라우저를 지원해야하는 경우 http://jsfiddle.net/r9AgB/1/이 필요한 수에 따라 <a> 요소 비율 폭을 설정

는 여기 jsFiddle 예입니다. CSS는 10 진수 백분율 값 (1.234 %)을 지원합니다.