html的<table>表格在很多网页都有应用,比如广东一本大学投档线表,这些是常规用法。博主笑忘书刚学到<td>有两个特别的属性,colspanrowspan,可以给表格自定义带来较大的便利。

Colspan 规定单元格可横跨的列数

Rowspan 规定单元格可横跨的行数

初看这个解释可能有点抽象,下面是个简单演示:

横跨两列的单元格:
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<br/><br/>
横跨两行的单元格:
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
横跨两列的单元格:
姓名电话
Bill Gates555 77 854555 77 855
横跨两行的单元格:
姓名Bill Gates
电话555 77 854
555 77 855

从演示可知,原本占一格的<td>,可以通过设置这个属性,占到两格。

下面是我随便写的自定义表格,或者应该说是图形:

<style>
table{
width:100px;height:100px;
}
td{
background:red;text-align:center;border:1px solid #000;
}
</style>
<table>
<tr><td colspan="2">1</td>
<td rowspan="2">2</td></tr>
<tr><td rowspan="2">3</td><td>4</td></tr>
<tr><td colspan="2">5</td></tr>
</table>

演示效果如下图:

html表格自定义colspan/rowspan演示图

比较简单,如果想更炫可以设置不同的颜色块,继续加特效,加特效。

不折腾那么多了,感兴趣可以自行研究,更多请参考:http://www.w3school.com.cn/tags/tag_td.asp

全文完