表格语法

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）的更多相关文章

  1. H5学习之旅-H5列表（8）

    列表的基本语法 ol:有序列表 ul:无序列表 li:列表项 dl:列表 dt:列表项 dd:列表描述 常用列表 1.无序列表:使用标签 ul,li 属性:disc(默认实心圆) circle (空心 ...

  2. H5学习之旅-H5的框架（13）

    H5框架语法介绍 :frame:框架对于页面的设计有很大的作用 frameSet:框架集标签定义如何将窗口分割为框架 ,每一个frameset定义一些列行或者列,rowS/COLS规定了每行或者每列占 ...

  3. H5学习之旅-H5与Php交互（12）

    1.首先介绍PHP开发环境的搭建 ,在Google搜apachefriends,会有xampp的下载链接,这个工具集成了apache的很多服务 2.搭建php的编辑环境,选取eclipse安装php插 ...

  4. H5学习之旅-H5的表单（11）

    H5的表单元素 form:表单 input:输入域,type属性可以设置text,password,button等不同的属性 textarea:文本域 lable:控制标签 fieldset:定义域 ...

  5. H5学习之旅-H5的基本标签（2）

    H5的标签和html的标签没什么区别,主要介绍H5的基本标签 1.基础标签header和body,header的<title>元素主要是显示在标签页面里面,以及设置使用的语言和编码格式.b ...

  6. H5学习之旅-H5的新特性（1）

    随着H5的发展,网页开发呈现了跨平台的特性,目前H5是兼容各大平台的,这也为一些其他的技术的跨平台开发提供了基础,所以我预测后H5会成为很重要的开发语言 新特性介绍 1.用于回话的canvas标签 2 ...

  7. H5学习之旅-H5的超链接以及图片链接（6）

    链接内容 1.文本链接 2.图片链接 属性 href:指向另一个文档的链接 name:文档内部的链接 img标签属性 alt:替换文本属性 width:宽 height:高 代码实例 <!DOC ...

  8. H5学习之旅-H5的样式（5）

    样式的引入方式 外部样式表 link rel = "stylesheet" type = "text/css" href = "mystyle.css ...

  9. H5学习之旅-H5的格式化（4）

    H5的格式设置: b代表是粗体 i斜体 big 字体变大 small变小 em强调 strong 加强和变粗差不多 sub 定义下标字 sup 定义上标字 ins 插入字 del 删除字 代码实例 & ...

随机推荐

  1. Java第9次实验(网络)

    参考资料 本次作业参考文件 正则表达式参考资料 注:主要根据实验任务书的指导完成本次实验. 第1次实验 1. 网络基础 ipconfig.ping telnet(连接BBS与连接Web服务器的不同) ...

  2. MacOS下Rails+Nginx+SSL环境的搭建(下)

    五.以Production环境部署Rails项目 这里插一个题外话,我们之前是以development环境运行的rails项目,现在我们希望在实际的生产系统中跑一下看看.这是十分有必要的,应该在rai ...

  3. 第一个Angular2的样例

    欢迎跟我一起学习Angular2 本文根据angular2官网手动敲码得来: 本文地址:http://blog.csdn.net/sushengmiyan 本文作者:苏生米沿 - 开发环境搭建 - 配 ...

  4. cassandra 并发技术介绍

    摘要 本文主要介绍cassandra线程技术,cassandra的实现是基于java的,所以线程技术使用的也是jdk包提供的线程类.cassandra是分布式数据库,整个并发架构是基于阶段事件驱动架构 ...

  5. Swift按照数组元素出现的次数及大小排序

    要求如下: 1.已知一个数组,按照单个元素在数组中出现的次数作为重新排序的依据,个数多的排在前面 2.相同个数时候,元素值大的排前面 例子: [1, 2, 2, 3, 5, 5] 经过计算得到的结果是 ...

  6. Android Multimedia框架总结（二十三）MediaCodec补充及MediaMuxer引入（附案例）

    请尊重分享成果,转载请注明出处,本文来自逆流的鱼yuiop,原文链接:http://blog.csdn.net/hejjunlin/article/details/53729575 前言:前面几章都是 ...

  7. iOS学习笔记--触摸事件

    最近空闲时间在学习iOS相关知识,几周没有更新文章了,今天总结下这些天的学习内容,也整理下iOS的学习笔记,以便以后查阅翻看- iOS中的事件可以分为3大类型: 触摸事件 加速计事件 远程控制事件 响 ...

  8. JAVA面向对象-----接口的特点

    接口的特点 1.类实现接口可以通过implements实现,实现接口的时候必须把接口中的所有方法实现,一个类可以实现多个接口. 2.接口中定义的所有的属性默认是public static final的 ...

  9. 关于weak

    #define DECLARE_WEAK_SELF __typeof(&*self) __weak weakSelf = self #define DECLARE_STRONG_SELF __ ...

  10. ROS(indigo)ABB机器人MoveIt例子

    ROS(indigo)ABB机器人例子 参考网址: 1  http://wiki.ros.org/Industrial 2  http://wiki.ros.org/abb 3  https://gi ...