【发布时间】：2013-06-09 22:40:35
【问题描述】：
我正在尝试在 HTML 中创建一个表格。我有以下设计要创建。我在<td> 中添加了一个<tr>，但不知何故，该表并未按照设计创建。
谁能建议我如何做到这一点？
我无法创建 Name1 | Price1 部分。
【问题讨论】：
标签： html html-table
【发布时间】：2013-06-09 22:40:35
【问题描述】：
<!DOCTYPE html>
<html>
<head>
<title>TABLE</title>
<style>
.rb{
text-align:right;
border-collapse:collapse;
border-right:1px solid black;
border-bottom:1px solid black;
}
.b{
text-align:right;
border-collapse:collapse;
border-bottom:1px solid black;
}
.r{
text-align:right;
border-collapse:collapse;
border-right:1px solid black;
}
.n{
text-align:right;
}
</style>
</head>
<body>
<table border="1px" cellspacing="0px">
<tr>
<th>Country</th>
<th>Population (In Crores)</th>
</tr>
<tr>
<th>INDIA</th>
<td>
<table cellspacing="0px" width="100%">
<tr>
<td class="rb">1998</td>
<td class="b">85</td>
</tr>
<tr>
<td class="rb">1999</td>
<td class="b">90</td>
</tr>
<tr>
<td class="r">2000</td>
<td class="n" >100</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
【讨论】：
-
运行这段代码你就知道在哪里修改了
<table>
<tr>
<td>
<table>
<tr>
<td>
...
</td>
</tr>
</table>
</td>
</tr>
</table>【讨论】：
-
您可以通过至少添加解释和一些信息来改进您的答案。而不是仅仅粘贴一段代码。
你不能把 tr 放在 td 里面。您可以从有关td 的MDN web docs 文档中查看允许的内容。相关信息在允许的内容部分。
实现此目的的另一种方法是使用colspan 和rowspan。检查这个fiddle。
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
}
【讨论】：
-
将表格放入表格中是完全有效的，编写一个简单的 html 代码，在 TD 中插入表格并将其粘贴到 w3 验证器中：validator.w3.org/check 您会注意到它会通过。所有错误都与 doctype 和 head 缺失标签有关。
-
将表格元素放入 tr 无效，而将表格放入 td 有效..您可以在 validator.w3.org/check 上验证
-
我认为这里的意图是表中的表是该场景的一种奇怪方法，因为
colspan和rowspan旨在解决此问题。 -
不知道为什么这个解决方案会得到如此多的支持。发布的代码在没有浏览器的情况下完全不透明，以牺牲表应该表示的逻辑关系为代价实现视觉目标。而且，正如@Malloc 所指出的，它的第一句话显然是错误的。
您可以像这样使用表格内的表格来检查这个
<!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>【讨论】：
<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>【讨论】：
完整示例：
<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>【讨论】：
-
不错！非常好。
只需在您想要的td 中添加一个新的table。示例：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>【讨论】：
试试这个代码
<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>【讨论】：
不用嵌套表格也可以解决。
<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>【讨论】：
你必须在 td 中添加一个完整的表
<table>
<tr>
<td>
<table>
<tr>
<td>
...
</td>
</tr>
</table>
</td>
</tr>
</table>【讨论】：
-
是否可以在 td 中添加全表？我从来没有这样做过，这就是我问这个的原因。如果它比它真的很棒
-
你可以把几乎所有东西都放到一个td中，我认为只有html，body和head是不允许的
-
是的，这正是我所害怕的。我查了一下谷歌，希望有其他出路
-
好吧，到目前为止，当我将 tr 放入 td 时，它不会引发任何错误，事实上我已经在一些 td 中放入了许多 tr，因为我的应用程序在某些属性中呈现了对象数组，并且它适用于所有浏览器，（不了解 IE，因为我没有在 IE 中测试过），任何有兴趣的人都可以查看 - stackblitz.com/edit/angular-u7aman ，注意：它是一个 Angular 应用程序，不确定 Angular 是这种行为的背后。
-
即使它不会在您的浏览器中引发错误，它也是错误的，并且可能会在其他浏览器或环境中引发错误您应该始终尝试在预期用途中使用 HTML 元素，例如不使用块- 内联元素内的元素
在 td 元素中放置另一个表格，例如 this。
<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>
【讨论】：