养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

如何设置跨行;html如何设置表格跨行

时间:2024-10-09 17:25:06

在前端开发中<table>标签是一个很常用的标签,在制作表格列表时,有时需要设置表格跨行显示,那如何设置表格跨行呢?表格跨行只需在<td>标签中添加rowspan="行数"。如:<tdrowspan="3">

如何设置跨行;html如何设置表格跨行

方法/步骤

1、打开前端开发工具,新建一个html代码页面。如图:

如何设置跨行;html如何设置表格跨行

2、在html代码页面创建<table>、<tr>、<td>标签,然后在<td>标签中添加rowspan="3",rowspan设置需要跨的行数。代码<tableborder="1"style="width:300px;"> <tr> <tdrowspan="3">季度收入</td> <td>1月收入10万</td> </tr> <tr> <td>2月收入12万</td> </tr> <tr> <td>3月收入15万</td> </tr> </table>

如何设置跨行;html如何设置表格跨行

3、保存html代码,使用浏览器打开即可看到效果。如图:

如何设置跨行;html如何设置表格跨行

4、所嘀芟苒疾有代码。可以直接复制下面的所有代码,粘贴到新建的html文件上,保存后运行即可看到跨行效果。所有代码:<!DOCTYPEhtml>&造婷用痃lt;html> <head> <metacharset="utf-8"/> <title>表格隔行</title> </head> <body> <tableborder="1"style="width:300px;"> <tr> <tdrowspan="3">季度收入</td> <td>1月收入10万</td> </tr> <tr> <td>2月收入12万</td> </tr> <tr> <td>3月收入15万</td> </tr> </table> </body></html>

© 一点知识