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 删除字 代码实例 & ...
随机推荐
- 蚂蚁代理免费代理ip爬取(端口图片显示+token检查)
分析 蚂蚁代理的列表页大致是这样的: 端口字段使用了图片显示,并且在图片上还有各种干扰线,保存一个图片到本地用画图打开观察一下: 仔细观察蓝色的线其实是在黑色的数字下面的,其它的干扰线也是,所以这幅图 ...
- 剑指Offer——知识点储备-Java基础
剑指Offer--知识点储备-Java基础 网址来源: http://www.nowcoder.com/discuss/5949?type=0&order=0&pos=4&pa ...
- RabbitMQ消息队列入门篇(环境配置+Java实例+基础概念)
一.消息队列使用场景或者其好处 消息队列一般是在项目中,将一些无需即时返回且耗时的操作提取出来,进行了异步处理,而这种异步处理的方式大大的节省了服务器的请求响应时间,从而提高了系统的吞吐量. 在项目启 ...
- Struts 1 之<bean>标签库
<bean:write>标签 <bean:write>能输出request.session.application.page四个域中能访问到的变量,与EL表达式不同的是,如果变 ...
- qsort函数应用大全
七种qsort排序方法 <本文中排序都是采用的从小到大排序> 一.对int类型数组排序 int num[100]; Sample: int cmp ( const void *a , c ...
- Spring Boot微服务架构入门
概述 还记得在10年毕业实习的时候,当时后台三大框架为主流的后台开发框架成软件行业的标杆,当时对于软件的认识也就是照猫画虎,对于为什么会有这么样的写法,以及这种框架的优势或劣势,是不清楚的,Sprin ...
- 1089. Insert or Merge (25)
题目如下: According to Wikipedia: Insertion sort iterates, consuming one input element each repetition, ...
- SSH深度历险(十一) AOP原理及相关概念学习+xml配置实例(对比注解方式的优缺点)
接上一篇 SSH深度历险(十) AOP原理及相关概念学习+AspectJ注解方式配置spring AOP,本篇我们主要是来学习使用配置XML实现AOP 本文采用强制的CGLB代理方式 Security ...
- UNIX网络编程——客户/服务器程序设计示范(一)
下面给出的是客户程序用于测试我们的服务器程序的各个变体. #include "unp.h" #define MAXN 16384 /* max # bytes to request ...
- EBS开发技术之Patch安装
Contents Document Control........................................................................ ...