H5中表格的用法
1、表格的基本结构:
表格由行和列组成,单元格式表格的最基本单元;每个表格均有若干行,行标签由<tr></tr>定义,每行被分割为若干单元格,由<td></td>标签定义(td表示表格数据table data),如果表格的第一行表示表格表头,则第一行<tr></tr>中的<td></td>将用<th></th>标签替换.数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等.
表格的基本结构:
- <!DOCTYPE html>
- <html lang="zh">
- <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>Document</title>
- </head>
- <body>
- <table>
- <tr>
- <th>表头一</th>
- <th>表头二</th>
- <th>表头三</th>
- </tr>
- <tr>
- <td>第一行第一列</td>
- <td>第一行第二列</td>
- <td>第一行第三列</td>
- </tr>
- <tr>
- <td>第二行第一列</td>
- <td>第二行第二列</td>
- <td>第二行第三列</td>
- </tr>
- </table>
- </body>
- </html>
2、表格的基本属性:
表格属性分为两大类:分别作用于<table></table>标签和作用于行<tr></tr>和列<td></td>的属性.
1、border属性定义表格边框,属性值接受整数类型数值,表示设置表格边框的宽度
说明:如果border的值增大,只有表格最外围的框线增加,每个单元格上的边框并不会变化.若将border设置为10,可查看设置效果
2、width/height定义表格的宽度和高度
3、bgcolor设置表格的背景颜色
4、backgroud属性定义表格的背景图,需要传入一直图片的地址;若background属性与bgcolor属性同时存在,背景图会覆盖掉背景颜色.
5、bordercolor设置表格边框的颜色,接收颜色值
6、cellspacing设置表格单元格间距,设置表格单元格与单元格之间的间距;当cellspacing设置为0时,单元格之间没有间距
说明:cellspacing设置为0时并不能合并相邻边框,因此设置cellspacing=0时是两条边框线的宽度.如果需要合并表格边框可以使用style="border-collapse: collapse;"进行设置
7、cellpadding表格单元格内边距属性,即单元格中文字与单元格边框之间的距离
8、align属性用于调整表格在其父容器中的位置,可选值有left、center、right、分别表示表格居左、居中、居右显示
注意:align属性建议不再使用,它的相关功能已被CSS中的float所取代
- <!DOCTYPE html>
- <html lang="zh">
- <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>Document</title>
- </head>
- <body>
- <table
- border=""
- width="" height=""
- bgcolor="red"
- background="../src/img/login-bg.jpg"
- bordercolor="red"
- cellspacing=""
- style="border-collapse: collapse;"
- cellpadding="">
- <tr>
- <th>表头一</th>
- <th>表头二</th>
- <th>表头三</th>
- </tr>
- <tr>
- <td>第一行第一列</td>
- <td>第一行第二列</td>
- <td>第一行第三列</td>
- </tr>
- <tr>
- <td>第二行第一列</td>
- <td>第二行第二列</td>
- <td>第二行第三列</td>
- </tr>
- </table>
- </body>
- </html>
3、行和列基本属性:作用于行<tr></tr>和列<td></td>的属性
1、width/height设置单元格宽度和高度
2、bgcolor设置单元格的背景颜色
3、align单元格内容水平对齐方式
说明:表格table标签中的align属性是设置表格自身在浏览器中显示的位置,而行tr和列td的align属性是控制单元格中文字在单元格中的对齐方式;表格的align属性并不会影响表格内d 文字的水平方式,tr标签的align属性可以控制一行中所有单元格文字的水平对齐方式.
4、valign设置单元格中内容的垂直对齐方式
- <!DOCTYPE html>
- <html lang="zh">
- <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>Document</title>
- </head>
- <body>
- <table border="">
- <tr>
- <th>表头一</th>
- <th>表头二</th>
- <th>表头三</th>
- </tr>
- <tr>
- <td width="" height="">第一行第一列</td>
- <td bgcolor="#0000FF">第一行第二列</td>
- <td>第一行第三列</td>
- </tr>
- <tr>
- <td width="" height="" align="left">第二行第一列</td>
- <td width="" height="" align="center">第二行第二列</td>
- <td width="" height="" align="right">第二行第三列</td>
- </tr>
- <tr>
- <td width="" height="" valign="top">第三行第一列</td>
- <td width="" height="" valign="center">第三行第二列</td>
- <td width="" height="" valign="bottom">第三行第三列</td>
- </tr>
- </table>
- </body>
- </html>
4、表格的跨行和跨列:
colspan属性表示跨列,当某个格跨N列时,其右边N-1个单元格需要删除;
rowspan属性表示跨行,当某个格跨N行时,其下方N-1个单元格需要删除
- <!DOCTYPE html>
- <html lang="zh">
- <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>Document</title>
- </head>
- <body>
- <table border="">
- <tr align="center">
- <td colspan="">学生成绩信息</td>
- </tr>
- <tr align="center">
- <td rowspan="">张三</td>
- <td>语文</td>
- <td></td>
- </tr>
- <tr align="center">
- <td>数学</td>
- <td></td>
- </tr>
- <tr align="center">
- <td>英语</td>
- <td></td>
- </tr>
- <tr align="center">
- <td rowspan="">李四</td>
- <td>语文</td>
- <td></td>
- </tr>
- <tr align="center">
- <td>数学</td>
- <td></td>
- </tr>
- <tr align="center">
- <td>英语</td>
- <td></td>
- </tr>
- </table>
- </body>
- </html>
5、表格的结构化:将比哦啊个分为表头、表体、表尾,这样在修改其中一部分时不会影响到其他部分,方便对表格进行操作,一个完整的表格通常分为四部分:<br />
1、caption:表格的标题,通常出现在表格顶部
2、thead:定义表格的表头,通常表现为标题行
3、tbody:定义一段表格主体,一个表格可以有多个主体,可以按照行来进行分组
4、tfoot:定义表格的表尾,通常表现为总计行
- <!DOCTYPE html>
- <html lang="zh">
- <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>Document</title>
- </head>
- <body>
- <table border="">
- <caption>表格的标题</caption>
- <thead>
- <tr>
- <th>表格的头部</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>表格的主体</td>
- </tr>
- </tbody>
- <tfoot>
- <tr>
- <td>表格的底部</td>
- </tr>
- </tfoot>
- </table>
- </body>
- </html>
6、表格的直列化:表格的直列化可以对表格进行分组,这样就不需要对各个单元和各行重复应用样式
注意:colgroup标签只能在table中使用
- <!DOCTYPE html>
- <html lang="zh">
- <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>Document</title>
- </head>
- <body>
- <table width="">
- <colgroup style="background-color: yellow;"> <!--前两列为一组-->
- <col /><!--第一列-->
- <col /><!--第二列-->
- </colgroup>
- <col style="background-color: blue;" /><!--第三列-->
- <caption>表格的标题</caption>
- <thead>
- <tr>
- <th>表头一</th>
- <th>表头二</th>
- <th>表头三</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>主体一</td>
- <td>主体一</td>
- <td>主体一</td>
- </tr>
- <tr>
- <td>主体二</td>
- <td>主体二</td>
- <td>主体二</td>
- </tr>
- </tbody>
- <tfoot>
- <tr>
- <td>底部一</td>
- <td>底部二</td>
- <td>底部三</td>
- </tr>
- </tfoot>
- </table>
- </body>
- </html>
特别休假单案例:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <!--
- 特别休假单案例:
- -->
- </head>
- <body>
- <h2 style="width: 500px; text-align: center; text-decoration: underline;">特别休假申请单</h2>
- <p>申请日期: 年 月 日</p>
- <table width="" border="" style="border-collapse: collapse;">
- <tr>
- <td>所属单位</td>
- <td>部 组 班</td>
- <td>职称</td>
- <td width=""></td>
- <td>姓名</td>
- <td width=""></td>
- <td>厂长</td>
- </tr>
- <tr>
- <td rowspan="">期间</td>
- <td colspan="">年 月 日</td>
- <td rowspan="" colspan="">天数</td>
- <td width=""></td>
- </tr>
- <tr>
- <td colspan="">年 月 日</td>
- <td></td>
- </tr>
- <tr>
- <td colspan="">职务代理人</td>
- <td colspan="">盖章</td>
- <td></td>
- </tr>
- <tr>
- <td>到期日期</td>
- <td colspan="">年   </td>
- <td colspan="">审核意见</td>
- <td></td>
- </tr>
- <tr>
- <td colspan="">全年特别休假数</td>
- <td colspan="" align="right">天</td>
- <td></td>
- <td></td>
- <td></td>
- </tr>
- <tr>
- <td colspan="">已请假数</td>
- <td colspan="" align="right">天</td>
- <td>人事主任</td>
- <td>人事经办</td>
- <td>组长</td>
- </tr>
- <tr>
- <td colspan="">本次申请日数</td>
- <td colspan="" align="right">天</td>
- <td rowspan=""></td>
- <td rowspan=""></td>
- <td rowspan=""></td>
- </tr>
- <tr>
- <td colspan="">尚剩申请日数</td>
- <td colspan="" align="right">天</td>
- </tr>
- </table>
- </body>
- </html>
以上讲解详细完整代码块:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <!--
- 、表格的基本结构:
- 表格由行和列组成,单元格式表格的最基本单元;每个表格均有若干行,行标签由<tr></tr>定义,每行被分割为若干单元格,由<td></td>标签定义(td表示表格数据table data),
- 如果表格的第一行表示表格表头,则第一行<tr></tr>中的<td></td>将用<th></th>标签替换.数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等.
- -->
- </head>
- <body>
- <!--
- 表格的基本结构:
- -->
- <table>
- <tr>
- <th>表头一</th>
- <th>表头二</th>
- <th>表头三</th>
- </tr>
- <tr>
- <td>第一行第一列</td>
- <td>第一行第二列</td>
- <td>第一行第三列</td>
- </tr>
- <tr>
- <td>第二行第一列</td>
- <td>第二行第二列</td>
- <td>第二行第三列</td>
- </tr>
- </table>
- <!--
- 、表格的基本属性:
- 表格属性分为两大类:分别作用于<table></table>标签和作用于行<tr></tr>和列<td></td>的属性.
- -->
- <p>
- 表格的基本属性:<br />
- 、border属性定义表格边框,属性值接受整数类型数值,表示设置表格边框的宽度<br />
- 说明:如果border的值增大,只有表格最外围的框线增加,每个单元格上的边框并不会变化.若将border设置为10,可查看设置效果<br />
- 、width/height定义表格的宽度和高度<br />
- 、bgcolor设置表格的背景颜色<br />
- 、backgroud属性定义表格的背景图,需要传入一直图片的地址;若background属性与bgcolor属性同时存在,背景图会覆盖掉背景颜色.<br />
- 、bordercolor设置表格边框的颜色,接收颜色值<br />
- 、cellspacing设置表格单元格间距,设置表格单元格与单元格之间的间距;当cellspacing设置为0时,单元格之间没有间距<br />
- 说明:cellspacing设置为0时并不能合并相邻边框,因此设置cellspacing=0时是两条边框线的宽度.如果需要合并表格边框可以使用style="border-collapse: collapse;"进行设置<br />
- 、cellpadding表格单元格内边距属性,即单元格中文字与单元格边框之间的距离<br />
- 、align属性用于调整表格在其父容器中的位置,可选值有left、center、right、分别表示表格居左、居中、居右显示<br />
- 注意:align属性建议不再使用,它的相关功能已被CSS中的float所取代,<br />
- </p>
- <table
- border=""
- width="" height=""
- bgcolor="red"
- background="../src/img/login-bg.jpg"
- bordercolor="red"
- cellspacing=""
- style="border-collapse: collapse;"
- cellpadding="">
- <tr>
- <th>表头一</th>
- <th>表头二</th>
- <th>表头三</th>
- </tr>
- <tr>
- <td>第一行第一列</td>
- <td>第一行第二列</td>
- <td>第一行第三列</td>
- </tr>
- <tr>
- <td>第二行第一列</td>
- <td>第二行第二列</td>
- <td>第二行第三列</td>
- </tr>
- </table>
- <!--
- 、行和列基本属性:作用于行<tr></tr>和列<td></td>的属性
- -->
- <p>
- 行和列基本属性:<br />
- 、width/height设置单元格宽度和高度<br />
- 、bgcolor设置单元格的背景颜色<br />
- 、align单元格内容水平对齐方式<br />
- 说明:表格table标签中的align属性是设置表格自身在浏览器中显示的位置,而行tr和列td的align属性是控制单元格中文字在单元格中的对齐方式;表格的align属性并<br />
- 不会影响表格内文字的水平方式,tr标签的align属性可以控制一行中所有单元格文字的水平对齐方式.<br />
- 、valign设置单元格中内容的垂直对齐方式<br />
- </p>
- <table border="">
- <tr>
- <th>表头一</th>
- <th>表头二</th>
- <th>表头三</th>
- </tr>
- <tr>
- <td width="" height="">第一行第一列</td>
- <td bgcolor="#0000FF">第一行第二列</td>
- <td>第一行第三列</td>
- </tr>
- <tr >
- <td width="" height="" align="left">第二行第一列</td>
- <td width="" height="" align="center">第二行第二列</td>
- <td width="" height="" align="right">第二行第三列</td>
- </tr>
- <tr>
- <td width="" height="" valign="top">第三行第一列</td>
- <td width="" height="" valign="center">第三行第二列</td>
- <td width="" height="" valign="bottom">第三行第三列</td>
- </tr>
- </table>
- <p>
- 表格的跨行和跨列:<br />
- colspan属性表示跨列,当某个格跨N列时,其右边N-1个单元格需要删除;<br />
- rowspan属性表示跨行,当某个格跨N行时,其下方N-1个单元格需要删除<br />
- </p>
- <table border="">
- <tr align="center">
- <td colspan="">学生成绩信息</td>
- </tr>
- <tr align="center">
- <td rowspan="">张三</td>
- <td>语文</td>
- <td></td>
- </tr>
- <tr align="center">
- <td>数学</td>
- <td></td>
- </tr>
- <tr align="center">
- <td>英语</td>
- <td></td>
- </tr>
- <tr align="center">
- <td rowspan="">李四</td>
- <td>语文</td>
- <td></td>
- </tr>
- <tr align="center">
- <td>数学</td>
- <td></td>
- </tr>
- <tr align="center">
- <td>英语</td>
- <td></td>
- </tr>
- </table>
- <p>
- 表格的结构化:将比哦啊个分为表头、表体、表尾,这样在修改其中一部分时不会影响到其他部分,方便对表格进行操作.<br />
- 一个完整的表格通常分为四部分:<br />
- 、caption:表格的标题,通常出现在表格顶部<br />
- 、thead:定义表格的表头,通常表现为标题行<br />
- 、tbody:定义一段表格主体,一个表格可以有多个主体,可以按照行来进行分组<br />
- 、tfoot:定义表格的表尾,通常表现为总计行<br />
- </p>
- <table border="">
- <caption>表格的标题</caption>
- <thead>
- <tr>
- <th>表格的头部</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>表格的主体</td>
- </tr>
- </tbody>
- <tfoot>
- <tr>
- <td>表格的底部</td>
- </tr>
- </tfoot>
- </table>
- <p>
- 表格的直列化:表格的直列化可以对表格进行分组,这样就不需要对各个单元和各行重复应用样式<br />
- 注意:colgroup标签只能在table中使用<br />
- </p>
- <table width="">
- <colgroup style="background-color: yellow;"> <!--前两列为一组-->
- <col /><!--第一列-->
- <col /><!--第二列-->
- </colgroup>
- <col style="background-color: blue;" /><!--第三列-->
- <caption>表格的标题</caption>
- <thead>
- <tr>
- <th>表头一</th>
- <th>表头二</th>
- <th>表头三</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>主体一</td>
- <td>主体一</td>
- <td>主体一</td>
- </tr>
- <tr>
- <td>主体二</td>
- <td>主体二</td>
- <td>主体二</td>
- </tr>
- </tbody>
- <tfoot>
- <tr>
- <td>底部一</td>
- <td>底部二</td>
- <td>底部三</td>
- </tr>
- </tfoot>
- </table>
- </body>
- </html>
H5中表格的用法的更多相关文章
- h5中hash的用法实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 从web图片裁剪出发:了解H5中的canvas
本篇内容不针对canvas文档对每个api进行逐个的详解! 本篇内容不针对canvas文档对每个api进行逐个的详解! 本篇内容不针对canvas文档对每个api进行逐个的详解! 重说三,好了,现在进 ...
- ioctl在socket中的一些用法及示例
原文: http://blog.chinaunix.net/uid-20692625-id-3172833.html ----------------------------------------- ...
- [转载]C#中MessageBox.Show用法以及VB.NET中MsgBox用法
一.C#中MessageBox.Show用法 MessageBox.Show (String) 显示具有指定文本的消息框. 由 .NET Compact Framework 支持. MessageBo ...
- C#中string.format用法详解
C#中string.format用法详解 本文实例总结了C#中string.format用法.分享给大家供大家参考.具体分析如下: String.Format 方法的几种定义: String.Form ...
- SQL中distinct的用法
SQL中distinct的用法 1.作用于单列 2.作用于多列 3.COUNT统计 4.distinct必须放在开头 5.其他 在表中,可能会包含重复值.这并不成问题,不过,有时您也许希望仅仅列出 ...
- Oracle 中 decode 函数用法
Oracle 中 decode 函数用法 含义解释:decode(条件,值1,返回值1,值2,返回值2,...值n,返回值n,缺省值) 该函数的含义如下:IF 条件=值1 THEN RETURN(翻译 ...
- jQuery中Animate进阶用法(一)
jQuery中animate的用法你了解多少呢?如果仅仅是简单的移动位置,显示隐藏,哦!天哪你在浪费资源!因为animate太强大了,你可以有很多意想不到的用法!让我们一起研究一下吧~~ 首先要了解j ...
- [转载]js中return的用法
一.返回控制与函数结果,语法为:return 表达式; 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果 二.返回控制,无函数结果,语法为:return; 在大多数情况下,为事件处理函 ...
随机推荐
- How to receive JSON as an MVC 5 action method parameter
How to receive JSON as an MVC 5 action method parameter 解答1 Unfortunately, Dictionary has problems ...
- delphi 运算符重载
譬如上面的 record 可以这样声明: type TMyRec = record name: string; age: Word; class operator Grea ...
- 利用JS-SDK微信分享接口调用(后端.NET)
一直都想研究一下JS-SDK微信分享的接口调用,由于最近工作需要,研究了一下,目前只是实现了部分接口的调用:其他接口调用也是类似的: 在开发之前,需要提前准备一个微信公众号,并且域名JSAPI 配置接 ...
- 解决request.getSession().getServletContext().getRealPath("/")为null问题
今天把程序部署到服务器,发现异常,FileNotFound异常,很快定位到getServletContext().getRealPath("/");返回空的问题.这个问题通常是传递 ...
- you are not allowed to push code to protected branches on this project(转)
.. 图 1-1 报错:failed to push some refs to 'http://*******.git'. 一痛瞎踅摸之后,远程控制电脑,在H电脑上,重新建立了一个test项目,之后走 ...
- sass - &的作用
6.8. & in SassScript 就像在选择器中使用时一样,&在SassScript中引用当前父选择器.它是一个逗号分隔的列表和空格分隔的列表.例如: .foo.bar .ba ...
- shell编程系列25--shell操作数据库实战之备份MySQL数据,并通过FTP将其传输到远端主机
shell编程系列25--shell操作数据库实战之备份MySQL数据,并通过FTP将其传输到远端主机 备份mysql中的库或者表 mysqldump 常用参数详解: -u 用户名 -p 密码 -h ...
- 算法习题---5-5复合词(UVa10391)
一:题目 输入一系列由小写字母组成的单词.输入已按照字典序排序,且不超过120000个.找出所有的复合词,即恰好由两个单词连接而成的单词 (一)样例输入 a alien born less lien ...
- Egret中的对象池Pool
为了可以让对象复用,防止大量重复创建对象,导致资源浪费,使用对象池来管理. 一 对象池A 二 对象池B 一 对象池A 1. 支持传入构造函数 2. 支持预先创建对象 3. 支持统一执行函数 /** * ...
- 宣化上人:大佛顶首楞严经四种清净明诲浅释(6-7)(转自学佛网:http://www.xuefo.net/nr/article23/230700.html)
大佛顶首楞严经四种清净明诲浅释(6) 唐天竺·沙门般剌密帝译 宣化上人主讲 一九八三年四月十七日晚讲于万佛圣城 是故阿难!若不断杀修禅定者,譬如有人,自塞其耳,高声大叫,求人不闻,此等名为欲隐弥露.清 ...