在td里面的Html表tr
我正在尝试用HTML创建一个表.我有以下设计要创建.我在<tr>内部添加了一个<td>但不知何故,表格不是按照设计创建的.
任何人都可以建议我如何实现这一目标？
我无法创建Name1 | 价格1节.
qui*_*age 143
您必须在td中添加一个完整的表
<table>
<tr>
<td>
<table>
<tr>
<td>
...
</td>
</tr>
</table>
</td>
</tr>
</table>- 是否可以在 td 中添加完整的表格？我从来没有这样做过，这就是我问这个的原因。如果它真的很棒 (2认同)
- 你可以把几乎所有东西都放到td中,我认为只允许使用html,body和head (2认同)
小智 35
你不能把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
}
- 将表放在表中是完全有效的,写一个简单的html代码,在TD中插入一个表并将其粘贴到w3验证器中:http://validator.w3.org/check你会注意到它会通过.所有错误都与doctype和head missing标签有关. (10认同)
- 不确定为什么这个解决方案会得到这么多的赞成.如果没有浏览器,发布的代码是完全不透明的,以牺牲表应该表示的逻辑关系为代价来实现可视目标.而且,正如@Malloc所指出的那样,它的第一句话显然是错误的. (5认同)
- 我认为这里的意思是表格中的表格是一种奇怪的方法,因为`colspan`和`rowspan`旨在解决这个问题. (2认同)
Wal*_*erV 12
您可以在不嵌套表的情况下解决.
<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>小智 6
完整示例：
<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>只需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>像这样在 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>
小智 5
试试这个代码
<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>