HTML로 양식을 표시할 때 테이블 태그를 사용하는 것은 잘못된 설계입니까?

StackOverflow https://stackoverflow.com/questions/109488

  •  01-07-2019
  •  | 
  •  

문제

계속 그 말이 들려오네요 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>), 용어는 레이블이고 정의는 사용자가 입력한 값입니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top