8、HTML <table>标签(表格)
在 HTML 中,我们使用 <table>
标签来定义表格。HTML 中的表格和 Excel 中的表格是类似的,都包括行、列、单元格、表头等元素。但是 HTML 表格在功能方面远没有 Excel 表格强大,HTML 表格不支持排序、求和、方差等数学计算,它一般用来展示数据。
在学习表格之前,我们不妨先来看一段简单的 HTML 代码:
<body>
<table border="1"><tr><th>名称</th><th>官网</th><th>性质</th></tr><tr><td>英雄联盟</td><td>https://lol.qq.com/act/a20200922competition/index.html?e_code=507042</td><td>教育</td></tr><tr><td>百度</td><td>http://www.baidu.com/</td><td>搜索</td></tr><tr><td>当当</td><td>http://www.dangdang.com/</td><td>图书</td></tr>
</table>
</body>
运行效果如下图:
这是一个 4 行 3 列的表格。第一行为表头,其余三行为内容。
在上述代码中,我们使用了<table>
、<tr>
、<td>
及 <th>
四个标签:
<table>
表示表格,表格的所有内容需要写在<table>
和</table>
之间。<tr>
是 table row 的简称,表示表格的行。表格中有多少个<tr>
标签就表示有多少行数据。<td>
是 table datacell 的简称,表示表格的单元格,这才是真正存放表格数据的标签。单元格的数据可以是文本、图片、列表、段落、表单、水平线、表格等多种形式。<th>
是 table heading 的简称,表示表格的表头。<th>
其实是<td>
单元格的一种变体,本质上还是一种单元格。<th>
一般位于第一行,充当每一列的标题。大多数的浏览器会把表头显示为粗体居中的文本。
默认情况下,表格是没有边框的。但是我们可以使用 <table>
标签中的 border 属性来设置表格的边框宽度,单位是像素(px)。本例中我们将表格的边框宽度设置为 1px。注意,px 是默认的单位,不用显式指明。
1. 表格的边框合并:
网页中常见的表格样式大多为单层边框,上例中展示的表格为双层边框。为了避免这种情况,我们可以利用 CSS 中的 border-collapse
属性来设置表格的边框。border-collapse
是“边框塌陷”的意思,当属性值为 collapse 时,可以使表格的双边框变为单边框。
示例代码如下:
<body>
<table border="1" style="border-collapse: collapse;"><tr><th>名称</th><th>官网</th><th>性质</th></tr><tr><td>英雄联盟</td><td>https://lol.qq.com/act/a20200922competition/index.html?e_code=507042</td><td>教育</td></tr><tr><td>百度</td><td>http://www.baidu.com/</td><td>搜索</td></tr><tr><td>当当</td><td>http://www.dangdang.com/</td><td>图书</td></tr>
</table>
</body>
2. 表格的标题
HTML 允许使用 <caption>
标签来为表格设置标题,标题用来描述表格的内容。
我们常见的表格一般都有标题,表格的标题使用 <caption>
标签来表示。默认情况下,表格的标题位于整个表格的第一行并且居中显示。一个表格只能有一个标题,也就是说 <table>
标签中只能有一个 <caption>
标签。
请看下面的例子:
<body>
<table border="1" style="border-collapse: collapse;">
<caption>表格一</caption><tr><th>名称</th><th>官网</th><th>性质</th></tr><tr><td>英雄联盟</td><td>https://lol.qq.com/act/a20200922competition/index.html?e_code=507042</td><td>教育</td></tr><tr><td>百度</td><td>http://www.baidu.com/</td><td>搜索</td></tr><tr><td>当当</td><td>http://www.dangdang.com/</td><td>图书</td></tr>
</table>
</body>
3. 单元格的合并
和 Excel 类似,HTML 也支持单元格的合并,包括跨行合并和跨列合并两种。
rowspan
:表示跨行合并。在 HTML 代码中,允许我们使用 rowspan 特性来表明单元格所要跨越的行数。
colspan
:表示跨列合并。同样的,在 HTML 中,允许我们使用 colspan 特性来表明单元格所要跨越的列数。
具体格式如下:
<td rowspan="n">单元格内容</td>
<td colspan="n">单元格内容</td>
n
是一个整数,表示要合并的行数或者列数。
此处需注意,不论是 rowspan 还是 colspan 都是 标签的属性。
下面的例子中,我们将表格第 1 列的第 3、4 行单元格合并(跨行合并),将第 4 行的第 2、3 列合并(跨列合并)。具体代码如下:
<body>
<table border="1" style="border-collapse: collapse;">
<caption>表格一</caption><tr><th>名称</th><th>官网</th><th>性质</th></tr><tr><td>英雄联盟</td><td>https://lol.qq.com/act/a20200922competition/index.html?e_code=507042</td><td>教育</td></tr><tr><td rowspan="2">百度</td><td >http://www.baidu.com/</td><td>搜索</td></tr><tr><td colspan="2">http://www.dangdang.com/</td></tr>
</table>
</body>
通过运行结果可以发现:
- rowspan 属性表示向下合并单元格,
- colspan 属性表示向右合并单元格。
每次合并 n 个单元格都要少写 n-1 个标签。
提示:即使一个单元格中没有任何内容,我们仍需使用
<td>
或<th>
元素来表示一个空单元格的存在,建议在<td>
或<th>
中加入
(空格),否则低版本的 IE 可能无法显示出这个单元格的边框。
4、用bgcolor属性设置表格背景色和边框颜色
<tr bgcolor="blue"><th>名称</th><th>官网</th><th>性质</th></tr>
5、用cellspadding属性和cellspacing属性设定边距
- cellpadding属性设定表格单元格中的内容距离格线的距离
<table border="1" style="border-collapse: collapse;" cellpadding="30px;">
- cellspacing属性设定表格相邻单元格边线之间的距离
8、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 ...
最新文章
- eclipse 右键项目为什么没有properties菜单_只需几步,从零开始搭建SSM项目
- 响应式Spring Cloud初探
- ubuntu 内存占用解析
- Python:23种Pandas核心操作
- 深入理解lua的协程coroutine
- vue-cli生成项目时你应当知道的
- Template Metaprogramming
- 72000 Star 下载工具被 GitHub 下架,背后的数字千年版权法案是什么?
- Linux查看磁盘空间和文件夹大小
- Python--JavaScript的对象
- 算法设计与分析(1)——基础知识
- 沁恒CH582F sleep模式RTC唤醒
- Android------APP FPS测试
- 非对称加密算法--RSA加密原理
- Threejs中文文档
- go build cannot find package 问题
- 双塔模型DSSM及各种变体塔
- outlook服务器无法搜索邮件,outlook2010无法搜索解决方法
- java for coun,为什么程序中的一段for循环没有被执行
- Oracle--加锁的方法
热门文章
- HighNewTech:横向、纵向动图查看《Why资本寒冬》——根据中国四大行每年(2004年~2018年)贷款主要流向来看当下的资本寒冬
- ML/DL:关于机器学习、深度学习算法模型的选择
- 自动化机器学习(二)自动构建机器学习流水线
- 实验 3:备份和还原配置文件
- cdh5.13.1 升/降级SPARK2 (parcel安装的同理)
- 树莓派debian配置lamp[解决Apache不显示php网页]
- 解题代码 用jquery控制一个按钮当一次点击完之后5 秒后才能继续点击 验证码的制作...
- Spring基于Setter函数的依赖注入(DI)
- 单词缩写(abbr.cpp)每日一题
- row_number() over(partition by的用法