JavaWeb_HTML(8)_HTML 单元格任意合并
HTML 单元格任意合并
colspan:列合并
示例代码:
<html>
<head>
<title>www.weiyuxuan.com</title>
</head>
<body>
<h1>单元格合并列</h1>
<hr/>
<table border="1" align="center" width="80%" cellspacing="0">
<tr align="center">
<td colspan="2">电影</td><!--合并两列-->
<td colspan="2">电视剧</td><!--合并两列-->
<tr>
<tr>
<td>流浪地球 </td>
<td>惊奇队长 </td>
<td>知否知否,应是绿肥红瘦 </td>
<td>花千骨 </td>
<tr>
<tr>
<td>前任3 </td>
<td>战狼2 </td>
<td>加油吧!实习生 </td>
<td>胭脂 </td>
<tr>
</table>
</body>
</html>
结果图:
rowspan:行合并
示例代码:
<html>
<head>
<title>www.weiyuxuan.com</title>
</head>
<body>
<h1>单元格合并行</h1>
<hr/>
<table border="1" align="center" width="80%" cellspacing="0">
<tr>
<td width="100" height="200" rowspan="4">电视剧</td><!--合并4行-->
<td>花千骨 </td>
</tr>
<tr>
<td>加油吧!实习生 </td>
</tr>
<tr>
<td>胭脂 </td>
</tr>
<tr>
<td>知否知否,应是绿肥红瘦 </td>
</tr>
<tr>
<td rowspan="4">电影</td> <!--合并4行-->
<td>前任3 </td>
</tr>
<tr>
<td>战狼2 </td>
</tr>
<tr>
<td>流浪地球 </td>
</tr>
<tr>
<td>惊奇队长 </td>
</tr>
</table>
</body>
</html>
结果图:
注意:在合并行的时候需要注意,设置行可以每一行单独设置其行高,但是对于同一列的宽度设置一行的宽度即可,,如果设置了多行,会以最大的宽度呈现效果。
例如:
如有错误,欢迎指正!