html - 带有 3 个标题的表格，如何有不同数量的行单元格？

Question

我想实现这个表结构

a | b | c
1 | 1 | 1
2 | 2 | 2
3 | 3 | 3
  |   | 4

我有这个代码，但它把 4 放在另一列而不是 3 下面

<table border="0">   
    <tr>
       <th>A</th>
       <th>B</th>
       <th>C</th>   
    </tr>   
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>    
    </tr>   
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>   
    </tr>
    <tr>
         <td>1</td>
         <td>2</td>
         <td>3</td>
         <td>4</td>   
    </tr> 
 </table>

Answer 1

您将不得不制作一些空单元格，其中包含“4”的行是一个新行：

<table border="0">   
    <tr>
       <th>A</th>
       <th>B</th>
       <th>C</th>   
    </tr>   
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>    
    </tr>   
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>   
    </tr>
    <tr>
         <td>1</td>
         <td>2</td>
         <td>3</td>
    </tr> 
    <tr>
         <td></td>
         <td></td>
         <td>4</td>
    </tr> 
 </table>

Answer 2

作为添加新行的其他答案的替代方法，如果您希望 4 与 3 位于同一表格单元格中，只需在表格单元格内添加换行符

...
    <tr>
         <td>1</td>
         <td>2</td>
         <td>3<br/>4</td>
    </tr> 
 </table>

或div像这样在单元格中使用标签

...
    <tr>
         <td>1</td>
         <td>2</td>
         <td>
            <div>3</div>
            <div>4</div>
         </td>
    </tr> 
 </table>

Answer 3

<table border="0">   
    <tr>
       <th>A</th>
       <th>B</th>
       <th>C</th>   
    </tr>   
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>    
    </tr>   
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>  
    </tr>
    <tr>
         <td>1</td>
         <td>2</td>
         <td>3</td>   
    </tr> 
    <tr>
         <td> </td>
         <td> </td>
         <td>4</td>   
    </tr> 
 </table>

Answer 4

这是正常的：在表格标题中，您定义了三个不同的标题，因此定义了三个不同的列。由于<td></td>在表中定义了一个列，因此您的“4”获得了自己的列，该列未由表的列标题定义。

为了让 4 低于 3，您应该创建一个新的表格行，最后一个包含 4，如下所示：

<table border="0">   
    <tr>
       <th>A</th>
       <th>B</th>
       <th>C</th>   
    </tr>   
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>    
    </tr>   
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>   
    </tr>
    <tr>
         <td>1</td>
         <td>2</td>
         <td>3</td>   
    </tr>
    <tr>
         <td></td>
         <td></td>
         <td>4</td>   
    </tr>
 </table>