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

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

操作方法

  • 01

    打开前端开发工具，新建一个html代码页面。如图：

  • 02

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

  • 03

    保存html代码，使用浏览器打开即可看到效果。如图：

  • 04

    所有代码。可以直接复制下面的所有代码，粘贴到新建的html文件上，保存后运行即可看到跨行效果。 所有代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>表格隔行</title> </head> <body> <table border="1" style="width: 300px;"> <tr> <td rowspan="3">季度收入</td> <td>1月收入10万</td> </tr> <tr> <td>2月收入12万</td> </tr> <tr> <td>3月收入15万</td> </tr> </table> </body> </html>

赞 (0)

相关推荐

  • 怎么设置Word2019文档中表格内文字为竖排显示

    怎么设置Word2019文档中表格内文字为竖排显示

    word2019是我们常用的一款文字处理软件,深受大家的欢迎,是我们学习办公的助手,有的朋友想知道怎么设置Word2019文档中表格内文字为竖排显示,小编为大家解答这个问题.具体如下:1. 首先,请大 ...

  • Word如何禁止表格跨行断页

    Word如何禁止表格跨行断页

    Word是现在十分常用的文件类型之一,有些新用户不知道Word如何禁止表格跨行断页,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步先打开电脑中的Word文档,接着根据下图箭头所指 ...

  • cad内框线和外框线的设置（cad2014图框和表格的制作）

    cad内框线和外框线的设置（cad2014图框和表格的制作）

    点击上方[大水牛测绘]关注我们CAD软件中对于表格的框线样式编辑类似于办公软件Excel中的边框功能,我们可以对CAD表格中的框线进行加粗.更换颜色.更换线型和双线等设置,本文为大家介绍两种更改表格框 ...

  • 索尼笔记本怎么进入bios 索尼笔记本设置U盘启动设置教程

    最近在给身边一使用索尼笔记本电脑的朋友重转系统的时候，出现了一些令笔者比较尴尬的事情，在使用U盘装系统的时候，因不熟悉索尼笔记本怎么进入bios，导致无法设置U盘启动，最后只能通过查阅索尼笔记本的说明 ...

  • 华硕主板怎么设置硬盘(移动硬盘)启动设置方法

    华硕主板怎样设置硬盘启动？ 开机按DEL进入BIOS 找boot相关的内容 将第一个设定为CD-ROM或者HDD 如果是CD-ROM 只要光驱内没有碟片 那就会用HDD启动 华硕主板怎么设置移动硬盘启 ...

  • win10开机密码怎么设置 win10开机密码设置.取消教程

    win10开机密码怎么设置 win10开机密码设置、取消教程 取消Win10开机密码设置步骤如下： 一、首先点击Win10桌面左下角的Windows开始图标，进入Win10开始菜单，打开开始菜单后，在 ...

  • TP-LINK TL-WR700N设置指南-Router模式设置方法

    五种工作模式分别为：AP模式、Router模式、Repeater模式、Bridge模式、Client模式。Router模式下，TL-WR700N就相当于一台无线路由器，有线口作为WAN口，无线为LAN ...

  • Win8.1通过设置超级按钮进入设置界面快速调整一些常用设置

    在Win8.1系统中，用户可以通过“设置”超级按钮可以快速调整一些常用设置（如亮度和音量）、查找电脑设置（如个性化、用户帐户和设备）以及更改你所使用的应用的设置。 快速调整常用设置 “设置”超级按钮中 ...

  • 支付宝钱包头像如何设置?支付宝钱包头像设置教程

    支付宝钱包头像如何设置？支付宝钱包更换用户头像其实原理跟微信头像以及QQ头像更换是一样的，看完下面的图文详细介绍你就轻松学会了！ 一、支付宝钱包更换用户头像其实原理跟微信头像以及QQ头像更换是一样的， ...