HTML表格（HTML 表格的使用，收藏这一篇就够了）
HTML 表格
文章目录
- HTML 表格
- 1. 表格的定义
- 2. 表格的标签
- 3. 单元格边框(border)
- 4. 合并单元格
- 4.1 合并行单元格(colspan)
- 4.2 合并列单元格(rowspan)
- 5. 表格格式设置
- 5.1 单元格的对齐（align）（居中，左对齐，右对齐）
- 5.2. 背景色&图片（bgcolor & background）
- 5.2.1 单元格背景色&图片
- 5.2.2 表格背景色&图片
- 5.3 单元格的边距（cellpadding）
- 5.4 单元格间的距离(cellspacing)
- 5.5 显示部分边框（frame & rules）
1. 表格的定义
<table> 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 <tr>、<th> 或 <td> 元素组成表格结构；其中： <tr> 元素定义表格行，<th> 元素定义表头，<td> 元素定义表格单元。
为了让表格更美观，我们会用到：border，colspan，rowspan，align，bgcolor 等来美化表格，具体在本文都有讲解；
2. 表格的标签
在HTML定义表格的时候，有以下标签供我们使用
| NO | 表格标签 | 用处 |
|---|---|---|
| 1 |
<table>
|
定义表格，生成的表格在一对<table></table>中；
|
| 2 |
<caption>
|
定义表格标题，当表格需要标题时，使用<caption>表格标题</caption>
|
| 3 |
<thead>
|
定义表格的页眉 |
| 4 |
<tbody>
|
定义表格的主体 |
| 5 |
<tfoot>
|
定义表格的页脚 |
| 6 |
<th>
|
定义表格的表头，一般是表头中的内容会被加黑； |
| 7 |
<tr>
|
定义表格的行 |
| 8 |
<td>
|
定义表格单元格 |
| 9 |
<col>
|
定义用于表格列的属性 |
| 10 |
<colgroup>
|
定义表格列的组 |
3. 单元格边框(border)
表格边框：在使用<table border="1"></table> 的方式来定义，其中：数字表示边框的宽度，单位为像素；以下举三个边框的例子；
<!--无边框-->
<table><tr><th>编号</th><th>姓名</th><th>性别</th></tr><tr><td>1</td><td>马里奥</td><td>男</td></tr><tr><td>2</td><td>桃花公主</td><td>女</td></tr></table><br>
<!--边框宽度为2-->
<table border="2"><tr><th> 编号 </th><th>姓名</th><th>性别</th></tr><tr><td>1</td><td>马里奥</td><td>男</td></tr><tr><td>2</td><td>桃花公主</td><td>女</td></tr></table>
<br><!--边框宽度为10-->
<table border="10"><tr><th> 编号 </th><th>姓名</th><th>性别</th></tr><tr><td>1</td><td>马里奥</td><td>男</td></tr><tr><td>2</td><td>桃花公主</td><td>女</td></tr></table>
上述代码效果：
4. 合并单元格
合并单元格时，合并行使用：colspan=“2”； 合并列使用：rowspan=“2” （这里的 ‘2’ 表明合并两个单元格），举例如下：
4.1 合并行单元格(colspan)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML表格合并单元格--张凯</title>
</head>
<body><h4>合并行单元格：</h4>
<table border="1">
<caption>通讯录</caption>
<tr><th>姓名</th><th colspan="2">邮箱</th>
</tr>
<tr><td>zhang kai</td><td>123456@qq.com</td><td>123456@163.com</td>
</tr>
</table></body>
</html>
上述代码效果：
4.2 合并列单元格(rowspan)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML表格合并单元格--张凯</title>
</head>
<body><h4>合并列单元格：</h4>
<table border="1">
<tr><th>姓名</th><td>Bill Gates</td>
</tr>
<tr><th rowspan="3">邮箱</th><td>123456@qq.com</td>
</tr>
<tr><td>123456@163.com</td>
</tr>
<tr><td>123456@sina.com</td>
</tr>
</table></body>
</html>
上述代码效果：
5. 表格格式设置
5.1 单元格的对齐（align）（居中，左对齐，右对齐）
在对应的标签上增加 align 键值对，生效方式为"就近原则"，如下例中，桃花公主单元格为left生效；
| align 值 | left | center | right |
|---|---|---|---|
| 效果 | 左对齐 | 居中 | 右对齐 |
<table width="600" border="2"><tr align="center"><th> 编号 </th><th>姓名</th><th>性别</th></tr><tr><td align="center">1</td><td align="left">马里奥</td><td align="right">男</td></tr><tr align="right"><td>2</td><td align="left">桃花公主</td><td>女</td></tr>
</table>
上述代码效果（为了看清效果，所以设置了表格宽度 width=“600” ）：
5.2. 背景色&图片（bgcolor & background）
- 添加背景色使用：bgcolor
- 添加背景图片使用：background
5.2.1 单元格背景色&图片
在单元格的标签上增加 bgcolor 或者 background，就可以添加背景色或者背景图片，以背景色为例；
<table width="600" border="2"><tr align="center"><th> 编号 </th><th>姓名</th><th>性别</th></tr><tr><td align="center">1</td><td align="left" bgcolor='red' >马里奥</td><td align="right">男</td></tr><tr align="right"><td>2</td><td align="left">桃花公主</td><td>女</td></tr>
</table>
上述代码效果：
5.2.2 表格背景色&图片
在表格的标签上增加bgcolor 或者 background，就可以添加背景色或者背景图片，以背景图片为例；
<table width="600" border="2" background='https://p1.ssl.qhimgs1.com/sdr/400__/t01f04c2504aa62bab7.gif'><tr align="center"><th> 编号 </th><th>姓名</th><th>性别</th></tr><tr><td align="center">1</td><td align="left">马里奥</td><td align="right">男</td></tr><tr align="right"><td>2</td><td align="left">桃花公主</td><td>女</td></tr></table>
上述代码效果（由于我挑了一张动态图，所以这里的背景是动态的！）：
5.3 单元格的边距（cellpadding）
在<table></table>标签使用cellpadding 即可，方法与上面的图片一样，直接举例如下：
<table width="600" border="2" cellpadding="8"><tr align="center"><th> 编号 </th><th>姓名</th><th>性别</th></tr><tr><td align="center">1</td><td align="left" bgcolor='red' >马里奥</td><td align="right">男</td></tr><tr align="right"><td>2</td><td align="left">桃花公主</td><td>女</td></tr>
</table>
上述代码效果：
5.4 单元格间的距离(cellspacing)
在<table></table>标签使用 cellspacing 即可，方法与上面的图片一样，直接举例如下：
<table width="600" border="2" cellspacing="8"><tr align="center"><th> 编号 </th><th>姓名</th><th>性别</th></tr><tr><td align="center">1</td><td align="left" bgcolor='red' >马里奥</td><td align="right">男</td></tr><tr align="right"><td>2</td><td align="left">桃花公主</td><td>女</td></tr>
</table>
上述代码效果：
5.5 显示部分边框（frame & rules）
- 可以在
<table></table>标签内，增加 frame 键值对，控制表格外边框；键值对对应关系如下：
| frame 键值 | 效果 |
|---|---|
| void | 不显示外侧边框 |
| above | 显示上部的外侧边框 |
| below | 显示下部的外侧边框 |
| hsides | 显示上部和下部的外侧边框 |
| vsides | 显示左边和右边的外侧边框 |
| lhs | 显示左边的外侧边框 |
| rhs | 显示右边的外侧边框 |
| box | 在所有四个边上显示外侧边框 |
| border | 在所有四个边上显示外侧边框 |
- 可以在
<table></table>标签内，增加 rules 键值对，控制表格外边框；键值对对应关系如下：
| frame 键值 | 效果 |
|---|---|
| none | 没有线条 |
| groups | 位于行组和列组之间的线条 |
| rows | 位于行之间的线条 |
| cols | 位于列之间的线条 |
| all | 位于行和列之间的线条 |
- frame 举例如下：
<table width="600" cellspacing="8" frame="box"><tr align="center" ><th> 编号 </th><th>姓名</th><th>性别</th></tr><tr><td align="center" >1</td><td align="left" bgcolor='red' >马里奥</td><td align="right">男</td></tr><tr align="right"><td>2</td><td align="left">桃花公主</td><td>女</td></tr>
</table>
输出效果：
- rules举例如下：
<table width="600" cellspacing="8" rules="cols"><tr align="center" ><th> 编号 </th><th>姓名</th><th>性别</th></tr><tr><td align="center" >1</td><td align="left" bgcolor='red' >马里奥</td><td align="right">男</td></tr><tr align="right"><td>2</td><td align="left">桃花公主</td><td>女</td></tr>
</table>
输出效果：
HTML表格（HTML 表格的使用，收藏这一篇就够了）相关推荐
- 史上最全的Linux常用——目录和文件管理命令——收藏这一篇就够了！（超全，超详细）
史上最全的Linux常用--目录和文件管理命令--收藏这一篇就够了!(超全,超详细) Linux目录结构 命令 查看文件内容:-cat 查看文件内容:-more 查看文件内容:-less 查看文件内容 ...
- 史上最全的Linux常用命令汇总①收藏这一篇就够了！（超全，超详细）
史上最全的Linux常用命令汇总①(超全面!超详细!)收藏这一篇就够了! Linux命令基础 Shell Linux命令分类 Linux命令行的格式 编辑Linux命令行的辅助操作 获取命令帮助的方法 ...
- Pandas 表格样式设置指南，看这一篇就够了！
源自/Python数据之道 最近这些年,Python在数据分析以及人工智能领域是越来越火. 这离不开pandas.numpy.sklearn.TensorFlow.PyTorch等数据科学包,尤其是 ...
- 【Python】Pandas 表格样式设置指南，看这一篇就够了！
Pandas 表格样式设置指南 来源:Python数据之道 (ID:PyDataLab) 作者:阳哥 最近这些年,Python在数据分析以及人工智能领域是越来越火. 这离不开pandas.numpy. ...
- 2021超全大数据面试宝典，吐血总结十万字，大数据面试收藏这一篇就够了
本文最新版已发布至公众号[五分钟学大数据] 获取此套面试题最新pdf版,请搜索公众号[五分钟学大数据],对话框发送 面试宝典 扫码获取最新PDF版: 版本 时间 描述 V1.0 2020-02-18 ...
- WWDC后苹果审核指南更新多达158处！最全详解，收藏这一篇就够了
近日,令全球开发者翘首以盼的 WWDC 正在如火如荼的召开.没有在硬件.软件上太大突破的苹果,却在审核指南上来了一次狠狠的更新. 就在昨日,七麦研究院发现苹果在审核指南上进行了大大小小约 158 处修 ...
- 软件测试笔试十大逻辑题，收藏这一篇就够了
1.烧一根不均匀的绳,从头烧到尾总共需要1个小时.现在有若干条材质相同的绳子,问如何用烧绳的方法来计时一个小时十五分钟呢? 第一步:A绳从两头烧,同时B绳只烧一头.30分钟后,A烧完了. 第二步:A烧 ...
- 等保测评2.0超详细解读，收藏这一篇就够了
一.等级保护介绍 1.1什么是等级保护 网络安全等级保护是指对国家重要信息.法人和其他组织及公民的专有信息以及信息和存储.传输.处理这些信息的信息系统分等级实行安全保护,对信息系统中使用的信息安全产品 ...
- 写了 30 多个 Go 常用文件操作的示例，收藏这一篇就够了
Go官方提供的文件操作标准库分散在os.ioutil等多个包中,里面有非常多的方法涵盖了文件操作的所有场景,不过因为我平时开发过程中需要直接操作文件的场景其实并不多,在加上 Go 标准库的文档太难搜索 ...
- unity ui框架_[教程汇总+持续更新]Unity从入门到入坟——收藏这一篇就够了
----------------塔防(更新中),作者重写了基础篇(下方目录为:1.1(新) 基础)目前还在持续连载了5篇,因为不多我们更新完就能追到原作者的进度了------------------- ...
最新文章
- linux 使用 C 语言获得系统 MAC 地址
- SQL Server创建索引
- 在tsx中引入less会提示模块找不到,但是可以运行
- web---SSL/TSL
- Eclipse 答疑：Eclipse 如何设置 Java 代码自动提示和自动补全？
- 用线程实现动态改变图标
- build.gradle配置参数详解
- 【Python3网络爬虫开发实战】1.7.3-Appium的安装
- 【C/C++】深入理解原子操作 volatile i为什么不能保证i++的原子性
- orm2 中文文档 4. 定义关联
- 《SQL高级应用和数据仓库基础（MySQL版）》作业 ·004
- 常见linux服务器系统异常问题
- 在python中查看关键字、需要执行,如何在一个文本文件，二进制执行搜索来搜索一个Python关键字？...
- axios发送网络请求
- mllib线性回归GeneralizedLinearModel GeneralizedLinearAlgorithm源码解析
- mysql zf_ZF 连接 Mysql
- 西门子主程序调用子程序_西门子S7-200系列PLC子程序的调用方法
- 激光雷达科普（1）：激光雷达的分类及重要参数
- 谷歌大牛Jeff Dean单一作者撰文：深度学习研究的黄金十年
- 检测华为网络设备的常用命令