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>