When we are making an HTML form
You can see that this is very unfair. This requires merging cells
1. First confirm whether you want to merge to the right (column merging) or downward (row merging).
2. Find the cells that need to be merged.
3. If the merged cell has content or occupies a position, the merged cell can be deleted in the source code.
Special attention :
When we merge cells, if the merged cells have content, although the merge will not be affected, because the contents of the merged cells are not processed in any way, the cells will automatically move back.
Solution : Just delete the extra cells.
Merge across rows: rowspan="Number of merged cells"
Merge across columns: colspan="Number of merged cells"
Detailed explanation:
Target cell:
1: Cross row: The top cell is the target cell, write the merge code.
2: Cross columns: The leftmost cell is the target cell, write the merge code.
Then we follow the main steps:
Initial form <body>
<table border="1" align="center" width="100%" cellpadding="20" cellspacing="0">
<tr>
<th>All-star information collection</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th></th>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
<th>Hobbies</th>
</tr>
<tr>
<td></td>
<td>Brother</td>
<td>Male</td>
<td>24</td>
<td>Sing, dance, rap and play basketball</td>
</tr>
<tr>
<td></td>
<td>Litang</td>
<td>Male</td>
<td>20</td>
<td>Code measurement and sharp engraving five</td>
</tr>
<tr>
<td></td>
<td>Menglei</td>
<td>Male</td>
<td>27</td>
<td>The famous sword steals the tower and becomes the ultimate hunter</td>
</tr>
</table>
</body> 
This shows up like the picture above
Cross-row merging (rowspan): If we want the following effect, we need to use the rowspan attribute
<body>
<table border="1" align="center" width="100%" cellpadding="20" cellspacing="0">
<tr>
<th rowspan="5">All-star information collection</th><!--According to the requirements, find the title, write the attribute rowspan, and write parameter 5, which means merging the first to fifth rows. At the same time, Comment out the first column of each line -->
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<!-- <th></th> -->
<th>Name</th>
<th>Gender</th>
<th>Age</th>
<th>Hobbies</th>
</tr>
<tr>
<!-- <td></td> -->
<td>Brother</td>
<td>Male</td>
<td>24</td>
<td>Sing, dance, rap and play basketball</td>
</tr>
<tr>
<!-- <td></td> -->
<td>Litang</td>
<td>Male</td>
<td>20</td>
<td>Code measurement and sharp engraving five</td>
</tr>
<tr>
<!-- <td></td> -->
<td>Menglei</td>
<td>Male</td>
<td>27</td>
<td>The famous sword steals the tower and becomes the ultimate hunter</td>
</tr>
</table>
</body>Cross-column merge (colspan): If we want the following effect, we need to use the colspan attribute
<body>
<table border="1" align="center" width="100%" cellpadding="20" cellspacing="0">
<tr>
<th colspan="5">All-star information collection</th><!--According to the requirements, find the title, write the attribute colspan, and write parameter 5, which means merging the first to fifth columns, and at the same time , comment out the first line of each column -->
<!-- <td></td>
<td></td>
<td></td>
<td></td> -->
</tr>
<tr>
<!-- <th></th> -->
<th>Name</th>
<th>Gender</th>
<th>Age</th>
<th>Hobbies</th>
</tr>
<tr>
<!-- <td></td> -->
<td>Brother</td>
<td>Male</td>
<td>24</td>
<td>Sing, dance, rap and play basketball</td>
</tr>
<tr>
<!-- <td></td> -->
<td>Litang</td>
<td>Male</td>
<td>20</td>
<td>Code measurement and sharp engraving five</td>
</tr>
<tr>
<!-- <td></td> -->
<td>Menglei</td>
<td>Male</td>
<td>27</td>
<td>The famous sword steals the tower and becomes the ultimate hunter</td>
</tr>
</table>
</body>This concludes this article on the specific implementation of HTML table merging. For more related HTML table merging content, please search previous articles on downcodes.com or continue to browse the relevant articles below. I hope you will support downcodes in the future. com!