HTML <table>标签(表格)
在学习表格之前,我们不妨先来看一段简单的 HTML 代码:
<body><table border="1" ><!-- 表格的标题 --><caption>学生信息表</caption><tr><th >姓名</th> <th >学号</th><th >性别</th><th >年龄</th></tr><tr><th>张三</th><td>191111</td><td>男</td><td>18</td></tr><tr><th>李四</th><td>192222</td><td>男</td><td>17</td></tr><tr><th>王五</th><td>193333</td><td>男</td><td>19</td></tr></table>
</body>
运行效果如下:
这是一个四行四列的表格,
在上述代码中,我们使用了<table>、<caption>,<tr>、<td> 及 <th> 五个标签:
- <table> 表示表格,表格的所有内容需要写在 <table> 和 </table> 之间。
- <caption>是表格的标题,内容写在caption内
- <tr> 是 table row 的简称,表示表格的行。表格中有多少个 <tr> 标签就表示有多少行数据。
- <td> 是 table datacell 的简称,表示表格的单元格,这才是真正存放表格数据的标签。单元格的数据可以是文本、图片、列表、段落、表单、水平线、表格等多种形式。
- <th> 是 table heading 的简称,表示表格的表头。<th> 其实是 <td> 单元格的一种变体,本质上还是一种单元格。<th> 一般位于第一行,充当每一列的标题。大多数的浏览器会把表头显示为粗体居中的文本。
1. 表格的边框合并:
细心的读者可能已经发现了,网页中常见的表格样式大多为单层边框,上例中展示的表格为双层边框。为了避免这种情况,我们可以利用 CSS 中的 border-collapse 属性来设置表格的边框。border-collapse 是“边框塌陷”的意思,当属性值为 collapse 时,可以使表格的双边框变为单边框。
<body><table border="1" style="border-collapse: collapse;"><!-- 表格的标题 --><caption>学生信息表</caption><tr><th >姓名</th> <th >学号</th><th >性别</th><th >年龄</th></tr><tr><th>张三</th><td>191111</td><td>男</td><td>18</td></tr><tr><th>李四</th><td>192222</td><td>男</td><td>17</td></tr><tr><th>王五</th><td>193333</td><td>男</td><td>19</td></tr></table>
</body>
效果运行如下:
3. 单元格的合并
和 Excel 类似,HTML 也支持单元格的合并,包括跨行合并和跨列合并两种。
- rowspan:表示跨行合并。在 HTML 代码中,允许我们使用 rowspan 特性来表明单元格所要跨越的行数。
- colspan:表示跨列合并。同样的,在 HTML 中,允许我们使用 colspan 特性来表明单元格所要跨越的列数。
具体格式如下:
<td rowspan="n">单元格内容</td>
<td colspan="n">单元格内容</td>
n 是一个整数,表示要合并的行数或者列数。
此处需注意,不论是 rowspan 还是 colspan 都是 <td> 标签的属性。
下面的例子中,我们将表格第 1 列的第 3、4 行单元格合并(跨行合并),将第 4 行的第 2、3 列合并(跨列合并)。具体代码如下:
<body><table border="1" style="border-collapse: collapse;"><!-- 表格的标题 --><caption>学生信息表</caption><tr><th >姓名</th> <th >学号</th><th >性别</th><th >年龄</th></tr><tr><th>张三</th><td>191111</td><td>男</td><td>18</td></tr><tr><th rowspan="2">李四</th><td>192222</td><td>男</td><td>17</td></tr><tr><!-- <th>王五</th> --><td colspan="2">193333</td><!-- <td>男</td> --><td>19</td></tr></table>
</body>
运行效果如下:
通过运行结果可以发现:
- rowspan 属性表示向下合并单元格,colspan 属性表示向右合并单元格。
- 每次合并 n 个单元格都要少写 n-1 个<td>标签。
HTML <table>标签(表格)相关推荐
- 使用table标签制作常用的html表格
table 标签用于定义 HTML 表格.简单的 HTML 表格由 table 元素以及一个或多个 tr.th 或 td 元素组成. tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元. ...
- 8.HTML标签-表格标签table
HTML标签-表格标签table 文章目录 HTML标签-表格标签table 一. 表格基础. 1.表格的功能. 2.表格的常用标签. 3.表格的常用属性. 二.代码展示 三.代码效果 一. 表格基础 ...
- 表格table标签的属性及使用方式
表格 table 创建表格 在HTML网页中,要想创建表格,就需要使用表格相关的标签.创建表格的基本语法格式如下: <table><tr><td>单元格内的文字&l ...
- <table>表格标签属性
<table>表格标签属性 源代码 1.表格的相关标签 <table> table是用于定义表格的标签 <tr> ...
- <table></table>表格标签的基本概念和基本属性
学习目标: 掌握<table></table>的使用和基本属性 学习内容: 标签是用来创建 HTML 表格的 简单的 HTML 表格由 table 元素以及一个或多个 tr(定 ...
- table标签,制作表格注册表
table标签,制作表格注册表 今天复习了一下html,发现在表格,表单这一方面还是不够熟练,所以写了这篇文章,以便复查. 首先,来看看要做成的注册表: 性格测试表,一键生成你的性格表 这里我用标题标 ...
- table标签、表格的跨行跨列、ifarme标签
table标签 需求: 制作一个带表头的三行山列的表格,并显示边框:修改表格的宽度.高度.表格的对齐方式.单元格间距. <!DOCTYPE html> <html lang=&quo ...
- 简单解析表格table标签的用法
简单解析表格table标签的用法 1.表格加上边框并且效果如下图所示: cellspacing(单元格间距): 表格边框与单元格的边框之间的缝隙 cellpadding(单元格边距): 单元格内容与单 ...
- 不用table标签实现表格
最近开始接触uniapp写微信小程序,发现uniapp不兼容table标签,所以自己写了一个表格样式.由于有border的存在,使用的时候需要自行计算好每个格子和整体表格的大小. 结构 (四行五列): ...
- 用html语言编写表格,HTML表格(table标签)
在 HTML 中,我们使用 一个完整的表格由多个标签构成,我们不妨先来看一段简单的 HTML 代码: 网站 域名 分类 C语言中文网 c.biancheng.net 在线教育 百度 www.baidu ...
最新文章
- SQL Server-聚焦sp_executesql执行动态SQL查询性能真的比exec好?
- kaggle(一)训练猫狗数据集
- ANSYS——命令流学习(材料属性设置、建模的命令流)
- mongodb备份oplog_MongoDB 备份(mongodump)与恢复(mongorestore)
- day1作业:登录接口
- (前端)html与css css 19、tab栏
- java html转换xml文件,使用Java在HTML中转换XML + XSL
- 黄聪:Loopup集合类笔记
- 本地如何搭建FPT服务
- WinRAR 6.0 永久去除广告
- android 地址json文件,Android访问assets本地json文件的方法
- 季节怎么形容_如何形容四季?
- wifi 中间人攻击_公共wifi下的中间人攻击
- AJAX避免用户重复提交请求
- mac nexus 资源下载及安装
- 基于ESP8266上云实验
- STC8H1K08 - INT4 - 下降沿触发外部中断 4
- matlab一直系统函数画脉冲响应,MATLAB之使用 impz 函数计算并画出脉冲响应
- 获取当前CPU的运行速度
- 如何评价现在的人工智能技术
热门文章
- Mysql学习之二. ken_len索引长度计算
- 工业嵌入式计算机系统介绍
- 尘埃粒子计数器帮助实时监测半导体车间空气中的粒子数
- sja1000 中断_SJA1000程序
- 数字证书连接服务器异常,连接时Socket.io + SSL +自签名CA证书出现错误
- 西工大计算机学院保研人数,陕西多所大学保研率超20%,西北工业大学27%,推免999人...
- 如果你打算将游戏业务外包 那么这篇文章你就不得不看!
- java项目实验报告_javaweb项目实验报告.docx
- CNN卷积神经网络十二生肖识别项目(一)数据下载篇
- LeetCode笔试刷题一. 贪心算法