HTML（二）：表格元素
表格元素的作用：用来格式化显示数据。
一、表格的基本结构
表格的基本语法:
<TABLE border="设置表格边框尺寸大小" width="" cellpadding="" cellspaning="">
<TR align="对齐方式">
<TD align="">
单元格内容
</TD>
......
</TR>
......
</TABLE>
<TABLE></TABLE>:定义表格
<TR></TR>:定义行
<TD></TD>：定义列
示例：
主要属性：
border:边框的宽度，单位是像素（缺省值是0）
width：表格的宽度，可以用百分比（表示该表格占父标记的宽度），也可以是绝对值
cellpadding:单元格内容与单元格之间的空隙
cellspacing:单元格与单元格之间的空隙
align:对齐方式，值有"center","right","left"
colspan：水平方向延伸单元格，值为一正整数，代表此单元格水平延伸的单元格数
rowspan：垂直方向延伸单元格，值为一正整数，代表此单元格垂直延伸的单元格数。
<caption>表格的题注：caption元素必须包含在table元素中，而且必须紧跟在<table>的开始标记之后，默认居中显示。
语法
开始标记：必须
内容：行内标记
结束标记：必需
主要属性：
align属性：用以确定题注的位置，可以有五种取值
bottom、center、laft、right、top
例如：定义一个基本的表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格</title>
</head>
<body>
<table>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
</body>
</html>
结果：
二、表格美化
1、设置表格的尺寸和边框
width:用来设置表格的宽度
height:用来设置表格的高度
border：用来设置表格边框尺寸大小
bordercolor：用来设置表格边框颜色
<table width="400" height="200" border="15" bordercolor="red">
<tr>
<td colspan="4" align="center">品牌商城</td>
</tr>
<tr>
<td colspan="2">笔记本电脑</td>
<td colspan="2">办公设置、文具、耗材</td>
</tr>
<tr>
<td>惠普</td>
<td>华硕</td>
<td>打印机</td>
<td>刻录盘</td>
</tr>
</table>
示例：
2、设置背景图片和背景色
background：属性用来设置表格的背景图片
bgcolor：属性用来设置表格、行、列的背景色。“#EBEFFF”是用RGB表示的一种颜色值，RGB指的是红绿蓝
<table width="360" height="120" border="2" background="Images\img.jpg">
<tr>
<td colspan="6"> </td>
</tr>
<tr>
<td colspan="3">笔记本电脑</td>
<td colspan="3" bgcolor="yellow">办公设备、文具、耗材</td>
</tr>
<tr>
<td>IBM</td>
<td>惠普</td>
<td>华硕</td>
<td>打印机</td>
<td>刻录盘</td>
<td>墨盒</td>
</tr>
</table>
示例：
3、设置对齐方式
align：属性用来设置表格、行、列的对齐方式。
有三种取值
left：居左对齐 默认
right：居右对齐
center：居中对齐
示例：
4、填充属性和间距属性
cellpadding:单元格填充，用来设置表格内填充距离，表示每一个单元格的厚度，值越大，单元格内容离单元格距离就越大
cellspacing:单元格间距，用来设置表格内框宽度,表示两个单元格之间的距离。值越大，单元格与单元格之间的距离就越大
填充属性和间距属性：
<body>
<table border="20" cellpadding="30" cellspacing="40" bordercolor="red">
<tr bordercolor="green">
<td colspan="4">品牌商城</td>
</tr>
<tr>
<td colspan="2">笔记本电脑</td>
<td colspan="2">办公设备、文具、耗材</td>
</tr>
<tr>
<td>惠普</td>
<td>华硕</td>
<td>打印机</td>
<td>刻录盘</td>
</tr>
</table>
</body>
示例：
设置表格的填充属性示例：
5、设置跨行、跨列的表格
colspan：水平方向延伸单元格，值为一正整数，代表此单元格水平延伸的单元格数
rowspan：垂直方向延伸单元格，值为一正整数，代表此单元格垂直延伸的单元格数。
设置跨多列的表格：
设置跨多行的表格：
设置跨多行多列的表格：
注意：
跨行和跨列都是写在<td>标签里面。
6、表格的分组标签
表格分组如下图所示：
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格</title>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0" border="1">
<caption>年终数据报表</caption>
<thead bgcolor="#99FFFF">
<tr>
<th>月份</th>
<th>收入</th>
</tr>
</thead>
<tbody bgcolor="#009966">
<tr>
<td>1月</td>
<td>100</td>
</tr>
<tr>
<td>2月</td>
<td>80</td>
</tr>
<tr>
<td>3月</td>
<td>300</td>
</tr>
<tr>
<td>4月</td>
<td>400</td>
</tr>
<tr>
<td>5月</td>
<td>100</td>
</tr>
<tr>
<td>6月</td>
<td>200</td>
</tr>
</tbody>
<tfoot bgcolor="#FFFF00">
<tr>
<td>平均月收入</td>
<td>196.67</td>
</tr>
<tr>
<td>总计</td>
<td>1180</td>
</tr>
</tfoot>
</table>
</body>
</html>
结果：
HTML（二）：表格元素的更多相关文章
- 第六十三节，html表格元素
html表格元素 学习要点: 1.表格元素总汇 2.构建表格解析 本章主要探讨HTML5中表格元素的用法.表格的主要用途是以网格的形式显示二维数据. 一．表格元素总汇 ...
- html/css 表格元素以及表格布局
一,html之表格 1,一个完整的html表格所包含的元素 <!--一个完整的html表格--> <!--cellpadding代表单元格内的文字和单元格边框之间的间距--> ...
- HTML表格元素
学习要点: 1.表格元素总汇 2.构建表格解析 一．表格元素总汇 表格的基本构成最少需要三个元素:<table>.<tr>.<td>,其 ...
- html中表格元素的相关总结
表格元素相关总结: 1.在CSS中,内部表元素(如td.tr.col等)生成矩形框,这些矩形框包含内容.内边距和边框,但没有外边距,因此如果定义外边距,浏览器将忽略该定义:对于table元素,外边距有 ...
- HTML中表格元素TABLE,TR,TD及属性的语法
table:表格元素及属性 <table width="80%" border="1" cellspacing="1" cellpad ...
- html5权威指南：表格元素
第十一章:表格元素 ...
- html5之表格元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 415 DOM 查找列表框、下拉菜单控件、对表格元素/表单控件进行增删改操作、创建元素并且复制节点与删除、 对表格操作、通用性和标准的事件监听方法（点击后弹窗效果以及去掉效果）
DOM访问列表框.下拉菜单的常用属性: form.length.options.selectedindex.type 使用options[index]返回具体选项所对应的常用属性:defa ...
- HTML的表格元素
一.HTML的表格元素 1.table元素 <table> 标签定义 HTML 表格.简单的 HTML 表格由 table 元素以及一个或多个 tr.th 或 td 元素组成.tr 元素定 ...
随机推荐
- iOS开发Xcode8需要注意的那些坑
现在在苹果的官网上,我们已经可以下载到Xcode8的GM版本了,加上9.14日凌晨,苹果就要正式推出iOS10系统的推送了,在此之际,iOS10的适配已经迫在眉睫啦,不知道Xcode8 beat版本, ...
- Hadoop docs
原文地址:http://hadoop.apache.org/docs/ Index of /docs Name Last modified Size Description Parent Direct ...
- spring 4.0下集成webservice
该教程使用的项目可参见: Intellij Idea下搭建基于Spring+SpringMvc+MyBatis的WebApi接口架构 具体源码请参见GitHub: https://github.com ...
- mac下安装mysql 1820 重置默认密码
mac安装mysql时会给出一个临时密码 记录下来 2018-03-17T02:14:10.809431Z 1 [Note] A temporary password is generated for ...
- telnet远程登录协议
什么是Telnet? 对于Telnet的认识,不同的人持有不同的观点,可以把Telnet当成一种通信协议,但是对于入侵者而言,Telnet只是一种远程登录的工具.一旦入侵者与远程主机建立了Telnet ...
- FPGA管脚约束
Edit → language templates : 打开即可查看基本语法. 一.xilinx中的约束文件 1.约束的分类 利用FPGA进行系统设计常用的约束主要分为3类. (1)时序约束:主要用于 ...
- textureCache中的等价路径问题
自己的引擎里做了个简单的TextueCache,每次新创建一个纹理,先到TextureCache里查找有没有路径相同的,如果有就直接返回纹理,如果没有加载图片创建纹理并将图片路径缓存起来.另外为了标准 ...
- C++操作 SQL数据库 实例 代码步骤
C++连接SQL数据库第一步 系统配置 1.设置SQLSERVER服务器为SQL登录方式,并且系统安全性中的sa用户要设置登录功能为“启用”,还有必须要有密码. 2.需要在ODBC中进行数据源配置,数 ...
- 【Android】16.4 IntentService类
分类:C#.Android.VS2015: 创建日期:2016-03-01 一.简介 为了进一步简化Intent过滤器的用法,Android系统又提供了一个IntentService类,这样一来,你也 ...
- 【Android】6.4 DatePickerDialog和TimePickerDialog
分类:C#.Android.VS2015: 创建日期:2016-02-08 一.简介 在Android应用中,日期选择对话框和时间选择对话框是分别提供的. 日期选择对话框(DatePickerDial ...