HTML中表头和单元格的合并
在HTML中,怎样去进行表头和单元格的合并那,可以通过以下代码进行完成:
<table border="1">
<tr>
<th>Column 1 heading</th>
<th>Column 2 heading</th>
<th>Column 3 heading</th>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td colspan="2">Row 2, cell 2, also spanning Row 2, cell 3</td>
</tr>
<tr>
<td rowspan="2">Row 3, cell 1, also spanning Row 4, cell 1</td>
<td>Row 3, cell 2</td>
<td>Row 3, cell 3</td>
</tr>
<tr>
<td>Row 4, cell 2</td>
<td>Row 4, cell 3</td>
</tr>
</table>
首先,我们在第一行中用td标签取代了th标签。td是标准的数据单元格,th是单元格表头。像td标签一样,这些th标签也要用在tr标签里边。
在一些td标签中,我们用到了colspan和rowspan属性。在浏览器中查看,你会发现,在第二行中两个单元格代替了三个,第二个单元格横跨了两列。colspan属性,意即“列跨越”,将会跨越指定数目的单元格。就是说,在这个例子中不再需要第三个td标签──两个单元格个已经合并成一个。rowspan属性跟colspan属性类似,它将跨越行。在这个例子中,因为它跨越了四行,这一行只有两个单元格。
样式:
评论