H5 学习之旅-H5表格(7)
表格语法
table:简历表格
captian:表格标题
th:表格行表头
tr:表格行
td:单元格
thead:表格页眉
tfoot:表格页脚
tbody:表格主体
col:列属性
!!!代码实例
带标题的表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>H5表格</title>
</head>
<body>
<p>表格</p>
<table border="1">
<caption>表格</caption>
<tr>
<th>单元</th>
<th>单元</th>
<th>单元</th>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
</table>
</body>
</html>
效果图
带标签的表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>H5表格</title>
</head>
<body>
<p>表格</p>
<table border="1">
<caption>表格</caption>
<tr>
<th>单元</th>
<th>单元</th>
</tr>
<tr>
<td>
<ul>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
</ul>
</td>
<td>我要吃药</td>
</tr>
</table>
</body>
</html>
效果图
单元格内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>H5表格</title>
</head>
<body>
<p>表格</p>
<table border="1">
<caption>表格</caption>
<tr>
<th>单元</th>
<th>单元</th>
</tr>
<tr>
<th>单元</th>
<th>单元</th>
</tr>
</table>
<br/>
<table border="1" cellpadding="10">
<caption>表格</caption>
<tr>
<th>单元</th>
<th>单元</th>
</tr>
<tr>
<th>单元</th>
<th>单元</th>
</tr>
</table>
</body>
</html>
效果图
单元格外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>H5表格</title>
</head>
<body>
<p>表格</p>
<table border="1">
<caption>表格</caption>
<tr>
<th>单元</th>
<th>单元</th>
</tr>
<tr>
<th>单元</th>
<th>单元</th>
</tr>
</table>
<br/>
<table border="1" cellspacing="10">
<caption>表格</caption>
<tr>
<th>单元</th>
<th>单元</th>
</tr>
<tr>
<th>单元</th>
<th>单元</th>
</tr>
</table>
</body>
</html>
效果图
设置单元格背景颜色是bgcolor,设置背景图片是background
H5 学习之旅-H5表格(7)的更多相关文章
- H5学习之旅-H5列表(8)
列表的基本语法 ol:有序列表 ul:无序列表 li:列表项 dl:列表 dt:列表项 dd:列表描述 常用列表 1.无序列表:使用标签 ul,li 属性:disc(默认实心圆) circle (空心 ...
- H5学习之旅-H5的框架(13)
H5框架语法介绍 :frame:框架对于页面的设计有很大的作用 frameSet:框架集标签定义如何将窗口分割为框架 ,每一个frameset定义一些列行或者列,rowS/COLS规定了每行或者每列占 ...
- H5学习之旅-H5与Php交互(12)
1.首先介绍PHP开发环境的搭建 ,在Google搜apachefriends,会有xampp的下载链接,这个工具集成了apache的很多服务 2.搭建php的编辑环境,选取eclipse安装php插 ...
- H5学习之旅-H5的表单(11)
H5的表单元素 form:表单 input:输入域,type属性可以设置text,password,button等不同的属性 textarea:文本域 lable:控制标签 fieldset:定义域 ...
- H5学习之旅-H5的基本标签(2)
H5的标签和html的标签没什么区别,主要介绍H5的基本标签 1.基础标签header和body,header的<title>元素主要是显示在标签页面里面,以及设置使用的语言和编码格式.b ...
- H5学习之旅-H5的新特性(1)
随着H5的发展,网页开发呈现了跨平台的特性,目前H5是兼容各大平台的,这也为一些其他的技术的跨平台开发提供了基础,所以我预测后H5会成为很重要的开发语言 新特性介绍 1.用于回话的canvas标签 2 ...
- H5学习之旅-H5的超链接以及图片链接(6)
链接内容 1.文本链接 2.图片链接 属性 href:指向另一个文档的链接 name:文档内部的链接 img标签属性 alt:替换文本属性 width:宽 height:高 代码实例 <!DOC ...
- H5学习之旅-H5的样式(5)
样式的引入方式 外部样式表 link rel = "stylesheet" type = "text/css" href = "mystyle.css ...
- H5学习之旅-H5的格式化(4)
H5的格式设置: b代表是粗体 i斜体 big 字体变大 small变小 em强调 strong 加强和变粗差不多 sub 定义下标字 sup 定义上标字 ins 插入字 del 删除字 代码实例 & ...
随机推荐
- ROS机器人程序设计(原书第2版)学习镜像分享及使用说明
ROS机器人程序设计(原书第2版)学习镜像分享及使用说明 系统用于ROS爱好者学习交流,也可用于其他用途,并不局限于ROS. 这款镜像文件是基于一年前的Ubuntu ROS Arduino Gazeb ...
- foxit pdf强制页面视图所有情况都为'合适宽度'
在左边的书签点击时,有时明明已经设置为合适宽度,但foxit会自动给你变为'合适页面'.真是莫名其妙的设置.好在可以这样更改:
- main函数之后的调用
main函数代表进程的主线程.程序开始执行时,系统为程序创建一个进程,main函数其实并不是首先被调用的函数,而是操作系统调用了C/C++运行期启动函数,该函数负责对C/C++ 运行期库进行初始化.它 ...
- Hive-ORC文件存储格式(续)
本文在Hive-ORC文件存储格式的理论基础上,进一步分析一个实际的Hive ORC表中的数据存储形式. 一.表结构 库名+表名:fileformat.test_orc 字段 类型 category_ ...
- Java之equals和==详解
两者的区别: A:== 基本类型:比较的是值是否相同 引用类型:比较的是地址值是否相同 B:equals() 只能比较引用类型. 默认情况下,比较的是地址值是否相同,因为我们可以看源代码可以看到,在O ...
- Struts 1之DispatchAction
DispatchAction是struts 1 的内置通用分发器 import org.apache.struts.actions.DispatchAction; public class UserA ...
- 浅谈SSH框架
在学习或者接触一个新的概念的时候,我们应该在脑海中发挥我们的搜索引擎,牵一发动全身的去想,这个知识跟我之前接触过的有哪些相同或者不同的地方,从这个角度去看那些新的知识和概念,经过旧知识和新知识的对比我 ...
- 指令汇B新闻客户端开发(三) 下拉刷新
现在我们继续这个新闻客户端的开发,今天分享的是下拉刷新的实现,我们都知道下拉刷新是一个应用很常见也很实用的功能.我这个应用是通过拉ListView来实现刷新的,先看一张刷新的原理图 从图中可知,手指移 ...
- 2.Lucene3.6.2包介绍,第一个Lucene案例介绍,查看索引信息的工具lukeall介绍,Luke查看的索引库内容,索引查找过程
1 Lucen目录介绍 2 lucene-core-3.6.2.jar是lucene开发核心jar包 contrib 目录存放,包含一些扩展jar包 3 案例 建立第一个Lucene项目 ...
- [ExtJS5学习笔记]第二十节 Extjs5配合数组的push方法,动态创建并加载组件
本文地址:http://blog.csdn.net/sushengmiyan/article/details/39226773 官方例子:http://docs.sencha.com/extjs/5. ...