HTML5 在同一行的两列上使用 Rowspan

Question

我正在尝试创建一个表格，其中第 1 行中的单元格 1 和单元格 2 都跨越 2 行以获得更大的标题，同时仍位于它们自己的单独单元格中。看起来像这段代码的东西

<table border="1">
  <tr height="50px">
    <!--first row-->
    <th>Quarter</th>
    <!--first column in first row-->
    <th>Total Sales</th>
    <!--first row, second column-->
  </tr>
  <tr>
    <!--second row-->
    <td>Q1</td>
    <td>$5,349</td>
  </tr>
  <tr>
    <!--third row--access from http://cbsnews.com-->
    <td>Q2</td>
    <td>$8,349</td>
  </tr>
  <tr>
    <!--Fourth row-->
    <td>Q3</td>
    <td>$22,349</td>
  </tr>
</table>

但我不想让表格行高为 50 并让它看起来像是跨越 2 行，而是让代码看起来更像

<table border="1">
  <tr>
    <!--first row-->
    <th rowspan="2">Quarter</th>
    <!--first column in first row-->
    <th rowspawn="2">Total Sales</th>
    <!--first row, second column-->
  </tr>
  <tr>
    <!--second row-->
    <td>Q1</td>
    <td>$5,349</td>
  </tr>
  <tr>
    <!--third row--access from http://cbsnews.com-->
    <td>Q2</td>
    <td>$8,349</td>
  </tr>
  <tr>
    <!--Fourth row-->
    <td>Q3</td>
    <td>$22,349</td>
  </tr>
</table>

但这会生成一个看起来很奇怪的表格。

有没有办法做到这一点，还是我必须解决行高问题？

Answer 1

你不应该为这种工作使用 html 属性“rowspan”、“border”和“height”，使用它是一种不受欢迎的工作方式。你应该做的是使用 css 来完成你想要的。

正确的做法应该是这样

table{
border-collapse:collapse;
border:1px solid black;
}

table td, th{
border:1px solid black;
}


tr th {
    height: 50px;
}

<table>
  <tr>
    <!--first row-->
    <th>Quarter</th>
    <!--first column in first row-->
    <th>Total Sales</th>
    <!--first row, second column-->
  </tr>
  <tr>
    <!--second row-->
    <td>Q1</td>
    <td>$5,349</td>
  </tr>
  <tr>
    <!--third row--access from http://cbsnews.com-->
    <td>Q2</td>
    <td>$8,349</td>
  </tr>
  <tr>
    <!--Fourth row-->
    <td>Q3</td>
    <td>$22,349</td>
  </tr>
</table>