DIV 대신 테이블 [중복]
https://stackoverflow.com/questions/30251
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
가능한 중복 :
HTML의 레이아웃에 표를 사용하지 않는 이유는 무엇입니까?
HTML 코딩에서 DIV 대신 테이블을 선택해야하는 조건은 무엇입니까?
해결책
전체 "테이블 대 사업부"는 거의 실패합니다. "table"이나 "div"가 아닙니다. 시맨틱 HTML을 사용하는 것입니다.
div 태그조차도 잘 구성된 페이지에서 작은 역할을합니다. 과용하지 마십시오. html을 올바르게 조합하면 그렇게 많이 필요하지 않습니다. 목록, 필드 세트, 범례, 레이블, 단락 등과 같은 것은 div 또는 범위가 수행하는 데 자주 사용되는 대부분을 대체 할 수 있습니다. Div는 주로 논리적 div 를 나타내는 것이 합리적 일 때 사용되어야하며 절대적으로 필요한 경우에만 추가 레이아웃에 적합합니다. 테이블도 마찬가지입니다. 표 형식 데이터가있을 때 사용하지만 그렇지 않은 경우에는 사용하지 마십시오.
그러면 더 의미있는 페이지가 생기고 CSS에 정의 된 많은 클래스가 필요하지 않습니다. 대신 태그를 직접 타겟팅 할 수 있습니다. 아마도 가장 중요한 것은 동등한 테이블이나 div가 많은 페이지보다 Google에서 훨씬 더 높은 점수를 얻을 수있는 페이지 (반복적으로)가 있다는 것입니다. 무엇보다 잠재 고객의 일부와 더 잘 소통하는 데 도움이됩니다.
다시 돌아가서 테이블 대 div 측면에서 살펴보면 실제로 div가 과도하게 사용되고 테이블이 과소 사용되는 지점에 도달 한 것 같습니다. 왜? 왜냐하면 당신이 정말로 그것에 대해 생각할 때, 간과되는 경향이있는 "표 형식 데이터"의 범주에 속하는 많은 것들이 거기에 있기 때문입니다. 예를 들어, 바로이 웹 페이지에 대한 답변과 댓글이 있습니다. 이들은 각각 동일한 필드 세트를 가진 여러 레코드로 구성됩니다. 큰 소리로 울기 위해 SQL 서버 테이블에도 저장됩니다. 이것은 테이블 형식 데이터의 정확한 정의입니다. 이는 html 테이블 태그가 여기 Stack Overflow의 게시물과 같은 레이아웃에 절대적으로 좋은 의미 론적 선택이 될 것임을 의미합니다. 같은 원칙이 다른 많은 것들에도 적용됩니다. 테이블 태그를 사용하여 3 열 레이아웃을 설정하는 것은 좋지 않을 수 있지만 그리드 및 목록에 사용하는 것은 확실히 괜찮습니다 ... 물론 실제로 ol 또는 ul을 사용할 수있는 경우를 제외하고는 목록) 태그.
다른 팁
제가 제시하는 데이터가 실제로 표 형식 인 경우입니다.
일부 웹 디자이너가 일부 사이트의 표 형식 데이터에 div를 사용하는 것이 우스꽝 스럽습니다.
다른 용도로는 양식, 특히 레이블 : 텍스트 상자 쌍이 있습니다.기술적으로는 div 상자에서 수행 할 수 있지만 테이블에서 수행하는 것이 훨씬 더 쉽고 레이블 : 텍스트 상자 쌍이 사실상 테이블 형식이라고 주장 할 수 있습니다.
예전에는 순수한 CSS를 사용했지만 가장 실용적인 접근 방식으로 하이브리드 테이블 / css 접근 방식을 선호하여 그 추구를 포기했습니다. 아이러니하게도 접근성 때문이기도합니다. Sidekick에서 CSS를 사용해 본 적이 있습니까? 얼마나 악몽인가! CSS 기반 웹 사이트가 새 브라우저에서 어떻게 렌더링되는지 본 적이 있습니까? CSS를 꺼야했기 때문에 요소가 겹치거나 올바르게 표시되지 않습니다. CSS 기반 웹 사이트의 크기를 조정 해 본 적이 있습니까? 그들은 브라우저에서 확대 / 축소 기능을 사용하면 끔찍하고 맹인에게 해로운 것처럼 보입니다! 테이블을 사용하면 훨씬 더 잘 확장됩니다. 사람들이 접근성에 대해 이야기 할 때, 많은 사람들이 단서가 없다는 것을 알게되었고 장애가 있고 그렇지 않기 때문에 짜증이납니다. 그들은 정말로 맹인과 함께 일했습니까? 귀머거리? 접근성이 주요 관심사라면 왜 비디오의 99 %가 자막이 없는가? 많은 CSS 순수 주의자들은 AJAX를 사용하지만 AJAX가 종종 콘텐츠에 액세스 할 수 없게 만든다는 사실을 깨닫지 못합니다.
사실상, 셀이 쌓여있는 경우 논리적 흐름으로 정보를 제공하기 때문에 단일 테이블을 기본 레이아웃으로 사용하는 것이 좋습니다 (모바일에서 볼 수있는 것). CSS 이론은 훌륭하지만 부분적으로 너무 많은 해킹을 통해 실생활에서 실행 가능하며 "순수"라는 이상에 위배됩니다.
표와 CSS를 사용한 이후로 웹 사이트를 디자인하는 데 많은 시간을 절약했고 유지 관리가 훨씬 쉬워졌습니다. 더 적은 해킹, 더 직관적입니다. 사람들로부터 "DIV를 삽입했는데 이제 모든 것이 망가진 것 같습니다!"라는 전화를 덜받습니다. 더 중요한 것은 접근성 문제가 전혀 없다는 것입니다.
일반적으로 레이아웃을 제공하기 위해 표를 사용하지 않을 때마다
표-> 데이터
사업부-> 레이아웃
(주로)
참고 : 질문을 받았을 당시 일부 레이아웃 용도로 표를 사용하는 실용적인 이유가있었습니다. 브라우저 개선으로 인해 더 이상 필요하지 않으므로 답변을 업데이트했습니다.
HTML <table>-elements는 데이터가 논리적으로 2 차원 구조를 가질 때 사용되어야합니다. 데이터를 행과 열로 구성 할 수 있고 헤더를 행과 열 모두에 의미있게 적용 할 수 있다면 테이블 형식 데이터가있을 수 있습니다.
데이터의 단일 행 또는 단일 열만있는 경우 표 형식 데이터가 아니라 선형 콘텐츠 일뿐입니다. 표 형식 데이터로 간주 되려면 최소 2 개의 행과 2 개의 열이 필요합니다.
예 :
표를 사용하여 사이드 바 및 페이지 머리글 / 바닥 글 배치. 이것은 표 형식의 데이터가 아니라 페이지 레이아웃입니다. CSS 그리드 또는 플렉스 박스와 같은 것이 더 적합합니다.
표를 신문 스타일 칼럼에 사용. 이것은 표 형식의 데이터가 아닙니다. 여전히 선형 적으로 읽을 것입니다. CSS 열과 같은 것이 더 적절합니다.
공용 웹 사이트 용 HTML (tables no-no-no, divs yes-yes-yes)과 페이지 레이아웃 용으로도 표를 선호하는 반 공용 또는 비공개 웹 애플리케이션 용 HTML을 구분합니다.
'표가 나쁘다'는 존경할만한 대부분의 이유는 일반적으로 공개 웹 사이트에서만 문제가되지만 웹앱에서는 그다지 문제가되지 않습니다.복잡한 CSS + DIV보다 TABLE을 사용하여 동일한 레이아웃을 얻고 브라우저간에 더 일관된 모습을 가질 수 있다면 일반적으로 계속해서 TABLE을 앞지 릅니다.
많은 포스터가 이미 언급했듯이 표 형식 데이터를 표시하려면 표를 사용해야합니다.
표는 HTML 3.2 에 도입되었습니다. 여기에 관련 단락이 있습니다.사용 사양 : <인용구>
[tables]는 표 형식의 자료를 마크 업하거나 레이아웃 목적으로 사용할 수 있습니다 ...
Thomas와 동의합니다. 일반적인 경험 법칙은 스프 리드 시트에서 의미가 있다면 테이블을 사용할 수 있다는 것입니다.그렇지 않으면 아닙니다.
페이지 레이아웃으로 표를 사용하지 마세요. 이것이 사람들이 표를 가지고있는 주요 문제입니다.
양식에 대한 표에 대한 주장을 볼 수 있지만 더 좋은 대안이 있습니다. 소매를 걷어 올리고 CSS를 배우기 만하면됩니다.
예 : 라코 디스
HTML을 가져 와서 나란히 배치 된 레이블 또는 텍스트 상자 위에 레이블을 배치 할 수 있습니다 (더 쉬움).유연성이 있으면 정말 도움이됩니다.또한 둘 중 하나에 해당하는 표보다 HTML이 적습니다.
CSS 양식의 몇 가지 훌륭한 예를 보려면 다음 훌륭한 예를 확인하십시오.
http://jeffhowden.com/code/css/forms/
http://www.sitepoint.com/article/fancy-양식-디자인 -css /
http : //www.smashingmagazine.com / 2006 / 11 / 11 / css-based-forms-modern-solutions /
일반적으로 여러 행에 레이블과 필드를 정렬하는 것이 중요한 양식 유형 정보 (이름, 성, 주소 등)를 표시하는 표를 선택합니다.레이아웃에 사용하는 DIV
물론 테이블은 DIV로 래핑됩니다. :)
표는 레이아웃이 아닌 표 형식의 콘텐츠를 위해 디자인되었습니다.
따라서 데이터를 표시하는 데 사용한다고해서 기분 나빠하지 마십시오.
표를 두 가지 경우에 사용합니다.
1) 표 형식 데이터
2) 레이아웃이 내용에 맞게 동적으로 크기를 조정하고 싶을 때
데이터를 2 차원 그리드로 배치 할 수있는 경우 <table>를 사용하세요.할 수 없다면하지 마십시오.다른 모든 것에 <table>를 사용하는 것은 해킹입니다 (특히 이전 브라우저와의 호환성과 관련하여 적절한 대안이없는 경우가 많음).명확하게 하나 여야하는 항목에 대해 <table>를 사용하지 않는 것도 똑같이 나쁩니다.<div>와 <span>가 모든 것을위한 것은 아닙니다.사실, 의미 론적 수준에서 완전히 무의미하기 때문에 더 많은 의미 론적 대안을 선호하기 위해 어떤 대가를 치르더라도 피해야합니다.
이 주제에 대해 이 사이트가 꽤 재미 있다고 생각했습니다.
1) 표 형식 데이터를 표시합니다.달력은 처음에는 항상 명확하지 않은 표 형식 데이터의 한 예입니다.
2) 저는 의료 청구 회사에서 일하고 있으며 내부 작업을위한 거의 모든 레이아웃이 CSS를 사용하여 이루어집니다.그러나 때때로 우리는 보험 회사로부터 청구서가 사용해야하는 종이 양식을받으며 프로그램은 인트라넷을 통해 작성하고 인쇄 할 수있는 html 형식으로 변환합니다.양식이 수락되었는지 확인하려면 원본 종이 버전과 매우 밀접하게 일치해야합니다.이를 위해 테이블로 돌아가는 것은 간단합니다.
표는 표 형식 데이터에 사용됩니다.스프레드 시트에 넣는 것이 타당하다면 표를 사용하십시오.그렇지 않으면 div, span, ul 등과 같은 더 나은 태그가 있습니다.
I believe just tabular content. For example, if you printed out a database table or spreadsheet-like data to HTML.
If you would like to have semantically correct HTML, then you should use tables only for tabular data.
Otherwise you use tables for everything you want, but there probably is a way to do the same thing using divs and CSS.
@Marius:
Is the layout tabular data? No, while it was standard a few years ago it's not now :-)
One other use I would have for it would be forms, particularly label : textbox pairs. This could technically be done in div boxes, but it's much, much easier to do this in tables, and one can argue that label:textbox pairs are in fact tabular in nature.
I tend to give the label a fixed width, or display it on the line above.
@Jon Limjap
For label : textbox, neither divs nor tables are appropriate: <dl>s are
One other use I would have for it would be forms, particularly label : textbox pairs. This could technically be done in div boxes, but it's much, much easier to do this in tables, and one can argue that label:textbox pairs are in fact tabular in nature.
I see that a fair amount, especially among MS developers. And I've done it a fair amount in the past. It works, but it ignores some accessibility and best-practice factors. You should use labels, inputs, fieldsets, legends, and CSS to layout your forms. Why? Because that's what they are for, it's more efficient, and I think accessibility is important. But that's just my personal preference. I think everyone should try it that way first before condemning it. It's quick, easy, and clean.
When ever a page containg tables is loaded by any browser it takes more time for the browser to render properly the tag. Where as if the div is used ,the browser takes less time as it is lighter. And more over we can apply the css to make the divs appear as table,
The tables are normally heavy wieght and div are light weight.
It is clear that the DIV are used for Layout but It happened to me to being "forced" to use spreadsheets to do a grid layout within a div structure for this reasons:
the addition of percentage values did not allow a proper alignment with the div, while the same values expressed on cells of tables gave the expected result.
So I think that tables are still useful not only for data, but also for the situation above, on top of that, tables are still W3C compliant browser and alternative browsers (for the disabled for example) interpret theirs correctly.
Divs are simple divisions, they are mean't to be used to group sections of the page that are in a semantic sense linked. They carry no implicit meaning other than that.
Tables were originally intended to display scientific data, such as lab results on screen. Dave Raggett certainly didn't intend them to become used to implement layout.
I find it keeps it fairly clear in your mind if you remember the above, if its something you would normally expect to read in a table, then that's the appropriate tag, if its pure layout, then use something else to accomplish your needs.
