DIV 대신 테이블

DIV 대신 테이블

---

가능한 중복 :
HTML 레이아웃에 테이블을 사용하지 않는 이유는 무엇입니까?

HTML 코딩에서 DIV 대신 테이블을 선택해야하는 조건은 무엇입니까?

---

"Tables vs Divs"전체가이 마크를 간신히 놓치고 있습니다. "table"또는 "div"가 아닙니다. 시맨틱 HTML을 사용하는 것에 관한 것입니다.

div 태그조차도 잘 정리 된 페이지에서 작은 부분 만 재생합니다. 그것을 과도하게 사용하지 마십시오. html을 올바르게 결합하면 그렇게 많은 것이 필요하지 않습니다. 목록, 필드 세트, 범례, 레이블, 단락 등은 div 또는 span이 종종 달성하는 데 사용되는 대부분을 대체 할 수 있습니다. Div는 논리적 인 div 를 나타내는 것이 의미가있을 때 주로 사용되어야하며 반드시 필요한 경우 추가 레이아웃에만 적합해야합니다. 테이블에서도 마찬가지입니다. 테이블 형식의 데이터가있을 때는 사용하지만 그렇지 않은 경우에는 사용하십시오.

그런 다음보다 의미있는 페이지가 있으며 CSS에 정의 된 클래스가 많이 필요하지 않습니다. 대신 직접 태그를 타겟팅 할 수 있습니다. 아마도 가장 중요한 것은 Google에서 동등한 표 또는 div가 많은 페이지보다 (점수 적으로) 더 나은 페이지를 얻는 페이지를 가지고 있다는 것입니다. 무엇보다도 청중의 일부와 더 잘 연결하는 데 도움이됩니다.

다시 돌아가서 table vs div의 관점에서 살펴보면 실제로 div가 과도하게 사용되고 테이블이 과소 사용되는 시점에 도달했다고 생각합니다. 왜? 실제로 생각할 때 간과되는 경향이있는 "표 데이터"범주에 속하는 많은 것들이 있기 때문입니다. 예를 들어이 웹 페이지에 대한 답변과 의견. 이들은 각각 동일한 필드 세트를 가진 여러 레코드로 구성됩니다. 심지어 큰 소리로 외치기 위해 SQL 서버 테이블에 저장됩니다. 이것은 테이블 형식 데이터의 정확한 정의입니다. 이것은 html 테이블 태그가 스택 오버플로의 게시물과 같은 것을 레이아웃하는 데 의미 론적 선택이 될 것임을 의미합니다. 같은 원칙이 다른 많은 것들에도 적용됩니다. 테이블 태그를 사용하여 3 개의 열 레이아웃을 설정하는 것은 좋지 않습니다.

---

내가 제시하는 데이터가 실제로 테이블 형식 일 때.

일부 웹 디자이너가 일부 사이트의 테이블 형식 데이터에 div를 사용했다는 것은 우스운 일입니다.

다른 용도로는 양식, 특히 레이블 : 텍스트 상자 쌍이 있습니다. 이것은 기술적으로 div 상자에서 수행 할 수 있지만 테이블 에서이 작업을 수행하는 것이 훨씬 쉽고 훨씬 쉽습니다. label : textbox 쌍은 실제로 테이블 형식이라고 주장 할 수 있습니다.

---

나는 순수한 CSS를 사용했지만 하이브리드 테이블 / CSS 접근 방식을 가장 실용적인 접근 방식으로 선호하는 추구를 포기했습니다. 아이러니하게도, 접근성 때문이기도합니다. Sidekick에서 CSS를 사용해 본 적이 있습니까? 악몽이야! CSS 기반 웹 사이트가 새로운 브라우저에서 어떻게 렌더링되는지 본 적이 있습니까? CSS를 꺼야 할 때 요소가 겹치거나 올바르게 표시되지 않습니다. CSS 기반 웹 사이트의 크기를 조정 해 본 적이 있습니까? 브라우저에서 확대 / 축소 기능을 사용하는 경우 끔찍하고 종종 맹인에게 해가됩니다! 테이블로 그렇게하면 훨씬 더 잘 확장됩니다. 사람들이 내게 필요한 옵션에 대해 이야기 할 때, 많은 사람들이 실마리가없고, 장애가 있고 장애인이 아니기 때문에 나를 귀찮게합니다. 그들은 실제로 장님과 함께 일했습니까? 귀머거리? 접근성이 주요 관심사 인 경우 비디오의 99 %가 자막을 사용하지 않는 이유는 무엇입니까? 많은 CSS 순수 주의자들은 AJAX를 사용하지만 AJAX는 종종 내용에 액세스 할 수 없다는 것을 깨닫지 못합니다.

실제로 셀이 스택 된 경우 (휴대폰에서 볼 수있는) 논리적 흐름으로 정보를 제공 할 때 단일 테이블을 LONG과 같은 기본 레이아웃으로 사용하는 것이 좋습니다. CSS 이론 은 너무도 많은 해킹, "순도"의 이상에 위배되는 실제 생활에서 부분적으로 실행 가능하게 들립니다 .

테이블 접근 방식으로 CSS를 사용했기 때문에 웹 사이트를 디자인하는 데 많은 시간을 절약했으며 유지 관리가 훨씬 쉽습니다. 해킹이 적고 직관적입니다. "DIV를 삽입했는데 이제 모두 망쳤습니다!" 더 중요한 것은 접근성 문제가 전혀 없다는 것입니다.

---

일반적으로 레이아웃을 제공하기 위해 테이블을 사용하지 않을 때마다.

테이블-> 데이터

div-> 레이아웃

(주로)

---

참고 : 질문을 받았을 때 일부 레이아웃 목적으로 테이블을 사용하는 실질적인 이유가있었습니다. 브라우저 개선으로 인해 더 이상 필요하지 않으므로 답변을 업데이트했습니다.

<table>데이터가 논리적으로 2 차원 구조를 갖는 경우 HTML 요소를 사용해야합니다. 데이터를 행과 열로 구성 할 수 있고 행과 열 모두에 헤더를 의미있게 적용 할 수 있다면 테이블 형식의 데이터가있을 수 있습니다.

나는 단일 행 또는 단일 열의 데이터 만 가지고 있으며 테이블 형식의 데이터가 아니라 선형적인 내용입니다. 테이블 형식 데이터로 간주 되려면 적어도 두 개의 행과 두 개의 열이 필요합니다.

몇 가지 예 :

사이드 바 및 페이지 머리글 / 바닥 글 배치에 테이블 사용 이것은 테이블 형식의 데이터가 아니라 페이지 레이아웃입니다. CSS 그리드 또는 flexbox와 같은 것이 더 적절합니다.

신문 스타일 열에 테이블 사용. 이것은 테이블 형식의 데이터가 아닙니다. 여전히 선형으로 읽습니다. CSS 열과 같은 것이 더 적절합니다.

---

공개 웹 사이트의 HTML (no-no-no, divs yes-yes-yes 테이블)과 semi-public 또는 private 웹 응용 프로그램의 HTML을 구별하고 페이지 레이아웃에도 테이블을 선호하는 경향이 있습니다.

"테이블이 나쁜"이유는 대부분 공개 웹 사이트에만 문제가되지만 웹앱에는 큰 문제가되지 않습니다. 복잡한 CSS + DIV보다 TABLE을 사용하여 동일한 레이아웃을 얻을 수 있고 브라우저에서보다 일관된 모양을 가지면 일반적으로 TABLE을 승인합니다.

---

많은 포스터가 이미 언급했듯이 테이블 데이터를 표시하려면 테이블을 사용해야합니다.

HTML 3.2 에 소개 된 표는 사용법에 대한 사양의 관련 단락입니다.

[표]는 표 형식의 재료를 마크 업하거나 레이아웃 목적으로 사용할 수 있습니다 ...

---

토마스와 동의하십시오-일반적으로 스프레드 시트에 의미가 있다면 테이블을 사용할 수 있습니다. 그렇지 않으면 아닙니다.

페이지의 레이아웃으로 테이블을 사용하지 마십시오. 사람들이 가지고있는 주요 문제입니다.

---

양식의 테이블에 대한 인수를 볼 수 있지만 더 좋은 대안이 있습니다 ... 소매를 올리고 CSS를 배우면됩니다.

예를 들면 다음과 같습니다.

<fieldset>
  <legend>New Blog Post</legend>

  <label for="title">Title:</label>
  <input type="text" name="title" />

  <label for="body">Body:</label>
  <textarea name="body" rows="6" cols="40">
  </textarea>
</fieldset>

해당 HTML을 가져 와서 나란히 레이블 또는 텍스트 상자 위에 레이블을 배치 할 수 있습니다 (더 쉽습니다). 유연성을 갖는 것이 실제로 도움이됩니다. 또한 테이블에 해당하는 HTML보다 HTML이 적습니다.

For some excellent examples of CSS forms, check out these excellent examples:

http://jeffhowden.com/code/css/forms/

http://www.sitepoint.com/article/fancy-form-design-css/

http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/

---

I will usually opt for tables to display form-type information (First Name, Last Name, Address, etc.) where lining labels and fields across multiple rows is important. DIVs I use for layout.

Of course the table is wrapped in a DIV :)

---

Tables were designed for tabular content, not for layout.

So, don't ever feel bad if you use them to display data.

---

I use tables in two cases:

1) Tabular data

2) Any time I want my layout to dynamically size itself to its contents

---

If your data can be laid out in a two-dimensional grid, use <table>. If it can't, don't. Using <table> for anything else is a hack (though frequently not one with proper alternatives, especially when it comes to compatibility with older browsers). Not using <table> for something that clearly should be one is equally bad. <div> and <span> aren't for everything; in fact, being completely meaningless on a semantic level, they are to be avoided at all costs in favor of more semantic alternatives.

---

On this subject, I thought this site was pretty funny.

---

1) For displaying tabular data. A calendar is one example of tabular data that isn't always obvious at first.

2) I work for a medical billing company, and nearly all of the layout for our internal work is done using CSS. However, from time to time we get paper forms from insurance companies that our billers have to use, and a program will convert them to an html format that they can fill out and print via the intranet. To make sure the forms are accepted they need to match the original paper version very closely. For these it's just simple to fall back to tables.

---

Tables are used for tabular data. If it makes sense to put it in a spreadsheet then use a table. Otherwise there is a better tag for you to be using such as div, span, ul, etc.

---

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.

참고URL : https://stackoverflow.com/questions/30251/tables-instead-of-divs