HTML表单元格合并

Question

如何在html中执行下表？

|Cell1|Cell2|Cell3| 
------------------- 
|Cell1| Cell2 & 3 | 
------------------- 
|Cell1|Cell2|Cell3| 
------------------- 
| Cell1 & 2 |Cell3| 
| Cell1 & 2 |Cell3| 
------------------- 

最后是合并两行和两列。

感谢您的帮助人没有使用CSS。

表具有5行和3列。

Answer 1

<table> 
 
     <tr> 
 
      <td>1</td> 
 
      <td>2</td> 
 
      <td>3</td> 
 
     </tr> 
 
     <tr> 
 
      <td>1</td> 
 
      <td colspan="2">2 & 3</td> 
 
     </tr> 
 
     <tr> 
 
      <td>1</td> 
 
      <td>2</td> 
 
      <td>3</td> 
 
     </tr> 
 
     <tr> 
 
      <td colspan="2">1 & 2</td> 
 
      <td>3</td> 
 
     </tr> 
 
     <tr> 
 
      <td colspan="2">1 & 2</td> 
 
      <td>3</td> 
 
     </tr> 
 
    </table>

Answer 2

上<td>标签使用colspan。

<table> 
    <tr> 
    <td>Col 1</td> 
    <td>Col 2</td> 
    <td>Col 3</td> 
    </tr> 
    <tr> 
    <td>Col 1</td> 
    <td colspan="2">Col 2 + Col 3</td> 
    </tr> 
    <tr> 
    <td>Col 1</td> 
    <td>Col 2</td> 
    <td>Col 3</td> 
    </tr> 
<table> 

https://codepen.io/Toilal/pen/BwxdMg

Answer 3

您可以使用合并单元格和行跨度为这件事。 ColSpan允许单个表格单元跨越多个单元格或列的宽度。

ROWSPAN允许单个表格单元跨越多于一个小区或行的高度。

了解更多：https://html.com/tables/rowspan-colspan/#ixzz4v5ntM7rn

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

<table> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1</td> 
 
     <td colspan="2">2 & 3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
    </tr> 
 
    <tr> 
 
     <td rowspan="2" colspan="2">1 & 2</td> 
 
     <td >3</td> 
 
    </tr> 
 
    <tr> 
 
     
 
     <td>3</td> 
 
    </tr> 
 
</table>

Answer 4

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

<table> 
 
    <tr> 
 
    <td>January</td> 
 
    <td>$100</td> 
 
    <td>$50</td> 
 
    </tr> 
 
    <tr> 
 
    <td>January</td> 
 
    <td colspan="2">$50</td> 
 
    </tr> 
 
    <tr> 
 
    <td>January</td> 
 
    <td>$100</td> 
 
    <td>$50</td> 
 
    </tr> 
 
    <tr> 
 
    <td rowspan="2" colspan="2">January</td> 
 
    <td>$50</td> 
 
    </tr> 
 
    <tr> 
 
    <td>$50</td> 
 
    </tr> 
 
</table>

Answer 5

tr:nth-child(1), tr:nth-child(3), tr:nth-child(5){ 
 
    font-weight: bold; 
 
    font-size: 15pt; 
 
} 
 
tr:nth-child(2){ 
 
    font-weight: bold; 
 
    font-size: 14pt; 
 
} 
 
td:nth-child(1){ 
 
    border-left: 2px solid black; 
 
    border-right: 2px solid black; 
 
} 
 
td:nth-child(2){ 
 
    border-right: 2px solid black; 
 
} 
 
td:nth-child(3){ 
 
    border-right: 2px solid black; 
 
} 
 
tr:nth-child(4) > td:nth-child(1), tr:nth-child(4) > td:nth-child(2){ 
 
    border-left: none; 
 
    border-right: 1px solid black; 
 
}

<table> 
 
    <tr> 
 
    <td>Cell1</td> 
 
    <td>Cell2</td> 
 
    <td>Cell3</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Cell1</td> 
 
    <td colspan="2">Cell2 & 3</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Cell1</td> 
 
    <td>Cell2</td> 
 
    <td>Cell3</td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="2">Cell1 & 2</td> 
 
    <td>Cell3</td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="2">Cell1 & 2</td> 
 
    <td>Cell3</td> 
 
    </tr> 
 

 
</table>