테이블을 사용하지 말아야 할 때

Question

많은 세부 사항으로 CSS 전용 배지를 만들려고했습니다. 그 내용은 이것과 같았습니다.

**General Details:** 
ID no(6digit number) 
Date of Joining 
Group 
Sub Group 

**Personal Details** 
Name 
Date of Birth 
Gender 
**Referrer Details** 
Name of Referrer 
URI 
and so on 

내가 <UL> < 리 >를 사용하고 해당 스타일을 사용하여 시도, 나는 그러나 내가 일관된 모양을 얻을 수 없었다, 사업부 및 스팬과 같은 시도했다. 마침내 나는 테이블에 가야했다. 이제 적어도 데이터가 균일하게 나타나지만 테이블이 아닌 데이터에 테이블을 사용하고 있기 때문에 짜증납니다. CSS로 구조화 된 레이아웃을 설계하는 쉬운 방법이 있습니까?

Answer 1

CSS로 구조 레이아웃을 디자인 할 수있는 간단한 방법이 있을까요?

정말로 시간을 투자 한 후에. CSS 은 간단하지만처럼 보입니다. 그러나 복잡한 레이아웃을 구성하기 위해 기본 요소를 사용하면 다양한 렌더링 엔진의 특징을 익히고 익숙하게 진행할 수 있습니다. 예전보다 훨씬 쉬우 며 grid systems도 도움이 될 수 있지만 투자가 필요합니다. royal road은 없습니다. 당신이 & 7 IE 6을 지원하지 않는 경우

, 당신은 (값 table-cell, table-row와, 그리고 table) CSS display rules를 사용하여 멀리 얻을 수 있습니다. 그러면 마크 업과 함께 테이블과 같은 레이아웃 동작을 많이 얻을 수 있습니다.

그러나 표 형식이 아닌 표식에 표 표식을 사용하면 실제로는 crossing the streams 또는 그 밖의 것이 없습니다. 의미의 상실에 대한 많은 handwringing은 과장된 것입니다. Lynx은 적어도 1999 년 이래 heuristics to make distinctions between layout and semantic tables을 사용할 수있었습니다. 일부 스크린 리더도이 작업을 수행합니다. 실제로 말이죠. 우리가 테이블 배치를 사용하기 전에 테이블 레이아웃이 사라질 때까지 기다렸다가 시작하면됩니다. 시맨틱 웹을 사용하지 않거나 눈먼 사람들을 차버린 채로 사용하지 않는다면 죄책감을 느끼지 않아도됩니다. CSS 포지셔닝은 도구이며, 종종 좋은 것입니다. 그러나 사용중인 기술/리소스와 함께 목표에 맞지 않으면 테이블 마크 업을 자유롭게 사용하십시오.

테이블 마크 업을 사용하는 경우에는 class="layout"을 입력하는 것이 좋습니다. 그것은 당신의 스타일 시트에 테이블 스타일의 일부를 넣는 핸들을 제공하고, 당신이하고있는 것을 다른 개발자에게 알려주고, 심지어 사용 도구가 언젠가는 의미/레이아웃을 쉽게 구분할 수 있도록합니다. 또한 테이블을 중첩하지 마십시오. 실제로 시도하면 피할 수 있습니다. 표를 사용하여 깨끗하고 읽기 쉽고 편집 가능한 마크 업을 가질 수는 있지만, 네가 둥지를 틀면 악의적 인 일이 생길 확률은 극적으로 높아집니다.

Answer 2

이 데이터는 테이블에 넣을만큼 충분한 테이블이라고 생각합니다. 허세 부리는 개발자 만이 불평 할 것입니다. 최종 사용자는 그 차이를 결코 알지 못할 것입니다. 어떤 방법 으로든 CSS 레이아웃을 작성하는 데 47 분 이상 소요되지 않습니다. http://giveupandusetables.com/

Answer 3

당신은 절대적으로 원하는 위치로 각 요소를 배치 할 수 있습니다 :

li.general { 
position:absolute; 
top: 10px; 
left: 20px; 
} 
...