带有rowspan和colspan的表[重复]答案

【问题标题】：table with rowspan and colspan [duplicate]带有rowspan和colspan的表[重复]
【发布时间】：2018-11-02 20:14:18
【问题描述】：

谁能解释这个colspan 和rowspan 系统是如何工作的，我用rowspan="4" 做了这个，但它看起来实际上是3 而不是4 我的意思是结果，为什么是'55577855'和“ikä”在右边，那两个不应该在“henkilöstöt”下面吗？我试过很多次了。

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;    
}
</style>
</head>
<body>


<table >
 
<tr>
  <th rowspan="4">Henkilöstöt</th>
  <th colspan="3">koulutus</th>
</tr>
<tr>
 <th rowspan="3">Muu</th>
 <th rowspan="3">Ammattiiiii</th>
 <th rowspan="3">korkeakoulu</th>
</tr>
  
   <tr>
    <th >55577855</th>
  </tr>
   <tr>
    <th>ikä</th>   

  </tr>

</table>
   

  

</body>
</html>

【问题讨论】：

HTML specification has examples of how these attributes work...
除其他外，您没有任何常规表格单元格 (td)，而只有标题单元格 (th)，这肯定不是有效的 HTML...跨度>
@Johannes 你能纠正一下，这样我就可以从中学习了，它应该看起来一样，但 '55577855' 和 'ikä' 应该在 'henkilöstöt' 下

标签： html css html-table

【解决方案1】：

很难猜出你真正想要什么（你应该提供他想要的输出的图形），但如果你想让最后两个表格行在其他行之下，你必须插入两个空行来弥补第一行的rowspans。

<!DOCTYPE html>
<html>

<head>
  <style>
    table {
      border-collapse: collapse;
    }
    
    th,
    td {
      border: 1px solid black;
      padding: 5px;
      text-align: left;
    }
  </style>
</head>

<body>


  <table>

    <tr>
      <th rowspan="4">Henkilöstöt</th>
      <th colspan="3">koulutus</th>
    </tr>
    <tr>
      <td rowspan="3">Muu</td>
      <td rowspan="3">Ammattiiiii</td>
      <td rowspan="3">korkeakoulu</td>
    </tr>
    <tr>
    </tr>
    <tr>
    </tr>

    <tr>
      <td colspan="4">55577855</td>
    </tr>
    <tr>
      <td colspan="4">ikä</td>
    </tr>

  </table>




</body>

</html>

【讨论】：

【解决方案2】：

也许，这会对你有所帮助..

    <table border ="1">

<tr>
  <th>Henkilöstöt</th>
  <th>koulutus</th>
</tr>

  <tr>
<td >Muu</th>
 <td >Ammattiiiii</td>
 <td >korkeakoulu</td>
</tr>
   <tr>
    <td>55577855</td>
  </tr>
   <tr>
    <td>ikä</td>   


  </tr>



</table>

【讨论】：

看起来不一样，检查一下
@waleedd32 抱歉发布了错误的代码，我会编辑它，等待
为什么 '55577855' 和 'ikä' 在右侧，这两个应该在 'henkilöstöt' 下吗？，@waleedd32 这个问题解决了
@Shubnam Kumar，是的，但其他人应该和我的一样
@waleedd32 我已经更新了代码检查它

【解决方案3】：

Rowspan 使元素向下延伸到下一行。

你有四行：

Henkilöstöt, koulutus
Muu, Ammattiiiiii, korkeakoulu
55577855
伊卡

当您告诉第二行向下扩展三行时，您并不是在告诉它变得三倍大，而是告诉它与第三和第四行出现在同一行。第三和第四行保留它们的数据单元并将它们推送到第一个可用位置。

您应该在 korkeakoulu 行之后粘贴两个空行，或者您应该将所有行跨度的值减少 2。

编辑

<tr>
  <th rowspan="2">Henkilöstöt</th>
  <th colspan="3">koulutus</th></tr>
<tr>
 <td>Muu</td>
 <td>Ammattiiiii</td>
 <td>korkeakoulu</td>
</tr>

<tr>
<td >55577855</td>
</tr>
<tr>
<td>ikä</td>   

</tr>

</table>

或者你可以使用：

<table>
<tr>
  <th rowspan="4">Henkilöstöt</th>
  <th colspan="3">koulutus</th>
</tr>
<tr>
 <th rowspan="3">Muu</th>
 <th rowspan="3">Ammattiiiii</th>
 <th rowspan="3">korkeakoulu</th>
</tr>
<tr></tr>
<tr></tr>
   <tr>
    <th >55577855</th>
  </tr>
   <tr>
    <th>ikä</th>   

  </tr>

</table>

【讨论】：

【解决方案4】：

rowspan 和 colspan 是标签的属性，你怎么能把它和 tr 和 th 一起使用

您应该尝试将 colspan 和 rowspan 与 td 一起使用

【讨论】：

你能纠正一下吗，它应该看起来一样，但 '55577855' 和 'ikä' 应该在 'henkilöstöt' 下
好的，等一下我把代码发给你