HTML表格概念、语法、操作、案例
创建两行三列表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body> <table border="1">
<tr>
<td>2018年</td>
<td>2019年</td>
<td>2020年</td>
</tr>
<tr>
<td>8000</td>
<td>10000</td>
<td>120000</td>
</tr>
</table>
</body>
</html>
表格
th 表头，内容居中，加粗显示
<caption></caption> 表格标题，居中显示
表格作为整体被解析，完全解析完才会被显示出来
表格结构标签可以优化显示，加载一部分显示一部分
thead 表格的头（表头）
tbody 表格的主体（数据）
tfoot 表格的脚（脚注）
表格属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body> <table border="1" width="500px" bgcolor="#f2f2f2" cellspacing="0" cellpadding="5px" align="center" frame="box" rules="rows">
<caption>前端工程师平均工资</caption>
<thead>
<tr>
<th>城市</th>
<th>2018年</th>
<th>2018年</th>
<th>2019年</th>
<th>2020年</th>
</tr>
<tr>
<th>城市</th>
<th>上半年</th>
<th>下半年</th>
<th>2019年</th>
<th>2020年</th>
</tr>
</thead>
<tbody>
<tr>
<td>北京</td>
<td>8000</td>
<td>9000</td>
<td>10000</td>
<td>120000</td>
</tr>
<tr>
<td>上海</td>
<td>6000</td>
<td>7000</td>
<td>8000</td>
<td>100000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>合计</td>
<td>7000</td>
<td>8000</td>
<td>9000</td>
<td>110000</td>
</tr>
</tfoot>
</table>
</body>
</html>
tr标签属性
td和th标签属性
thead / tbody / tfoot 标签属性
跨列属性 colspan
跨行属性 rowspan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body> <table border="1" width="500px" bgcolor="#f2f2f2" cellspacing="0" cellpadding="5px" align="center" frame="box" rules="all">
<caption>前端工程师平均工资</caption>
<thead>
<tr bgcolor="#d8e4bc">
<th rowspan="2">城市</th>
<th colspan="2">2018年</th> <th rowspan="2">2019年</th>
<th rowspan="2">2020年</th>
</tr>
<tr bgcolor="#d8e4bc"> <th>上半年</th>
<th>下半年</th> </tr>
</thead>
<tbody align="center" valign="middle">
<tr>
<td bgcolor="#b8cce4">北京</td>
<td>8000</td>
<td>9000</td>
<td>10000</td>
<td>12000</td>
</tr>
<tr>
<td bgcolor="#b8cce4">上海</td>
<td>6000</td>
<td>7000</td>
<td>8000</td>
<td>10000</td>
</tr>
</tbody>
<tfoot>
<tr align="center">
<td bgcolor="#b8cce4">合计</td>
<td>7000</td>
<td>8000</td>
<td>9000</td>
<td>11000</td>
</tr>
</tfoot>
</table>
</body>
</html>
表格嵌套：
嵌入的必须是完整的表格结构
放到td标签中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body> <table border="1" width="500px" bgcolor="#f2f2f2" cellspacing="0" cellpadding="5px" align="center" frame="box" rules="all">
<caption>前端工程师平均工资</caption>
<thead>
<tr bgcolor="#d8e4bc">
<th>城市</th>
<th>2018年</th>
<th>2019年</th>
<th>2020年</th>
</tr>
</thead>
<tbody align="center" valign="middle">
<tr>
<td bgcolor="#b8cce4">北京</td>
<td>
<table border="1" cellspacing="0" frame="void">
<tr>
<td>上半年</td>
<td>下半年</td>
</tr>
<tr>
<td>8000</td>
<td>9000</td>
</tr>
</table>
</td>
<td>10000</td>
<td>12000</td>
</tr>
</tbody>
</table>
</body>
</html>
HTML表格概念、语法、操作、案例的更多相关文章
- linux磁盘 分区 物理卷 卷组 逻辑卷 文件系统加载点操作案例
转自:truemylife.linux磁盘 分区 物理卷 卷组 逻辑卷 文件系统加载点操作案例 基本概念: 磁盘.分区.物理卷[物理部分] 卷组[中间部分] 逻辑卷.文件系统[虚拟化后可控制部分] 磁 ...
- 采用DOM进行表格的修改操作
2015-08-31 <html> <head> <title>采用DOM进行表格的修改操作</title> <script language=& ...
- clearcase 中一些概念和操作
clearcase 中一些概念和操作 视图 常用命令 ClearCase 安装和使用的一些FAQ 参考 ClearCase具体的说是做配置管理的工具,只是SCM管理工具其中的一种.是RATIONAL公 ...
- 基本数据结构——堆(Heap)的基本概念及其操作
基本数据结构――堆的基本概念及其操作 小广告:福建安溪一中在线评测系统 Online Judge 在我刚听到堆这个名词的时候,我认为它是一堆东西的集合．．． 但其实吧它是利用完全二叉树的结构来维护一组 ...
- TensorFlow简易学习[1]:基本概念和操作示例
简介 TensorFlow是一个实现机器学习算法的接口,也是执行机器学习算法的框架.使用数据流式图规划计算流程,可以将计算映射到不同的硬件和操作系统平台. 主要概念 TensorFlow的计算可以表示 ...
- Linux 基本概念和操作2
接着上一篇 "Linux 基本概念和操作" 1.删除文件 有时候我们想要删除的文件是只读文件,直接使用rm 文件名,会报错.这时使用" -f " 参数强制删除. ...
- AngularJS基于MVC的复杂操作案例
AngularJS基于MVC的复杂操作案例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...
- Linux基本概念及操作
基本概念及操作 一.实验介绍 1.1 实验内容: 实验楼环境介绍 常用 Shell 命令及快捷键 Linux 使用小技巧 1.2 实验知识点 Linux 基本命令 通配符的使用 基本软件安装 查看帮助 ...
- Java基础概念语法
Java基础概念语法 注释 单行注释 //行注释说明 多行注释 /* 多行注释说明 */ 文档注释 /** *@author 程序的作者 *@version 源文件的版本 *@param 方法的参数说 ...
- js的继承操作案例
js的继承操作案例 一.总结 1.要案例要求,内心中想出操作要点 二.js的继承操作案例 案例 练习1:具有默认值的构造函数 实例描述: 有时候在创建对象时候,我们希望某些属性具有默认值 案例思路: ...
随机推荐
- 找不到文件异常java.io.IOException: Resource [classpath:shiro.ini] could not be found.
情景 tomcat启东时,老是报错,在classpath下找不到配置文件,但是配置文件已经放在resource目录下了 解决方案 出现该异常的原因,是因为新建的conf文件夹,识别不了,因为没有设置成 ...
- Arduino系列之DHT11模块采集数据（一）
下面我将介绍DHT11模块的相关用法 DHT11数字传感器概述:是一款含有已校准数字信号输出的温湿度复合传感器 .它应用专用的数字模块采集技术和温湿度传感技术 ,确保产品具有极 高的可靠性与卓越的长期 ...
- 讲一下java，c语言，c+和c++都是干嘛的，他们运行的软件都是哪些
讲一下java,c语言,c+和c++都是干嘛的,他们运行的软件都是哪些 都是用于开发软件的,用于不同的方面.比如,淘宝的后台,是java做的.而腾讯的qq的后台服务器,是c和c++的.暴雪游戏的后台服 ...
- MySQL初次安装配置及修改密码
安装前的准备工作: 下载完后,我们将 zip 包解压到相应的目录,这里我将解压后的文件夹放在 C:\mysql-8.0.11 下. 接下来我们需要配置下 MySQL 的配置文件 打开刚刚解压的文件夹 ...
- 套接字名与DNS
2 现代地址解析 首先要说Python套接字最强大的工具之一-------getaddrinfo() 这个函数可能是我们用来将用户指定的主机名和端口号转换为可供套接字方法使用的地址时所需的唯一方法. ...
- Codeforces_712_B
http://codeforces.com/problemset/problem/712/B 水,判断奇偶即可. #include<iostream> #include<string ...
- ARTS Week 11
Jan 6, 2020 ~ Jan 12, 2020 Algorithm Problem 108 Convert Sorted Array to Binary Search Tree (将有序数组转化 ...
- SpringBoot使用ELK日志收集ELASTIC (ELK) STACK
1:资源 # 文档向导 # logstash https://www.elastic.co/guide/en/logstash/current/index.html #kibana https://w ...
- Thread.yield( )方法
Java线程中的Thread.yield( )方法,译为线程让步.顾名思义,就是说当一个线程使用了这个方法之后,它就会把自己CPU执行的时间让掉,让自己或者其它的线程运行,注意是让自己或者其他线程运行 ...
- 万字分享，我是如何一步一步监控公司MySQL的？
整理了一些Java方面的架构.面试资料(微服务.集群.分布式.中间件等),有需要的小伙伴可以关注公众号[程序员内点事],无套路自行领取 更多优选 一口气说出 9种 分布式ID生成方式,面试官有点懵了 ...