我试图在HTML中创建一个表格。我有以下设计要创建。我已经在
有人能建议我如何实现这个吗？
我无法创建Name1 | Price1部分。
<td>里面添加了一个<tr>，但是以某种方式表格没有按照设计创建。
有人能建议我如何实现这个吗？我无法创建Name1 | Price1部分。
11个回答
215
您必须在td内添加完整的表格
<table>
<tr>
<td>
<table>
<tr>
<td>
...
</td>
</tr>
</table>
</td>
</tr>
</table>- herrhansen
5
3能否在一个<td>标签内添加完整的表格？我从未尝试过，因此想问一下。如果可以的话，那真的太棒了。 - Scorpion
4您可以把几乎所有内容放入一个td中，只有html、body和head不被允许。 - herrhansen
1是的，这正是我害怕的。我在谷歌上搜索，希望有另一种解决方法。 - Giacomo Pigani
目前为止，当我在 td 中放置 tr 时，它不会抛出任何错误，事实上，我已经在一些 td 中放置了许多 tr，因为我的应用程序在某些属性中呈现对象数组，并且它可以在所有浏览器中工作（不知道 IE 是否可以，因为我没有在 IE 中测试过），有兴趣的人可以查看 - https://stackblitz.com/edit/angular-u7aman ，注意：这是一个 Angular 应用程序，不确定 Angular 是否是这种行为背后的原因。 - Hasintha Abeykoon
即使在您的浏览器中它不会抛出错误，但它是错误的，并且可能在其他浏览器或情况下引发错误。您应该始终尝试按照其预期用途使用HTML元素，例如不要在内联元素中使用块元素。 - herrhansen
51
您不能将tr放在td内。您可以从MDN web docs有关 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
4
12将表格放在另一个表格中是完全有效的。请编写一个简单的HTML代码，在TD中插入一个表格并将其粘贴到W3验证器：http://validator.w3.org/check。您会发现它能够通过验证。所有的错误都与缺少doctype和head标签有关。 - Malloc
将表格元素放在 tr 中是无效的，而将表格放在 td 中是有效的。您可以在 https://validator.w3.org/check 上进行验证。 - Lucky
3我认为这里的意思是，在这种情况下，一个表格内嵌另一个表格是一种奇怪的方法，因为
colspan和rowspan旨在解决此问题。 - connorbode7不确定为什么这个解决方案会得到这么多赞。发布的代码没有浏览器几乎是不可读的，它在实现视觉目标的同时牺牲了表格应该代表的逻辑关系。正如@Malloc所指出的，它的第一句话显然是错误的。 - brianpck
24
您可以不使用嵌套表格来解决该问题。
<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
9
完整示例：
<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>- Jagu
1
很好！非常好。 - NaN
8
试试这段代码
<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
5
在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>
- Patrick
5
在您想要的 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>- Correia JPV
4
您可以使用表格嵌套表格来进行检查，示例如下：
<!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>- Arman H
1
<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
0
<!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>
- naman hazaria
1
运行这段代码，你就会知道在哪里进行修改。 - naman hazaria
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接