시맨틱 마크 업에 대한 제안

Question

작업중 인 응용 프로그램을위한 웹 GUI를 만들고 있습니다. 이 특정 섹션은 좋은 의미 론적 메이크업 인 더 큰 페이지 내에 있습니다. 그러나 아래 스크린을 의미 적으로 마크 업하기 가장 좋은 옵션이 무엇인지 잘 모르겠습니다.

나의 초기 생각은 divs를 통해 상반부를 하단 절반과 분리하는 것입니다. 따라서 상단에 대한 마크 업은 매우 쉽습니다. 바닥을 떠나는 곳은 내가 그루터기를 느끼는 곳입니다. 가장 쉬운 답변은 테이블이지만이 컨텐츠는 표 형식 데이터 규칙에 유일하게 사용되는 테이블에 쉽게 맞지 않습니다. 특히 헤더 가이 레이아웃에서 눈에 띄게 보일 것임을 고려할 때. 제안?

이 이미지에 대한 시맨틱 마크 업이 필요합니다 http://img183.imageshack.us/img183/2261/semanticmarkup.png

Answer 1

나는 내 의견으로는 이것으로 하단 부분에 테이블을 사용할 것입니다. ~이다 표 데이터. 4 개의 열 (아이콘, 프로젝트 이름, 프로젝트 설명 및 액션 버튼)이 표시됩니다. 이 레이아웃에 테이블을 사용하지 않을 이유가 없습니다 (이 레이아웃 스케일을 올바르게 만들 수있는 다른 접근법은 JavaScript와 많은 두통이 필요하다는 것은 말할 것도 없습니다).

Answer 2

나는 당신이 그 물건을 테이블에 넣으면 그것이 시맨틱 마크 업을 가장 심각하게 위반할 것이라고 생각하지 않습니다. 버튼을 제외하고는 나에게 꽤 표로 보입니다. 나는 CSS 신들이 당신을 방해 할 것이라고 생각합니다 :)

Answer 3

나는 Andrew에 동의합니다. 이것은 테이블 데이터이므로 a를 사용해야합니다 <table> 그러나 테이블 헤더, 열 및 바닥 글을 올바르게 정의해야합니다.

다른 옵션은 당신이 사용할 헤더리스 테이블을 사용하는 것입니다. <div>헤더와 바닥 글 및 a <table> 몸으로. 그러나 나는 이것을하는 것이 좋지 않습니다. 한 가지 이유는 JavaScript를 사용하는 경우 클라이언트 측 분류와 같은 헤더를 원하기 때문입니다.

Answer 4

당신은 그것을 테이블 형태에 넣는 것을 위반하지 않습니다. 물론, 어떤 사람들은 그것에 대해 우는 소리를 내지 만, 당신이 할 수도있는 표 형 데이터에 충분히 가깝습니다.