Web开发——HTML基础（HTML表格 <table>）
参考：
目录：
1、举例
每个表格由 table 标签开始。
每个表格行由 tr 标签开始。
每个表格数据由 td 标签开始。
举例1（表格）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title> </head> <body> <h4>one column</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table> <h4>one row, three column</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table> <h4>two row, three column</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table> </body>
</html>
输出结果：
举例2（表格边框）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title> </head> <body> <h4>two row, two column, with no border</h4>
<table>
<tr>
<td>First</td>
<td>row1</td>
</tr>
<tr>
<td>Second</td>
<td>row2</td>
</tr>
</table> <h4>two row, two column, with a normal border</h4>
<table border="1">
<tr>
<td>First</td>
<td>row1</td>
</tr>
<tr>
<td>Second</td>
<td>row2</td>
</tr>
</table> <h4>two row, two column, with rough border</h4>
<table border="8">
<tr>
<td>First</td>
<td>row1</td>
</tr>
<tr>
<td>Second</td>
<td>row2</td>
</tr>
</table> <h4>two row, two column, with thick border</h4>
<table border="16">
<tr>
<td>First</td>
<td>row1</td>
</tr>
<tr>
<td>Second</td>
<td>row2</td>
</tr>
</table> </body>
</html>
输出结果：
2、表格
2.1 表格属性
可选的属性：
| 属性 | 值 | 描述 |
|---|---|---|
| align |
|
不赞成使用。请使用样式代替。 规定表格相对周围元素的对齐方式。 |
| bgcolor |
|
不赞成使用。请使用样式代替。 规定表格的背景颜色。 |
| border | pixels | 规定表格边框的宽度。 |
| cellpadding |
|
规定单元边沿与其内容之间的空白。 |
| cellspacing |
|
规定单元格之间的空白。 |
| frame |
|
规定外侧边框的哪个部分是可见的。 |
| rules |
|
规定内侧边框的哪个部分是可见的。 |
| summary | text | 规定表格的摘要。 |
| width |
|
规定表格的宽度。 |
全局属性
<table> 标签支持 HTML 中的全局属性。
事件属性
<table> 标签支持 HTML 中的事件属性。
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
2.2 表格的表头
表格的表头使用 <th> 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title> </head> <body> <h4>two row, two column, with a normal border</h4>
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>First</td>
<td>row1</td>
</tr>
<tr>
<td>Second</td>
<td>row2</td>
</tr>
</table> </body>
</html>
输出结果：
2.3 表格中的空单元格
举例1（带表头和表边框）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title> </head> <body> <h4>two row, two column, with a normal border</h4>
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td></td>
<td>row1</td>
</tr>
<tr>
<td>Second</td>
<td>row2</td>
</tr>
</table> </body>
</html>
输出结果：
举例2（无表头，不带表边框）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title> </head> <body> <h4>two row, two column, with a normal border</h4>
<table>
<tr>
<td></td>
<td>row1</td>
</tr>
<tr>
<td>Second</td>
<td>row2</td>
</tr>
</table> </body>
</html>
输出结果：
2.4 带标题的表格
举例（带边框）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title> </head> <body> <h4>two row, two column, with a normal border</h4>
<table border="1">
<caption>My table title</caption>
<tr>
<td>First</td>
<td>row1</td>
</tr>
<tr>
<td>Second</td>
<td>row2</td>
</tr>
</table> </body>
</html>
输出结果：
2.5 跨行或者跨列的表格
举例（带边框）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title> </head> <body> <h4>Table test1</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Tel</th>
<th colspan="3">Code</th>
</tr>
<tr>
<td>name</td>
<td>tel1</td>
<td>tel2</td>
<td>code1</td>
<td>code2</td>
<td>code3</td>
</tr>
</table> <h4>Table test1</h4>
<table border="1">
<tr>
<th>Name</th>
<td>name</td>
</tr>
<tr>
<th rowspan="2">Tel</th>
<td>tel1</td>
</tr>
<tr>
<td>tel2</td>
</tr>
<tr>
<th rowspan="3">Code</th>
<td>code1</td>
</tr>
<tr>
<td>code2</td>
</tr>
<tr>
<td>code3</td>
</tr>
</table> </body>
</html>
输出结果：
2.6 单元格的间距
举例（带边框）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title> </head> <body> <h4>Table test1</h4>
<table border="1">
<tr>
<td>Row1</td>
<td>N1.1</td>
<td>N1.2</td>
</tr>
<tr>
<td>Row2</td>
<td>N2.1</td>
<td>N2.2</td>
</tr>
</table> <h4>Table test2 with cellspacing</h4>
<table border="1" cellspacing = "8">
<tr>
<td>Row1</td>
<td>N1.1</td>
<td>N1.2</td>
</tr>
<tr>
<td>Row2</td>
<td>N2.1</td>
<td>N2.2</td>
</tr>
</table>
</body>
</html>
输出结果：
2.7 单元格的边距
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title> </head> <body> <h4>Table test1 without cellpadding</h4>
<table border="1">
<tr>
<td>Row1</td>
<td>N1.1</td>
<td>N1.2</td>
</tr>
<tr>
<td>Row2</td>
<td>N2.1</td>
<td>N2.2</td>
</tr>
</table> <h4>Table test2 with cellpadding</h4>
<table border="1" cellpadding = "8">
<tr>
<td>Row1</td>
<td>N1.1</td>
<td>N1.2</td>
</tr>
<tr>
<td>Row2</td>
<td>N2.1</td>
<td>N2.2</td>
</tr>
</table>
</body>
</html>
输出结果：
2.8 向表格添加背景颜色或者背景图像
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title> </head> <body> <h4>Table test1 with bgcolor 1</h4>
<table border="1" bgcolor="red">
<tr>
<td>Row1</td>
<td>N1.1</td>
<td>N1.2</td>
</tr>
<tr>
<td>Row2</td>
<td>N2.1</td>
<td>N2.2</td>
</tr>
</table> <h4>Table test2 with bgcolor 2</h4>
<table border="1" bgcolor="baidu.jpg">
<tr>
<td>Row1</td>
<td>N1.1</td>
<td>N1.2</td>
</tr>
<tr>
<td>Row2</td>
<td>N2.1</td>
<td>N2.2</td>
</tr>
</table>
</body>
</html>
输出结果：
2.9 向表格单元添加背景颜色或者背景图像
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title> </head> <body> <h4>Table test1 with bgcolor 1</h4>
<table border="1">
<tr>
<td bgcolor="red">Row1</td>
<td>N1.1</td>
<td>N1.2</td>
</tr>
<tr>
<td bgcolor="baidu.jpg">Row2</td>
<td>N2.1</td>
<td>N2.2</td>
</tr>
</table> </body>
</html>
输出结果：
2.10 表格中排列内容（对齐方式）
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title> </head> <body> <table width="400" border="1">
<tr>
<th align="left">Consumer projects</th>
<th align="right">January</th>
<th align="right">February</th>
</tr>
<tr>
<td align="left">Clothes</td>
<td align="right">$241.10</td>
<td align="right">$50.20</td>
</tr>
<tr>
<td align="left">Cosmetics</td>
<td align="right">$30.00</td>
<td align="right">$44.45</td>
</tr>
<tr>
<td align="left">Foods</td>
<td align="right">$730.40</td>
<td align="right">$650.00</td>
</tr>
<tr>
<th align="left">Totals</th>
<th align="right">$1001.50</th>
<th align="right">$744.65</th>
</tr>
</table> </body>
</html>
输出结果：
2.11 表格frame属性（配置边框是否可见）
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title> </head> <body> <p style="color: red"><strong>Table with frame="box":</strong></p>
<table frame="box">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table> <p style="color: red"><strong>Table with frame="above":</strong></p>
<table frame="above">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table> <p style="color: red"><strong>Table with frame="below":</strong></p>
<table frame="below">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table> <p style="color: red"><strong>Table with frame="hsides":</strong></p>
<table frame="hsides">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table> <p style="color: red"><strong>Table with frame="vsides":</strong></p>
<table frame="vsides">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table> </body>
</html>
输出结果：
3、thead、tbody、tfoot
对于结构复杂的表格，可以将表格分割成三个部分：题头、正文和题注。而这三个部分分别用：thead、tbody和tfoot来标注。
- thead：表格的头，用来存放标题之类的内容。
- tbody：表格的身体，用来存放数据本体内容。
- tfoot：表格的脚，用来存放表格的脚注之类的内容。
在写html代码时候，thead、tbody和tfoot的内容（不论在html代码中三者的先后顺序如何），最终呈现出来的都是thead、tbody和tfoot的顺序。
一般表格需要页面需要表格加载完全后才会显示出来。而加上thead、thead和tfoot后，会优先加载tbody的内容。
Web开发——HTML基础（HTML表格 <table>）的更多相关文章
- Web开发——HTML基础
文档资料参考: 参考:MDN官网 参考:http://www.runoob.com,W3School 参考:https://developer.mozilla.org/zh-CN/docs/Learn ...
- Web开发——HTML基础（图像、音频和视频内容）
参考: 参考:HTML中的图像 参考:视频和音频内容 目录: 1.HTML中的图像 1.1 我们如何在网页上放置图像? (1)替代文字(alt) (2)宽度和高度 (3)图片标题 1.2 用图形和图形 ...
- Web开发——CSS基础
参考: 参考:http://css.doyoe.com/ 参考:http://www.w3school.com.cn/cssref/index.asp 参考:https://www.w3cschool ...
- Web开发——jQuery基础
参考: 参考W3School:jQuery 教程 参考:jQuery 参考手册 参考(常用):jQuery API 测试 JavaScript 框架库 - jQuery 测试 JavaScript 框 ...
- Web开发——JavaScript基础
参考学习: MDN JavaScript:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript ECMAScript 6入门(阮一峰):htt ...
- Web开发——HTML基础（HTML表单/下拉列表/多行输入）
参考: 参考:http://www.w3school.com.cn/html/html_forms.asp 目录: 1.<form> 元素 1.1 <input> 元素(输入属 ...
- Web开发——HTML基础（HTML响应式Web设计 Bootstrap）
参考: 参考:http://www.bootcss.com/ 目录: 1.什么是响应式 Web 设计? 2.创建自己的响应设计 3.使用 Bootstrap 1.什么是响应式 Web 设计? RWD ...
- Web开发——HTML基础（高级文本格式 列表/style）
文档资料参考: 参考:https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_fo ...
- web开发：形变、表格及多行文本操作
一.2d形变 二.动画 三.表格 四.多个文本垂直居中 五.小米形变案例 一.2d形变 /*1.形变参考点: 三轴交界点*/transform-origin: x轴坐标 y轴坐标; /*2.旋转 ro ...
随机推荐
- Swift 拷贝文件夹，实现文件夹内容整体复制
我们知道,在沙盒内,iOS要拷贝一个文件,可以使用 fileManager.copyItem(atPath: fullPath, toPath: fulltoPath) 方法简单实现,不过当我们要拷贝 ...
- SQL DCL 数据控制语句
前言 DCL(Data Control Language)语句:数据控制语句,用于控制不同数据段直接的许可和访问级别的语句.这些语句定义了数据库.表.字段.用户的访问权限和安全级别.主要的语句关键字包 ...
- Linux内核同步
Linux内核剖析 之 内核同步 主要内容 1.内核请求何时以交错(interleave)的方式执行以及交错程度如何. 2.内核所实现的基本同步机制. 3.通常情况下如何使用内核提供的同步机制. 内核 ...
- php中urlencode与rawurlencode的区别
前段时间说自己遇到了个<URL加号引发错误>的BUG,引起这个bug的原因就是自己在URL中使用了 urlencode 函数,该函数会把空格转换成加号,这样就导致URL解析出错,而空格只有 ...
- atitit 读书与获取知识资料的attilax的总结.docx
atitit 读书与获取知识资料的attilax的总结.docx 1.1. 读书即是获取知识,获取资料,获取信息的一种方式 2 2. 获取资料信息的目的,有什么作用,有什么用途?? 2 2.1. 扩大 ...
- 【转载】MapReduce编程 Intellij Idea配置MapReduce编程环境
目录(?)[-] 一软件环境 二创建maven工程 三添加maven依赖 四配置log4j 五启动Hadoop 六运行WordCount从本地读取文件 七运行WordCount从HDFS读取文件 八代 ...
- LZW算法PHP实现方法 lzw_decompress php
LZW算法PHP实现方法 lzw_decompress php 博客分类: Php / Pear / Mysql / Node.js LZW算法简介 字符串和编码的对应关系是在压缩过程中动态生成的 ...
- Java根据子节点递归父节点
先上数据库结构图和树形图: 项目中的一个需求是获取一个商品所属的二级分类名称. 思路分析,首先,我们是可以拿到当前商品所属的子分类的,比如说我买的是一个iPhone SE,对应的分类名称是 iPhon ...
- NaviSoft31.源码开发完成
NaviSoft是作者一人开发完成,从之前的1.0版本,到现在的3.1版本.历经2年时间,开发完成 下面是NaviSoft的源码结构 加QQ群了解更多信息
- C#编程高并发的几种处理方法
并发(英文Concurrency),其实是一个很泛的概念,字面意思就是“同时做多件事”,不过方式有所不同.在.NET的世界里面,处理高并发大致有以下几种方法: 1,异步编程 异步编程就是使用futur ...