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 ...
随机推荐
- kuda 了解片
本来上个月想去了解一下kuda的,结果一直没有抽出时间去搞,现在大致先开个头,方便后面深入! Apache Kudu是开源Apache Hadoop生态系统的新成员,它完善了Hadoop的存储层,可以 ...
- 构建自己的 Smart Life 私有云（二）-> 连通 IFTTT & Slack
博客搬迁至https://blog.wangjiegulu.com RSS订阅:https://blog.wangjiegulu.com/feed.xml 原文链接:https://blog.wang ...
- 物联网全景动态图谱2.0|PaaS物联网平台汇总（上篇）
物联网智库 原创 物联网智库 整理发布 转载请注明来源和出处 ------ [导读] ------ 毫无疑问,2018年物联网对行业的深度变革才刚刚开启. 物联网产业链企业的质与量将进入全面爆 ...
- Unity3D中录制和输出wav文件
近期在做视频录制方面的事情,看了下音频的录制和输出.主要参考官方的FrameCapturer: https://github.com/unity3d-jp/FrameCapturer wav文件结构较 ...
- Filter需要配置多个url-pattern
最近做项目遇到一个Filter需要配置多个url-pattern,上网查了下资料,经测试,现总结下 filter-mapping元素位于web.xml文件中filter元素之后serlvet元素之前. ...
- OraclePLSQL编程
PL/SQL编程 pl/sql(procedural language/sql)是Oracle在标准的sql语言上的扩展.pl/sql不仅允许嵌入式sql语言,还可以定义变量和常量,允许使用条件语句和 ...
- idea设置条件断点
只有在指定的条件下才触发断点,在idea中如何设置呢? 方法: 按Ctrl+Shift+F8弹出View Breakpoints 在Condition设置触发条件 结果: 源码 https://git ...
- DirectX using C++_error X3539:ps1_x is no longer supported...解决方案
问题来源 在研究HLSL时编译一个demo出现了error X3539的问题 解决方案 将代码中的ps_1_1 改为ps_2_0 PixelShader = compile ps_1_1 PS(); ...
- 接口和多态都为JAVA技术的核心。
类必须实现接口中的方法,否则其为一抽象类. 实现中接口和类相同. 接口中可不写public,但在子类中实现接口的过程中public不可省. (如果剩去public则在编译的时候提示出错:对象无法从 ...
- Swagger Annotation 详解
在软件开发行业,管理文档是件头疼的事.不是文档难于撰写,而是文档难于维护,因为需求与代码会经常变动,尤其在采用敏捷软件开发模式的系统中.好的工具能够提高团队沟通效率,保证系统质量以及缩短项目的交付周期 ...