td 내부의 HTML 테이블 tr

98

HTML로 표를 만들려고합니다. 다음과 같은 디자인을 만들었습니다. <tr>내부를 추가 <td>했지만 어떻게 든 디자인에 따라 테이블이 만들어지지 않았습니다.

여기에 이미지 설명 입력

누구든지 내가 이것을 달성 할 수있는 방법을 제안 할 수 있습니까?

Name1을 만들 수 없습니다. | 가격 1 섹션.

html  html-table 
— 투석기
소스

답변:

162

td 안에 전체 테이블을 추가해야합니다. 

    <table>
      <tr>
        <td>
          <table>
            <tr>
              <td>
                ...
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
스 니펫 확장

— Herrhansen
소스
1
td 안에 전체 테이블을 추가 할 수 있습니까 ?? 나는 한 번도하지 않았기 때문에 이것을 묻는 것입니다. 그것 정말 좋은 것보다 경우
— 전갈
2
당신이 TD로 거의 모든 것을 넣을 수 있습니다 만 HTML, 몸과 머리 내 생각은 허용되지 않습니다
— herrhansen
1
네, 이것이 제가 무서워했던 것입니다. 나는 또 다른 탈출구가 있었다 바라고 구글에 고개
— 자코모 Tecya Pigani
현재로서는 tr s를 td에 넣을 때 오류가 발생하지 않습니다. 사실 내 앱이 일부 속성 내에서 객체 배열을 렌더링하고 모든 브라우저에서 작동하기 때문에 일부 td 안에 tr을 많이 넣었습니다. (IE에서 테스트하지 않았기 때문에 IE에 대해 모르겠습니다) 관심있는 사람은 누구나 확인할 수 있습니다 -stackblitz.com/edit/angular-u7aman , 참고 : Angular가이 뒤에 있는지 확실하지 않은 Angular 앱입니다. 행동.
— Hasintha Abeykoon
그것은 당신의 브라우저에서 오류가 발생하지 않는다하더라도 그것은 거짓이며, 당신은 항상 인라인 요소의 내부 블록 요소를 사용하지 않는 것처럼, 사용 목적에 HTML 요소를 사용하려고합니다 다른 브라우저 또는 상황에서 오류를 던질 수 있습니다
— herrhansen
39

tr을 td 안에 넣을 수 없습니다. 에 대한 MDN 웹 문서 문서 에서 허용 된 콘텐츠를 볼 수 있습니다 td. 관련 정보는 허용 된 콘텐츠 섹션에 있습니다.

이것을 달성하는 또 다른 방법은 사용하는 것입니다 colspan및 rowspan. 이 바이올린을 확인하십시오 .

HTML :

<table width="100%">
 <tr>
  <td>Name 1</td>
  <td>Name 2</td>
  <td colspan="2">Name 3</td>
  <td>Name 4</td>
 </tr>

 <tr>
  <td rowspan="3">ITEM 1</td>
  <td rowspan="3">ITEM 2</td>
  <td>name1</td>
  <td>price1</td>
  <td rowspan="3">ITEM 4</td>
 </tr>

 <tr>
  <td>name2</td>
  <td>price2</td>
 </tr>
 <tr>
  <td>name3</td>
  <td>price3/td>
 </tr>
</table>

그리고 일부 CSS :

table {
    border-collapse: collapse       
}

td {
   border: 1px solid #000000
}
— 라바 브리 크
소스
11
테이블을 테이블에 넣는 것은 완전히 유효합니다. TD 안에 테이블을 삽입하고 w3 유효성 검사기에 붙여 넣는 간단한 html 코드를 작성하십시오. validator.w3.org/check 통과 할 것입니다. 모든 오류는 doctype 및 head 누락 태그와 관련이 있습니다.
— Malloc
td 안에 테이블을 넣는 동안 tr 안에 테이블 요소를 넣는 것은 유효합니다. validator.w3.org/check
— Lucky
3
여기서 의도 된 의미는 colspan& rowspan가이 문제를 해결하기위한 것이므로 테이블 내부의 테이블이 시나리오에 대해 이상한 접근 방식 이라는 것입니다.
— connorbode
6
이 솔루션이 왜 그렇게 많은 찬성표를 받는지 잘 모르겠습니다. 게시 된 코드는 브라우저없이 완전히 불투명하므로 테이블이 나타내는 논리적 관계를 희생하면서 시각적 목표를 달성합니다. 그리고 @Malloc이 언급했듯이 첫 번째 문장은 명백히 거짓입니다.
— brianpck
20

테이블을 중첩하지 않고도 해결할 수 있습니다.

<table border="1">
    <thead>
        <tr>
            <th>ABC</th>
            <th>ABC</th>
            <th colspan="2">ABC</th>
            <th>ABC</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="4">Item1</td>
            <td rowspan="4">Item1</td>
            <td colspan="2">Item1</td>
            <td rowspan="4">Item1</td>
        </tr>
        <tr>
            <td>Name1</td>
            <td>Price1</td>
        </tr>
        <tr>
            <td>Name2</td>
            <td>Price2</td>
        </tr>
        <tr>
            <td>Name3</td>
            <td>Price3</td>
        </tr>
        <tr>
            <td>Item2</td>
            <td>Item2</td>
            <td colspan="2">Item2</td>
            <td>Item2</td>
        </tr>
    </tbody>
</table>
스 니펫 확장

— WalterV
소스
6

이 코드 시도

<table border="1" width="100%">
<tr>
    <td>Name 1</td>
    <td>Name 2</td>
    <td colspan="2">Name 3</td>
    <td>Name 4</td>
</tr>

<tr>
    <td rowspan="3">ITEM 1</td>
    <td rowspan="3">ITEM 2</td>
    <td>name</td>
    <td>price</td>
    <td rowspan="3">ITEM 4</td>
</tr>
<tr>
    <td>name</td>
    <td>price</td>
</tr>
<tr>
    <td>name</td>
    <td>price</td>
</tr>
</table>
— 케 다르 1442
소스
4

같은 TD 요소 내에 다른 테이블을 넣어 이 .

<table>
    <tr>
        ...
    </tr>
    <tr>
        <td>ABC</td>
        <td>ABC</td>
        <td>
            <table>
                <tr>
                    <td>name1</td>
                    <td>price1</td>
                </tr>
...
            </table>
        </td>
        <td>ABC</td>
    </tr>
...
</table>
— 패트릭
소스
4

원하는에 새 table를 추가하기 만하면 td됩니다. 예 : http://jsfiddle.net/AbE3Q/

<table border="1">
    <tr>
        <td>ABC</td>
        <td>ABC</td>
        <td>ABC</td>
        <td>ABC</td>
    </tr>
    <tr>
        <td>Item1</td>
        <td>Item2</td>
        <td><table border="1">
            <tr><td>qweqwewe</td><td>qweqwewe</td></tr>
            <tr><td>qweqwewe</td><td>qweqwewe</td></tr>
            <tr><td>qweqwewe</td><td>qweqwewe</td></tr>
            </table></td>
        <td>Item3</td>
    </tr>
    <tr>
    </tr>
    <tr>
    </tr>
    <tr>
    </tr>
    <tr>
    </tr>  
</table>
— 주앙 C
소스
4

전체 예 : 

<table border="1" style="width:100%;">
  <tr>
    <td>ABC</td>
    <td>ABC</td>
    <td>ABC</td>
    <td>ABC</td>
  </tr>
  <tr>
    <td>Item 1</td>
    <td>Item 1</td>
    <td>
      <table border="1" style="width: 100%;">
        <tr>
          <td>Name 1</td>
          <td>Price 1</td>
        </tr>
        <tr>
          <td>Name 2</td>
          <td>Price 2</td>
        </tr>
        <tr>
          <td>Name 3</td>
          <td>Price 3</td>
        </tr>
      </table>
    </td>
    <td>Item 1</td>
  </tr>
  <tr>
    <td>Item 2</td>
    <td>Item 2</td>
    <td>Item 2</td>
    <td>Item 2</td>
  </tr>
  <tr>
    <td>Item 3</td>
    <td>Item 3</td>
    <td>Item 3</td>
    <td>Item 3</td>
  </tr>
</table>
— 자구
소스
2

이걸 확인할 수 있습니다. 이렇게 테이블 안의 테이블을 사용하십시오.

<!DOCTYPE html>
<html>
  <head>
    <style>
      table, th, td {
      border: 1px solid black;
      border-collapse: collapse;
      }
    </style>
  </head>
  <body>
    <table style="width:100%">
      <tr>
        <th>ABC</th>
        <th>ABC</th>
        <th>ABC</th>
        <th>ABC</th>
      </tr>
      <tr>
        <td>Item1</td>
        <td>Item1</td>
        <td>
          <table style="width:100%">
            <tr>
              <td>name1</td>
              <td>price1</td>
            </tr>
            <tr>
              <td>name2</td>
              <td>price2</td>
            </tr>
            <tr>
              <td>name3</td>
              <td>price3</td>
            </tr>
          </table>
        </td>
        <td>item1</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
      </tr>
      <tr>
        <td>E</td>
        <td>F</td>
        <td>G</td>
        <td>H</td>
      </tr>
      <tr>
        <td>E</td>
        <td>R</td>
        <td>T</td>
        <td>T</td>
      </tr>
    </table>
  </body>
</html>
— 아르 만 H
소스
0 
<table border="1px;" width="100%" >
        <tr align="center">
            <td>Product</td>
            <td>quantity</td>
            <td>Price</td>
            <td>Totall</td>
        </tr>
        <tr align="center">
            <td>Item-1</td>
            <td>Item-1</td>
            <td>
                <table border="1px;" width="100%">
                    <tr align="center">
                        <td>Name1</td>
                        <td>Price1</td>
                    </tr>
                    <tr align="center">
                        <td>Name2</td>
                        <td>Price2</td>
                    </tr>
                    <tr align="center">
                        <td>Name3</td>
                        <td>Price3</td>
                    </tr>
                    <tr>
                        <td>Name4</td>
                        <td>Price4</td>
                    </tr>
                </table>
            </td>
            <td>Item-1</td>
        </tr>
        <tr align="center">
            <td>Item-2</td>
            <td>Item-2</td>
            <td>Item-2</td>
            <td>Item-2</td>
        </tr>
        <tr align="center">
            <td>Item-3</td>
            <td>Item-3</td>
            <td>Item-3</td>
            <td>Item-3</td>
        </tr>
    </table>
— 아지 줄 하킴
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.