表格语法

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. Go 语言切片(Slice)

    Go 语言切片是对数组的抽象. Go 数组的长度不可改变,在特定场景中这样的集合就不太适用,Go中提供了一种灵活,功能强悍的内置类型切片("动态数组"),与数组相比切片的长度是不固 ...

  2. JavaScript Boolean（布尔）对象

    Boolean(布尔)对象用于将非布尔值转换为布尔值(true 或者 false). Boolean(布尔)对象是三种包装对象:Number.String和Boolean中最简单的一种,它没有大量的实 ...

  3. Python3 日期和时间

    Python 程序能用很多方式处理日期和时间,转换日期格式是一个常见的功能. Python 提供了一个 time 和 calendar 模块可以用于格式化日期和时间. 时间间隔是以秒为单位的浮点小数. ...

  4. flowable设计器插件安装

    原文地址:http://www.shareniu.com/ 工欲善其事必先利其器,要想使用flowable,必须搭建一套环境,本文以Eclipse中安装flowable插件为例详细说明整个安装过程. ...

  5. FORM内置系统变量

    常用 和输入焦点有关: SYSTEM.CURSOR_ITEM:返回系统当前正在操作的项名. SYSTEM.CURSOR_RECORD:返回系统当前正在操作的记录行号. SYSTEM.CURSOR_BL ...

  6. activiti源码编译

    个小时,大家安装的时候一定要耐心. 最终编译之后的效果部分如下图所示: 因为我这里有些xml文件没有去除验证,所以有红色的警告,不过也不影响使用. 下面看一下下载之后文件的变化如下图所示: 我们导入主 ...

  7. 驱动中如何给ring3层应用程序提权

    为什么会有这个需求就不用我多说了吧:) 目前在驱动中提权我知道的有三种办法 1. 该方法来源于stoned bootkit,主要原理是把services.exe的EPROCESS中的Token值取出来 ...

  8. 21 RadioGroup ListFragment

    结构 MainActivity.java package com.qf.day21_radiogroupfragment_demo3; import java.util.ArrayList; impo ...

  9. 什么时候App委托会收到App进程被结束的消息

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 我们在Xcode建立的新项目后,在AppDelegate类会发 ...

  10. linux C++多线程操作文件&输出加锁

    下述demo将指定目录下文件存入vector,然后一分为二交给两个线程(threadTask1,threadTask2)去分别处理,对输出函数printDirent加锁防止紊乱. #include & ...