Question

我正在尝试制作这张桌子。但是问题是，尽管每一行都在不同的行中，但最后一行一直保持在前一行的旁边。我不明白为什么。我试图改变宽度和高度，但没有任何效果。这是代码：

<html>
<head>

</head>
<body>
<table border="1" width="50%">
<tr>
   <th rowspan="2">
     nnnnnnnnnn
   </th>
   <th colspan="2">
      aaaaaaaaaaaaaaa
   </th>
</tr>
<tr>
     <td>bbbbbbbbbbbbb</td> 
     <td>ccccccccccccc</td> 
</tr>
<tr>
     <td rowspan="2">Un</td>
     <td  rowspan="2">bal blabal blabal blabal blabal blabal </td>
     <td  rowspan="2">xxxxxxxxxxxx</td>
</tr>
<tr>
     <td rowspan="2">Deux</td>
     <td  rowspan="2">yyyyyyyyyyy </td>
     <td  rowspan="2">bal blabal blabal blabal blabal</td>
</tr>
</table>
</body>
</html>

这就是我希望表格看起来的样子：Image

Answer 1

<html>
<head>

</head>
<body>
<table border="1" width="50%">
<tr>
   <th rowspan="2">
     nnnnnnnnnn
   </th>
   <th colspan="2">
      aaaaaaaaaaaaaaa
   </th>
</tr>
<tr>
     <td>bbbbbbbbbbbbb</td> 
     <td colspan="2">ccccccccccccc</td> 
</tr>
<tr>
     <td>Un</td>
     <td>bal blabal blabal blabal blabal blabal </td>
     <td>xxxxxxxxxxxx</td>
</tr>
<tr>
     <td>Deux</td>
     <td>yyyyyyyyyyy </td>
     <td>bal blabal blabal blabal blabal</td>
</tr>
</table>
</body>
</html>

Answer 2

看看this answer

colgroup指定表中一组用于格式化的一列或多列。这样，您只需在标头上提供col/row span。

<html>
<head>

</head>
<body>
<table border="1" style=”width: 100%”>
    <colgroup>
        <col style="width: 20%"/>
        <col style="width: 40%"/>
        <col style="width: 40%"/>
    </colgroup>

    <thead>
        <tr>
            <th rowspan="2">nnnnnnnn</th>
            <th colspan="2">aaaaaaaaaas</th>
        </tr>
        <tr>
            <th>bbbbbb</th>
            <th>ccccc</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>un</th>
            <td>bla</td>
            <td>xxx</td>
        </tr>                
        <tr>
            <th>deaux</th>
            <td>yyyy</td>
            <td>:D</td>
        </tr>
    </tbody>
</table>
</body>
</html>

Answer 3

<html>
<head>

</head>
<body>
<table border="1" width="50%">
<tr>
   <th rowspan="2">
     nnnnnnnnnn
   </th>
   <th colspan="4">
      aaaaaaaaaaaaaaa
   </th>
</tr>
<tr>
     <td colspan="2">bbbbbbbbbbbbb</td> 
     <td colspan="2">ccccccccccccc</td> 
</tr>
<tr>
     <td rowspan="1">Un</td>
     <td  colspan="2">bal blabal blabal blabal blabal blabal </td>
     <td  colspan="2">xxxxxxxxxxxx</td>
</tr>
<tr>
     <td rowspan="1">Deux</td>
     <td  colspan="2">yyyyyyyyyyy </td>
     <td  colspan="2">bal blabal blabal blabal blabal</td>
</tr>
</table>
</body>
</html>

Answer 4

简单地删除两行的行距将为您提供一个表格，如示例所示。

<html>
<head>

</head>
<body>
<table border="1" width="50%">
<tr>
   <th rowspan="2">
     nnnnnnnnnn
   </th>
   <th colspan="2">
      aaaaaaaaaaaaaaa
   </th>
</tr>
<tr>
     <td>bbbbbbbbbbbbb</td> 
     <td>ccccccccccccc</td> 
</tr>
<tr>
     <td>Un</td>
     <td>bal blabal blabal blabal blabal blabal </td>
     <td>xxxxxxxxxxxx</td>
</tr>
<tr>
     <td>Deux</td>
     <td>yyyyyyyyyyy </td>
     <td>bal blabal blabal blabal blabal</td>
</tr>
</table>
</body>
</html>

Answer 5

基本HTML表格设计

tr {
  height: 80px;
}

table,tr,th,td{
  border: 1px solid #ddd;
}

<html>

<head>

</head>

<body>
  <table border="0" width="100%">
    <tr>
      <th rowspan="2">
        nnnnnnnnnn
      </th>
      <th colspan="5">
        aaaaaaaaaaaaaaa
      </th>
    </tr>
    <tr>
      <td colspan="3">bbbbbbbbbbbbb</td>
      <td colspan="2">ccccccccccccc</td>
    </tr>
    <tr>
      <td rowspan="1">Un</td>
      <td colspan="2">bal blabal blabal blabal blabal blabal </td>
      <td colspan="2">xxxxxxxxxxxx</td>
    </tr>
    <tr>
      <td rowspan="1">Deux</td>
      <td colspan="2">yyyyyyyyyyy </td>
      <td colspan="2">bal blabal blabal blabal blabal</td>
    </tr>
  </table>
</body>

</html>

Answer 6

我做到了，就像您发布的带有桌子的图片一样。但我建议使用Flexbox

<html>
<body>
  <table border="1" width="50%">
    <tr>
      <th rowspan="2">
        nnnnnnnnnn
      </th>
      <th colspan="4">
        aaaaaaaaaaaaaaa
      </th>
    </tr>
    <tr>
      <td>bbbbbbbbbbbbb asdasd</td>
      <td>ccccccccccccc</td>
    </tr>
    <tr>
      <td>Un</td>
      <td>bal blabal blabal blabal </td>
      <td>xxxxxxxxxxxx</td>
    </tr>
    <tr></tr>
    <tr>
      <td>Deux</td>
      <td>yyyyyyyyyyy </td>
      <td>bal blabal blabal blabal</td>
    </tr>
  </table>
</body>
</html>

这个HTML表格有什么问题？

6 个答案: