123

我正在尝试在 HTML 中创建一个表格。我有以下设计要创建。我在<tr>里面添加了一个，<td>但不知何故，表格不是按照设计创建的。

在此处输入图像描述

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

我无法创建 Name1 | 价格 1 部分。

4

11 回答 11

201

您必须在 td 内添加一个完整的表

    <table>
      <tr>
        <td>
          <table>
            <tr>
              <td>
                ...
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>

于 2013-06-13T13:57:26.067 回答
48

你不能把 tr 放在 td 里面。您可以从MDN web docs文档中查看有关td. 相关信息在允许的内容部分。

实现此目的的另一种方法是使用colspanand 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
}
于 2013-06-13T14:00:22.317 回答
23

您可以在没有嵌套表的情况下解决。

<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>

于 2017-04-12T14:49:47.623 回答
8

完整示例：

<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>

于 2013-06-13T14:19:13.663 回答
7

试试这个代码

<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>

于 2014-04-12T04:20:34.077 回答
5

只需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>

于 2013-06-13T14:00:18.780 回答
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>
于 2013-06-13T14:01:00.540 回答
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>

于 2018-04-05T08:43:57.697 回答
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>

于 2017-11-08T19:04:07.273 回答
0 

    <table>
      <tr>
        <td>
          <table>
            <tr>
              <td>
                ...
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>

于 2021-03-16T08:33:43.353 回答
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>
于 2021-03-16T08:37:01.300 回答