HTML自定义table表格形状(利用td的colspan/ro

	composer @Ta
	2015-07-19 13:33

---

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

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>
从演示可知，原本占一格的<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>

阅:2804

发表于2015-07-19 13:33

#其他教程