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>