HTML表内的HTML表TR

98

我正在尝试用HTML创建一个表。我要创建以下设计。我在<tr>里面添加了一个，<td>但是以某种方式未按照设计创建表。

在此处输入图片说明

谁能建议我如何实现这一目标？

我无法创建Name1 | Price1部分。

html  html-table 
— 蝎
source

Answers:

162

您必须在td中添加完整表 

    <table>
      <tr>
        <td>
          <table>
            <tr>
              <td>
                ...
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
展开摘要

— 黑尔汉森
source
1
是否可以在TD内添加完整表格？我从来没有那样做，这就是为什么我要问这个。如果真的比它伟大的话
— Scorpion
2
您可以将几乎所有内容都放入td中，我认为不允许使用html，身体和头部
— herrhansen13 2013年
1
是的，这正是我所害怕的。我仰望Google，希望有另一种出路
— Giacomo Tecya Pigani 2014年
到目前为止，当我将tr s放入td时，它并没有引发任何错误。事实上，我已经将许多tr s放入了td s中，因为我的应用在某些属性中渲染了对象数组，并且可以在所有浏览器中使用， （不了解IE，因为我没有在IE中对其进行测试），任何有兴趣的人都可以签出-stackblitz.com/edit/angular-u7aman，注意：这是一个Angular应用程序，不确定Angular是否在此后面行为。
— Hasintha Abeykoon
即使它不会在您的浏览器中引发错误，它也是错误的，并且可能在其他浏览器或环境中引发错误。您应始终尝试按预期用途使用HTML元素，例如不要在inline-Elements中使用block-Elements
— 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
}
— 拉瓦夫里克
source
11
将表放在表中是完全有效的，编写一个简单的html代码，在其中将表插入TD并将其粘贴到w3验证器中：validator.w3.org/check 您会注意到它会通过。所有错误均与doctype和head缺少标签有关。
— Malloc
将表格元素放入tr无效，而将表格元素放入td中是有效的..您可以在validator.w3.org/check
— 幸运的
3
我认为这里的意图是表中的表对于这种情况是一种奇怪的方法，因为colspan＆rowspan旨在解决此问题。
— connorbode
6
不知道为什么这个解决方案会受到如此多的批评。在没有浏览器的情况下，发布的代码是完全不透明的，从而以牺牲表应该表示的逻辑关系为代价实现了可视化目标。而且，正如@Malloc所指出的，它的第一句话显然是错误的。
— brianpck '16
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>
展开摘要

— 沃尔特
source
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>
— Kedar1442
source
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>
— 帕特里克
source
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
source
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>
— 贾古
source
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
source
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>
— 阿齐祖尔·哈基姆（Azizul Hakim）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.