HTML merge Cells

This morning, it was a great help to merge cells when designing the title bar. In the past, I knew very little about the table attributes!

 

When HTML is used to merge cells, the following attributes are used:Cross-row merge: rowspan,Cross-column merge: colspan.

Part 1: rowspanUsage

 

<Table border = 2 width = "50%">
<Tr>
<TDRowspan = 2> Row 1, entry 1 </TD>
<TD> Row 1, entry 2 </TD>
</Tr>
<Tr> <TD> Row 2, entry 1 </TD> </tr>
</Table>

1. The effect when rowspan is not added is:

Row 1, entry 1, Row 1, entry 2

Row 2, entry 1

2. The effect after adding rowspan is:

Row 1, entry 1, Row 1, entry 2

Row 2, entry 1

 

 

 

Part 2: colspan usage

 

<Table border = 2 width = "50%">
<Tr>
<TD> Row 1, entry 1 </TD>
<TD> Row 1, entry 2 </TD>
</Tr>
<Tr> <TDColspan= 2 align = "center"> Row 2, entry 1 </TD> </tr>
</Table>

1. The effect when rowspan is not added is:

Row 1, entry 1, Row 1, entry 2

Row 2, entry 1 "NO content"

2. The effect after adding rowspan is:

Row 1, entry 1, Row 1, entry 2

Row 2, entry 1 (entire as a cell)