td内のHTMLテーブルtr

97

HTMLでテーブルを作成しようとしています。次のデザインを作成しました。私は<tr>内部を追加しましたが、<td>どういうわけかテーブルは設計に従って作成されていません。

ここに画像の説明を入力してください

誰か私がこれを達成する方法を提案できますか？

Name1を作成できません| Price1セクション。

html  html-table 
— スコーピオン
ソース

回答:

162

td内に完全なテーブルを追加する必要があります 

    <table>
      <tr>
        <td>
          <table>
            <tr>
              <td>
                ...
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
スニペットを展開

— Herrhansen
ソース
1
td内に完全なテーブルを追加することは可能ですか？私はそれをしたことがないので、私はこれを求めています。それが本当に素晴らしいものである場合
— スコーピオン
2
ほとんどすべてをtdに入れることができますが、html、body、headだけは許可されていません
— herrhansen
1
はい、これはまさに私が怖がっていたものです。私は別の方法があることを期待してグーグルを見上げました
— Giacomo Tecya Pigani '20
現在のところ、tdにtrを配置してもエラーは発生しません。実際、いくつかのtdの中に多くのtrを配置しているため、アプリが一部のプロパティ内のオブジェクトの配列をレンダリングし、すべてのブラウザーで機能します。 （私はIEでテストしなかったので、IEについて知らない）、興味のある人はそれをチェックアウトできます-stackblitz.com/edit/angular-u7aman、注：これはAngularアプリであり、Angularがこの背後にあるかどうかはわかりません動作。
— Hasintha Abeykoon
それは、あなたのブラウザーでエラーになりませんが、それは偽であり、あなたは常にインライン要素の内部でブロック要素を使用しないように、使用目的にHTML要素を使用してみてください他のブラウザや状況のエラーをスローすることがあります
— ヘルハンセン
39

trをtd内に置くことはできません。許可されたコンテンツは、MDN Webドキュメントのドキュメントから確認できます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
}
— lavavrik
ソース
11
テーブル内のテーブルを置くことは、あなたがTD内のテーブルを挿入し、W3バリデータに貼り付け、簡単なHTMLコードを記述し、完全に有効です。validator.w3.org/checkは、 あなたはそれが渡されますがわかります。すべてのエラーはdoctypeとheadの欠落タグに関連しています。
— Malloc、2014年
TD内のテーブルを入れながら無効にTR内のテーブル要素を置くことvalid..youが上を検証することができますですvalidator.w3.org/check
— ラッキー
3
私はここで意味意図したように、テーブルのテーブルの内部には、シナリオの奇妙なアプローチであるということだったと思いますcolspan＆rowspanこの問題を解決するために意図されています。
— connorbode 2015
6
なぜこのソリューションが非常に多くの賛成票を獲得するのかわかりません。投稿されたコードはブラウザなしでは完全に不透明であり、テーブルが表すことになっている論理的な関係を犠牲にして視覚的な目標を達成します。そして、@ Mallocによって指摘されているように、その最初の文は明らかに誤りです。
— brianpck 2016
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.