HTML 表格 - 如何正确使用 rowspan？

Question

我想创建一个表:

T1----T2----T3
--------------
      B1
A1    B2    C1
      B3

我正在使用以下代码:

   <table class="table">
        <thead>
            <tr>
                <th>T1</th>
                <th>T2</th>
                <th>T3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="3">A1</td>
                <tr>
                    <td>B1</td>
                    <tr>
                        <td>B2</td>
                    </tr>
                    <td>C1</td>
                </tr>
        </tbody>
    </table>

演示:https://jsfiddle.net/90yegr6f/

我对 C1 有疑问。如何解决？

Answer 1

您需要专注于一次一行地做事。处理第一行的所有内容。然后开始新的一行并处理其中的所有内容。

因此第一行包含 A1、B1 和 C1。

<tr>
    <td>A1
    <td>B1
    <td>C1

第二行只包含B2

<tr>
    <td>B2

等等。

现在，您希望第一行的第一个和最后一个单元格跨越多行:

<tr>
    <td rowspan=3>A1
    <td>B1
    <td rowspan=3>C1

这给了你:

<table class=table>
  <thead>
    <tr>
      <th>T1
      <th>T2
      <th>T3
  <tbody>
    <tr>
      <td rowspan=3>A1
      <td>B1
      <td rowspan=3>C1      
    <tr>
      <td>B2
    <tr>
      <td>B3
</table>