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 ...
随机推荐
- 试水STF（smartphone test farm）
STF简介 简介: STF , smartphone test farm, 是一款能够通过浏览器远程管理智能设备的系统, 能为移动自动化测试提供方便快捷的服务,免去测试工程师的后顾之忧. 功能点: 支 ...
- CentOS 安装 Redis 5
https://redis.io/download下载最新stable版,当前最新版为redis-5.0.3.tar.gz cd /usr/local/src && wget http ...
- 二叉树遍历-c实现
这里主要是三种遍历,先序(preorder,NLR),中序(Inorder,LNR),后序(Postorder,LRN) N:node,L:left,R:right 基本排序:先序(NLR,节点,左, ...
- easyui的datagrid和treegrid的使用
$('#listTree').treegrid({ idField: 'id', treeField: 'menuName', columns: [[ { title: 'Task Name', fi ...
- 【云计算】IaaS、PaaS和SaaS
1. SaaS:Software-as-a-Service(软件即服务) 提供给客户的服务是运营商运行在云计算基础设施上的应用程序,用户可以在各种设备上通过客户端界面访问,如浏览器.消费者不需要管理或 ...
- 【iCore4 双核心板_uC/OS-II】例程二：任务的建立与删除
一.实验说明: 本例程建立三个任务,通过任务寄存器来实现任务的建立与删除功能.红灯和绿灯同时以固定 频率闪烁,当任务寄存器为5时,删除绿灯闪烁的任务LED1,此时只有红灯闪烁,当任务寄存器的 值为10 ...
- Linux配置定时，使用 crontab -e 与 直接编辑 /etc/crontab 的区别
转自:http://blog.csdn.net/catoop/article/details/41821395 版权声明:本文为博主原创文章,未经博主允许不得转载. Linux配置定时任务,大家都知道 ...
- surface shader获取像素深度差值
void vert (inout appdata_full v, out Input i) { UNITY_INITIALIZE_OUTPUT(Input, i); i.proj = ComputeS ...
- hdoj：2051
#include <iostream> #include <string> #include <vector> #include <algorithm> ...
- 关于.NET编译的目标平台(AnyCPU,x86,x64) (转)
关于.NET编译的目标平台(AnyCPU,x86,x64)(转) 今天有项目的代码收到客户的反馈,要求所有的EXE工程的目标平台全部指定成x86,而所有DLL工程的目标平台全部指定成AnyCPU . ...