HTML로 양식을 표시할 때 테이블 태그를 사용하는 것은 잘못된 설계입니까?
문제
계속 그 말이 들려오네요 div
태그는 레이아웃 목적으로 사용해야 하며 table
태그.그러면 양식 레이아웃에도 적용됩니까?양식 레이아웃이 여전히 레이아웃이라는 것을 알고 있지만 다음을 사용하여 양식 레이아웃을 만드는 것처럼 보입니다. div
더 많은 것이 필요합니다 html
그리고 css
.따라서 이를 염두에 두고 양식 레이아웃에서 다음을 사용해야 합니다. div
대신 태그?
해결책
예, 양식 레이아웃에 적용됩니다.양식에 구조를 추가하기 위해 특별히 존재하는 FIELDSET 및 LABEL과 같은 태그도 있으므로 실제로 DIV를 사용하는 문제는 아닙니다.최소한의 HTML로 양식을 마크업하고 나머지 작업은 CSS에 맡길 수 있어야 합니다.예:
<fieldset>
<div>
<label for="nameTextBox">Name:</label>
<input id="nameTextBox" type="text" />
</div>
...
</fieldset>
다른 팁
나는 양식이 좋은 HTML과 CSS로 멋지게 레이아웃하기가 "어렵다"는 것은 신화라고 생각합니다.CSS가 레이아웃에 대해 제공하는 제어 수준은 투박한 테이블 기반 레이아웃보다 훨씬 뛰어납니다.이것은 새로운 아이디어가 아닙니다. 이 스매싱 매거진 기사 2006년 쇼부터요.
나는 내 양식에 다음 마크업의 변형을 사용하는 경향이 있습니다.내 CSS에는 일반 .form 스타일이 있고 텍스트 입력, 확인란, 선택, 텍스트 영역 등에 대한 변형이 있습니다.
.field label {
float: left;
width: 20%;
}
.field.text input {
width: 75%;
margin-left: 2%;
padding: 3px;
}
<div class="field text">
<label for="fieldName">Field Title</label>
<input value="input value" type="text" name="fieldName" id="fieldName" />
</div>
테이블은 나쁘지 않습니다.이는 표 형식의 데이터를 표시해야 할 때 가장 좋은 옵션입니다.양식 IMHO는 표 형식의 데이터가 아닙니다. 이는 양식이며 CSS는 원하는 대로 양식을 레이아웃할 수 있는 충분한 도구를 제공합니다.
단순히 행 열 그립 유형 레이아웃이 필요한 경우 테이블을 사용하면 죄책감을 느낄 필요가 없습니다.CSS가 아니라는 이유만으로 누가 그 디자인을 '나쁜 디자인'이라고 부를 수 있는지 모르겠습니다.나는 본 적이 많은 나쁜 CSS 기반 디자인.저는 CSS를 좋아하고 전통적인 중첩 테이블 레이아웃보다 여러 면에서 훨씬 우수하다고 생각합니다. 하지만 가장 효과적인 것과 유지 관리가 가장 쉬운 것을 수행하고 더 중요하고 영향력 있는 결정으로 넘어갑니다.
일반적인 원칙은 의도한 의미론적 콘텐츠를 가장 잘 전달하는 HTML 요소를 사용하고 CSS를 사용하여 해당 의미론적 콘텐츠를 시각적으로 표현한다는 것입니다.이 원칙을 따르면 보다 쉬운 사이트 일반 시각적 변경, 검색 엔진 최적화, 다중 장치 레이아웃 및 접근성을 비롯한 많은 본질적인 이점을 얻을 수 있습니다.
따라서 짧은 대답은 다음과 같습니다.원하는 것은 무엇이든 할 수 있지만 모범 사례에서는 표 형식의 데이터를 나타내기 위해 표 태그만 사용하고 대신 표현하려는 내용을 가장 잘 전달하는 HTML 태그를 사용하는 것이 좋습니다.처음에는 조금 더 어려울 수도 있지만 일단 아이디어에 익숙해지면 왜 다른 방식으로 했는지 궁금해하게 될 것입니다.
양식으로 수행하려는 작업에 따라 의미 체계 마크업과 CSS를 사용하는 데 더 많은 마크업이 필요하지 않습니다. 특히 CSS의 계단식 속성에 의존하는 경우 더욱 그렇습니다.또한 사이트의 여러 페이지에 동일한 양식이 여러 개 있는 경우 코드 및 유지 관리 측면에서 의미론적 접근 방식이 훨씬 더 효율적입니다.
가능한 한 접근하기 쉽고 의미상 올바른 양식을 만들기 위해 다음 형식을 사용합니다.
<fieldset>
<ol>
<li>
<label for='text_field'>Text Field</label>
<input type='text' name='text_field' id='text_field' />
</li>
</ol>
</fieldset>
나는 CSS가 드래그가 될 때까지 주로 CSS를 사용합니다.예를 들어 CSS보다 테이블을 사용하여 3개 이상의 열(라벨 세트 3개 + 양식 필드) 양식을 만드는 것이 훨씬 쉽습니다.순수 CSS를 사용하면 모든 주요 브라우저에서 레이아웃이 제대로 표시되도록 할 수 없었고 작동하는 데 너무 많은 시간을 소비했습니다.그래서 나사라고 해서 테이블을 이용해서 쉽게 했어요.테이블은 나쁘지 않습니다.
회색지대입니다.마크업의 모든 항목에 경계가 명확하게 정의되어 있는 것은 아니며, 이는 개인 취향에 따라 판단을 내릴 수 있는 경우입니다.이는 데이터가 구성된다는 개념에 맞지 않지만 셀은 여러 축에 걸쳐 관련되어 있으며 이것이 테이블에 적합한지 여부를 결정하는 데 사용하는 경험 법칙입니다.
테이블을 레이아웃하는 데 div보다 table을 사용하는 것이 확실히 더 쉽습니다. 하지만 테이블은 어떤 의미를 가져야 한다는 점을 명심하세요. 테이블은 주어진 순서에 따라 화면에 상자를 배치하는 것 이상으로 사용자가 볼 수 있는 일반적인 방식으로 데이터를 표시하는 것입니다. .일반적으로 양식 레이아웃에서는 div를 사용하여 양식 요소가 표시되는 방식을 결정해야 한다고 생각합니다.
이러한 양식 레이아웃 질문에서 자주 논의되지 않는 한 가지는 양식을 레이아웃하기 위해 테이블을 선택한 경우(답변 중 하나에서 언급한 대로 왼쪽에 레이블이 있고 오른쪽에 필드가 있음) 해당 레이아웃은 다음과 같습니다. 결정된.직장에서 우리는 최근 아랍어로 된 웹 앱에 대한 빠른 '개념 증명'을 수행해야 했습니다.양식 레이아웃을 위해 테이블을 사용한 앱은 기본적으로 중단된 반면, CSS 파일에서 약 10줄을 변경하여 모든 페이지의 모든 양식 필드와 레이블의 순서를 바꿀 수 있었습니다.
양식이 표 형식으로 배치되어 있는 경우(예: 레이블은 왼쪽에, 필드는 오른쪽에) 테이블 태그를 사용하세요.
양식은 "프레젠테이션"이 아닙니다. 데이터를 요청하면 일반적으로 데이터를 제시하지 않습니다.저는 표 형식 데이터에서 인라인 편집을 많이 사용합니다.분명히 나는 프리젠테이션에서 입력으로 전환할 때 데이터셀(td)을 입력 요소의 홀더로 사용합니다.
여기서 본 답변의 대부분은 적절한 것 같습니다.제가 추가하고 싶은 유일한 것은, 특히 Apathetic's나 Mr.Matt가 사용하는 것입니다 <dl>/<dt>/<dd>
.나는 이것이 의미론적으로 목록을 나타낸다고 믿습니다.
<dl>
<dt><label for="nameTextBox">Name:</label></dt>
<dd><input value="input value" type="text" name="fieldName" id="fieldName" /></dd>
</dl>
이러한 스타일을 다시 지정하고 싶을 수도 있지만 이것은 의미상으로 무슨 일이 일어나고 있는지를 말해줍니다. 즉, "용어" 목록이 있다는 것입니다(<dt>
) 및 "정의"(<dd>
), 용어는 레이블이고 정의는 사용자가 입력한 값입니다.