html/css样式怎么设置表格跨行?

怎么设置表格跨行?

下面我们通过代码示例来看看。

<!--border 边框  参数都打引号 cellspacing单元格间距-->
<table border="1px" width="300px"  cellspacing="0" cellpadding="0" bgcolor="red" >
	    <tr>
		<td align="left">姓名</td>
		<td align="center">性别</td>
		<td align="right">年龄</td>
	    </tr>
	    <tr>
		<td valign="top">张2</td>
		<td valign="middle">男 </td>
		<td valign="bottom">20 </td>
	    </tr>
</table>

1.png

<table border="1">
	    <tr bgcolor="red" >
		<td colspan=3>值班人员</td><!--colspan=3 跨3列 -->
	    </tr>
	    <tr>
		<td bgcolor="red">星期一</td>
		<td>星期二</td>
		<td>星期3</td>
	    </tr>
	    <tr><td>张三</td><td>里司</td><td>望物</td></tr>
</table>

2.png

<table border="1">
	    <tr>
		<td rowspan="3" bgcolor="red">值班</td><!--rowspan="3"跨3行  -->
		<td>星期一</td>
		<td>星期二</td>
		<td>星期三</td>
	    </tr>
	    <tr>
		<td>张3</td>
		<td>里司</td>
		<td>望物</td>
	    </tr>
	    <tr>
		<td>张2</td>
		<td>里司2</td>
		<td>望物3</td>
	    </tr>
</table>

3.png

说明:

  • colspan 属性规定单元格可横跨的列数。

    语法:<td colspan="number">,其中number是设置单元格可横跨的列数。

    没有浏览器支持 colspan="0",这个值有特殊的意义;colspan="0" 指示浏览器横跨到列组的最后一列。

  • rowspan 属性规定单元格可横跨的行数。

    语法:<td rowspan="number">,其中number是设置单元格可横跨的行数。

    没有浏览器支持 rowspan="0",这个值有特殊的意义;rowspan="0" 指示浏览器横跨到表格部分的最后一行(thead、tbody 或者 tfoot)。

更多前端开发知识,请查阅 HTML中文网 !!

以上就是html/css样式怎么设置表格跨行?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » HTML5 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏