姓名

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>

<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>

<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>

说明:

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

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

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

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

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

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

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

以上就是html/css样式怎么设置表格跨行?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读