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 ...
随机推荐
- iOS 线上版本图片资源格式的问题导致的闪退
链接:https://www.jianshu.com/p/6492779cb89e來源:简书 导致这种问题的原因是:在 Xcode 8 中,当你资源文件中[含有16位图]或者[图片显示模式γ值为'P3 ...
- Python学习笔录
参考:http://www.runoob.com/python3/python3-data-type.html 1. type和isinstance区别type(A()) == A, type()不会 ...
- CentOS 7.4安装nodejs & nginx & pm2
一.安装nodejs1.查看操作系统信息 uname -a cat /etc/centos-release 2.安装wget yum install wget -y3.安装nodejs 1.下载 wg ...
- 快速搭建python程序
公司对外提供了http接口服务,涉及到了des加密,有客户用Python开发,但搞不定加密,客户的问题就是大问题,虽然以前没接触过Python,也只能硬着头皮上,不停的baidu各种资料,从环境搭建. ...
- Python 爬虫实例（7）—— 爬取 新浪军事新闻
我们打开新浪新闻,看到页面如下,首先去爬取一级 url,图片中蓝色圆圈部分 第二zh张图片,显示需要分页, 源代码: # coding:utf-8 import json import redis i ...
- 使用 fail2ban 防御 SSH 服务器的暴力破解攻击
对于SSH服务的常见的攻击就是暴力破解攻击——远程攻击者通过不同的密码来无限次地进行登录尝试.当然SSH可以设置使用非密码验证验证方式来对抗这种攻击,例如公钥验证或者双重验证.将不同的验证方法的优劣处 ...
- 关于go语言的测试相关内容笔记
其实之前对于测试自己一直比较弱,不管是python的还是go的,关于测试这块并没有非常注重,这次就好好整理一下关于go的测试 单元测试 Go程序主要包含三类测试: 功能测试(test).基准测试(be ...
- Your APP_BUILD_SCRIPT points to an unknown file: ./jni/Android.mk
查下是不是有在环境变量中定义NDK_PROJECT_PATH 这个变量,如果有,删除试试
- 流媒体之HLS——综述
[时间:2018-01] [状态:Open] [关键词:流媒体,stream,HLS] 0 HLS背景及初衷 HLS是由苹果公司发起的流媒体网络传输协议,可参考rfc8261 HTTP Live St ...
- C#访问gsoap的服务
C++开发一个webservice,然后C#开发客户端,这样就需要C#的客户端访问gsoap的服务端.(大家都知道gsoap是C/C++开发webservice的最佳利器) 为什么不考虑直接用wcf开 ...