TD 내부의 DIV가 나쁜 생각입니까?

143

내가 듣고처럼 / A 어딘가에 읽을 것 <div>(A)의 내부가 <td>노 더 없었다. 작동하지 않는 것이 아니라 디스플레이 유형에 따라 실제로 호환되지 않는 것입니다. 직감을 뒷받침 할 증거를 찾을 수 없으므로 완전히 잘못되었을 수 있습니다.

— jcollum
소스

144

divinstide a를 사용하는 것이 td레이아웃에 테이블을 사용하는 다른 방법보다 나쁘지 않습니다. (어떤 사람들은 레이아웃에 테이블을 사용하지 않으며 그중 하나가됩니다.)

div에서 a 를 사용 td하면 요소의 크기를 어떻게 예측할 수없는 상황에 처하게됩니다. div의 기본값은 부모의 너비를 결정하는 것이고, 테이블 셀의 기본값은 내용의 크기에 따라 크기를 결정하는 것입니다.

div크기 조정 방법에 대한 규칙 은 표준에 잘 정의되어 있지만 크기 조정 방법에 대한 규칙 은 잘 정의되어 td있지 않으므로 브라우저마다 약간 다른 알고리즘을 사용합니다.

— 구파
소스

나는 이것이 직감이 어디에서 왔는지 의심한다. 정리해 주셔서 감사합니다.

— jcollum

9

열의 너비가 미리 지정되어 있으면 문제가되지 않습니다. 브라우저가 너비를 재정의하지 않도록 테이블에 table-layout : fixed를 설정하십시오 (잠재적으로 문제를 일으킬 수 있음)

— Jens Roland

6

그는 레이아웃에 테이블을 사용한다고 말한 적이 없습니다.

— texlate

@texelate table-layout:fixedCSS는 당신이 생각하는 것이 아닙니다. 첫 번째 행의 크기 만 계산하여 테이블을 렌더링 할 때 계산 브라우저의 양을 줄입니다.

— SteveB

73

XHTML DTD를 확인한 후 <TD>-요소에 표제, 목록 및 <DIV>-요소와 같은 블록 요소를 포함 할 수 있음을 발견했습니다. 따라서 <TD>-요소 안에 <DIV>-요소를 사용한다고해서 XHTML 표준을 위반하지는 않습니다. 현대의 다른 HTML 변형에는 <TD> 요소에 해당하는 콘텐츠 모델이 있다고 확신합니다.

관련 DTD 규칙은 다음과 같습니다.

<!ELEMENT td %Flow;>
<!-- %Flow; mixes block and inline and is used for list items etc. -->
<!ENTITY %Flow "(#PCDATA | %block; | form | %inline; | %misc;>
<!ENTITY %block "p | %heading; | div | %lists; | %blocktext; | fieldset | table">

— 마틴 리버 사지
소스

1

이것은 내가 찾던 특정 답변입니다. 친절하게 감사합니다. 오늘 밤에 조금 더 잘 것 같아요.

— 3Dom

PEC가 뒷받침하는 유일한 대답.

— peterchaula

DTD에서이 부분을 설명하는 부분을 공유하십시오. 읽기 쉬운 문서가 아닙니다. 감사!

— redolent

1

@redolent : 답변에 관련 DTD 규칙을 추가했습니다.

— Martin Liversage

XHTML이 아닌 HTML5 사양은 어떻습니까?

— 분쇄

38

반드시 그런 것은 아닙니다.

TD 내에 DIV를 배치해야하는 경우 TD를 올바르게 사용하고 있는지 확인하십시오. 테이블 형식 데이터 및 의미에 대해 신경 쓰지 않으면 궁극적으로 TD의 DIV에 대해서는 신경 쓰지 않습니다. 당신이 경우에 - 나는 문제 생각이 없다고 생각 이 당신이 그것을 할 수있는 좋은 방법입니다 벌금을.

HTML 사양에 따르면

A는 <div>어디에 위치 할 수 유량 콘텐츠 예상 ¹ 은 IS하는 <td>컨텐츠 모델 ² .

— 샘슨
소스

2

나는 항상 예 또는 아니오로 질문에 대답하고 싶었습니다.)

— Jani Hartikainen

+1-정말 재치있는 답변을 원했지만 실패했습니다.

— karim79

이 더 upvotes있어 비록 내가 Guffa 여기에 언급되지 않은 (내 직감의 원인이 될 수 있음) 점 제기라고 생각

— jcollum

14

테이블 셀은 블록 레벨 요소를 합법적으로 포함 할 수 있으므로 본질적으로 가짜 파가 아닙니다. 물론 브라우저 함침은 추측적인 이론적 입장을 남겨둔다. 레이아웃 문제와 버그가 발생할 수 있습니다.

테이블이 레이아웃에 사용되었지만 때로는 여전히 그래도 대부분의 브라우저가 내용을 올바르게 렌더링한다고 생각합니다. 심지어 IE.

— 데이비드는 모니카 복직을 말한다
소스

브라우저 구현이 "기다린 아이디어"를 얻은 곳이라고 생각합니다.

— jcollum

13

position을 사용하려면 : absolute; position: relative;td 와 함께 div에서 문제가 발생합니다. FF, safari 및 chrome (mac, PC는 아니지만)은 div를 td에 상대적으로 배치하지 않습니다 (예상 한 것처럼) .div에도 마찬가지 display: table-whatever;이므로 두 가지 div가 필요합니다. 컨테이너에 width: 100%; height: 100%;테두리가 없으므로 시각적 영향없이 td를 채 웁니다. 그리고 절대적인 것.

그 외에는 왜 세포를 나누지 않습니까?

— 열광
소스

6

실질적이고 비성경적인 대답

— Antony Hatchkins

2

<div>내부 를 배치하여 문제에 직면했습니다 <td>.

document.getElementById()td 안에 배치 하면 div를 식별 할 수 없었습니다 . 그러나 외부에서는 잘 작동했습니다.

— 히 마자
소스

1

모두가 언급했듯이 레이아웃 목적으로는 좋지 않을 수 있습니다. 나는 똑같이 궁금 해서이 질문에 도달했으며 그것이 유효한 코드인지 알고 싶었습니다.

유효하기 때문에 다른 용도로 사용할 수 있습니다. 예를 들어, 내가 사용할 것은 멋진 "CSSed"div를 테이블 행 안에 넣은 다음 빠른 jQuery 함수를 사용하여 사용자가 가격, 이름 등으로 정보를 정렬 할 수 있도록하는 것입니다. 레이아웃 테이블 만 나에게 "수직 순서"를 줄 것이지만 CSS로 div의 너비, 높이, 배경 등을 제어합니다.

— 후안 이그나시오
소스

0

그것을 다루는 두 가지 방법

태그 div안에 넣다tbody
태그 div안에 넣다tr

https://stackoverflow.com/a/23440419/2305243 : feference가 보이면 두 가지 방법 모두 유효합니다.

— 앨런 동
소스

-4

그것은 의미론을 깨뜨 립니다. 잘 작동하지만 "시맨틱을 깨 뜨리면"HTML을 처리하는 것을 좋아하지 않는 화면 판독기 나 무언가가있을 수 있습니다.

— 그렉
소스

13

@ 그렉, 왜 시맨틱 스를 깰까요? div는 단순히 페이지 컨텐츠의 블록 레벨 분할 또는 하위 분할입니다. 따라서 테이블 셀에 배치하는 것이 본질적으로 그리고 돌이킬 수없는 반의 미적인 것은 아닙니다.

— 데이비드는 모니카 복원 복원

2

나는 내 대답을 정당화하는 몇 가지 답변을 쓰려고 노력했지만 개인적 견해를 계속했다. : / 내 최선의 응답은 셀에있는 모든 것이 다른 HTML 태그로 더 잘 표현 될 수 있다고 생각합니다. 실제로 셀을 구성 요소로 나누는 경우 테이블을 사용하여 시작해서는 안되며 레이아웃에 맞게 일련의 DIV를 스타일링해야합니다. 내가 왜 이것을 더 나은 단어로 넣을 수 없는지 잘 모르겠다 ... IMHO에게 도전한다.

— Greg

흠, TD가 의미 적으로 DIV와 같은 의미이므로 두 개가 연속으로있는 이유는 무엇입니까?

— jcollum

2

@ jcollum : 아니요, 의미 적으로 동일하다고 말하지는 않습니다. TD는 확실히 테이블의 셀입니다. 알려진 구조의 일부입니다. 테이블에는 행이 있고, 행에는 셀이 있고, 셀에는 데이터가 있습니다. DIV는 컨테이너 일뿐입니다. 문서의 어느 곳에서나 언제라도 표현할 수 있습니다. 마크 업의 목적 측면에서 의미를 얻으려면 스타일을 적용해야합니다.

— Greg

7

DIV는 의미 적으로 의미가 없으므로 어떻게 잘못 될 수 있는지 알 수 없습니다.

— Rex M