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:具有默认值的构造函数 实例描述: 有时候在创建对象时候,我们希望某些属性具有默认值 案例思路: ...
随机推荐
- centos7安装mysql-5.7.28
mysql是我们最常用的开源的关系型数据库,mysql不同版本有时候安装的方式也不尽相同,下面以mysql5.7.28版本为例梳理一下安装细节: 1.下载mysql-5.7.28,URL:https: ...
- 在Mysql中，事务是如何实现的呢？
hello大家好,我是一个爱看底层的小码,对于每一个学习mysql数据库的同学来说,事务都是一个绕不开的话题,简单的说来事务是指访问并可能更新数据库中各项数据项的一个程序执行单元.事务的四个特征无非就 ...
- 实验16：ACL
实验13-1:标准ACL Ø 实验目的通过本实验可以掌握:(1)ACL 设计原则和工作过程(2)定义标准ACL(3)应用ACL(4)标准ACL 调试 Ø 拓扑结构 本实验拒绝PC1 所在网 ...
- asp.net core 3.x 身份验证-2启动阶段的配置
注册服务.配置选项.添加身份验证方案 在Startup.ConfigureServices执行services.AddAuthentication() 注册如下服务(便于理解省略了部分辅助服务): s ...
- HDU 1251 统计难题 （Trie树模板题）
题目链接:点击打开链接 Problem Description Ignatius最近遇到一个难题,老师交给他很多单词(只有小写字母组成,不会有重复的单词出现),现在老师要他统计出以某个字符串为前缀的单 ...
- 分布式SnowFlakeID（雪花ID）原理和改进优化
最近在研究分布式框架的组件和整体设计思路.所有的问题,一旦涉及分布式难度就呈几何倍数的提升.包括最常见的ID生成也是,单机情况下,使用数据库自增ID.UUID都是简单易行的选择 但在分布式环境下,就需 ...
- D语言-随机数游戏
由于不会D语言的随机数,干脆core.stdc.stdlib调用stdlib.h 这里mark一下,类型转换是cast(D语言类型) NULL不能用,要用null import std.stdio; ...
- java中深拷贝浅拷贝简析
Java中对象的创建 clone顾名思义就是复制, 在Java语言中, clone方法被对象调用,所以会复制对象.所谓的复制对象,首先要分配一个和源对象同样大小的空间,在这个空间中创建一个新的对象.那 ...
- [redis读书笔记] 第一部分 数据结构与对象 压缩列表
压缩列表是为了节省内存而设计的,是列表键和哈希键的底层实现之一. 压缩列表的逻辑如下,
- 使用requests、BeautifulSoup、线程池爬取艺龙酒店信息并保存到Excel中
import requests import time, random, csv from fake_useragent import UserAgent from bs4 import Beauti ...