需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<body>标签中输入html代码：
<table border="1">
<tr><td colspan="2" rowspan="2">1</td><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
</table>
3、浏览器运行index.html页面，此时表格的第一格同时跨两行和两列。
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html，编写问题基础代码。
2、在index.html中的<body>标签中，将外层的table改为div，新增css代码：div {width: 300px} table {float: left}。
3、浏览器运行index.html页面，此时表格们实现了每3个自动换行。
Html中的table元素中，colspan 属性规定单元格可横跨的列数即跨列，rowspan 属性规定单元格可横跨的行数跨行。
两个属性的代码实例如下：
1、表格单元横跨两列的表格：
<table border="1"><tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td colspan="2">January</td><!--设置横跨两列-->
</tr>
<tr>
<td colspan="2">February</td><!--设置横跨两列-->
</tr>
</table>
结果：
2、表格单元横跨两行的表格：
<table border="1"><tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100.00</td>
<td rowspan="2">$50</td><!--设置横跨两行-->
</tr>
<tr>
<td>February</td>
<td>$10.00</td>
</tr>
</table>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）