表格语法

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. 详解BLE连接建立过程

    同一款手机,为什么跟某些设备可以连接成功,而跟另外一些设备又连接不成功?同一个设备,为什么跟某些手机可以建立连接,而跟另外一些手机又无法建立连接?同一个手机,同一个设备,为什么他们两者有时候连起来很快 ...

  2. 这是一个测试，测试markdown语法

    [TOC] 1. chpt1 这是一段话,前面没有空格 前面有4个空格,且在编辑状态下上面没有空行 前面有4个空格,且在编辑状态下上面有一个空行. 前面按了一下tab 1.1 1.1 2 段落1 前面 ...

  3. 【Java集合系列】---总体框架

    个的组合,这些数据项可能共享某些特征,需要以某种操作方式一起进行操作,一般来说,这些数据项的类型都是相同的,或者基类相同(若使用的语言支持继承),列表或数组通常不认为是集合,因为其大小固定,但是事实上 ...

  4. Netty 4源码解析：请求处理

    Netty 4源码解析:请求处理 通过之前<Netty 4源码解析:服务端启动>的分析,我们知道在最前端"扛压力"的是NioEventLoop.run()方法.我们指定 ...

  5. Ubuntu环境下Anaconda安装TensorFlow并配置Jupyter远程访问

    本文主要讲解在Ubuntu系统中,如何在Anaconda下安装TensorFlow以及配置Jupyter Notebook远程访问的过程. 在官方文档中提到,TensorFlow的安装主要有以下五种形 ...

  6. Redis 学习笔记2：redis.conf配置文件详解

    Redis 的配置文件位于 Redis 安装目录下,文件名为 redis.conf. 参数说明: 参数说明 redis.conf 配置项说明如下: 1. Redis默认不是以守护进程的方式运行,可以通 ...

  7. 谷歌面试题：输入是两个整数数组，他们任意两个数的和又可以组成一个数组，求这个和中前k个数怎么做？

    谷歌面试题:输入是两个整数数组,他们任意两个数的和又可以组成一个数组,求这个和中前k个数怎么做? 分析: "假设两个整数数组为A和B,各有N个元素,任意两个数的和组成的数组C有N^2个元素. ...

  8. JQuery之事件处理

    JQuery不支持捕获模型 冒泡模型解析 <body> <div> <input id="bntShow" type="button&quo ...

  9. Android游戏开发之SurfaceView的使用-android学习之旅（五）

    SurfaceView和View的区别 View是在ui主线程中,直接响应用户的操作,以及任务的分发,但是任务比较复杂会出现阻塞. SurfaceView则不会出现这种问题,以为它直接从内存等取得图像 ...

  10. 最简单的基于libVLC的例子：最简单的基于libVLC的视频播放器（图形界面版）

    ===================================================== 最简单的基于libVLC的例子文章列表: 最简单的基于libVLC的例子:最简单的基于lib ...