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 ...
随机推荐
- Visual Studio 2015 update 3各版本下载地址
微软在06月27日发布了Visual Studio 2015 Update 3 .在MSDN中微软也提供下载,而且MSDN的Visual Studio 2015 Update 3与官方免费下载的文件是 ...
- iOS CALayer 绘图模糊有锯齿的解决方案
在CALayer中绘制图形会出现锯齿和模糊,同样绘图在UIView中就没有问题.经查资料发现不自动处理两倍像素的情况. 解决方案为:设置layer的contentsScale属性为[[UIScreen ...
- VC 预定义宏
列出预定义的 ANSI C和C++ Microsoft实现宏. 编译器识别预定义的ANSI C宏,并且Microsoft C++实现提供几个更多.这些宏不带参数,并且不能重定义.下面列出的某些预定义的 ...
- 利用百度API(js)，怎样通过地址获取经纬度
根据经纬度找到具体地址:http://api.map.baidu.com/geocoder?location=纬度,经度&output=输出格式类型&key=用户密钥如:http:// ...
- 训练的时候 nvidia：自动刷新
间隔一秒自动刷新: watch -n 1 -d nvidia-smi
- 【GMT43智能液晶模块】例程十一：通用定时器实验——定时点亮LED
实验原理: 通过STM32的一个GPIO口来驱动LED灯,设定GPIO为推挽输出模式,采用灌电流的方式与LED连接, 输出高电平LED灭,输出低电平LED亮,通过通用定时器TIM3实现500ms定时, ...
- IE7下onclick事件失效的问题
http://blog.csdn.net/spy19881201/article/details/11066975?locationNum=15 $('#abc').unbind('click').c ...
- linux执行python命令后permission denied
linux下执行python后显示被拒绝问题定位: 1.检查下要执行的文件的权限是否存在执行权限,否则执行chmod命令赋予权限: 2.若赋予权限后仍然显示没有权限,检查下执行的python文件是否有 ...
- python使用requests发送text/xml报文数据
def client_post_xmldata_requests(request_url,requestxmldata): #功能说明:发送请求报文到指定的地址并获取请求响应报文 #输入参数说明:接收 ...
- win10图片恢复默认照片查看器
文件名: win10图片恢复默认照片查看器.reg 双击该文件导入到注册表 Windows Registry Editor Version 5.00 ; Change Extension's File ...