源来页 公告 登陆

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>
阅:2473 发表于2015-07-19 13:33
#其他教程
评论:

返回源来页/返回首页


天合之作 曲在人意

心灵鸡汤:
      

®2019-2024 all power by Zlproject3.7
川公网安备 51192202000151号
蜀ICP备2021014921号-2 首页 #top

本网站由提供CDN加速/云储存服务

天合之作 曲在人意