表格语法

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. [转载]致创业者：APP已死 服务永生

    前几日,有位创业者和我讲他在带领团队做一个将爱踢球的人集中在一起的App,我告诉他你的创业方向错了.原因在于你的目的是要为爱踢球的人提供服务,而你现在却在竭尽全力的做App,你应该做的是设计你为爱踢球 ...

  2. ACM FatMouse' Trade

    FatMouse prepared M pounds of cat food, ready to trade with the cats guarding the warehouse containi ...

  3. python通过token登录，并爬取数据实例

    from bs4 import BeautifulSoup import requests class Zabbix(object): def __init__(self, headers): sel ...

  4. MongoDB 固定集合

    MongoDB 固定集合(Capped Collections)是性能出色且有着固定大小的集合,对于大小固定,我们可以想象其就像一个环形队列,当集合空间用完后,再插入的元素就会覆盖最初始的头部的元素! ...

  5. 炫酷：一句代码实现标题栏、导航栏滑动隐藏。ByeBurger库的使用和实现

    本文已授权微信公众号:鸿洋(hongyangAndroid)原创首发. 其实上周五的时候已经发过一篇文章.基本实现了底部导航栏隐藏的效果.但是使用起来可能不是很实用.因为之前我实现的方式是继承了系统的 ...

  6. springMVC源码分析--访问请求执行ServletInvocableHandlerMethod和InvocableHandlerMethod

    在之前一篇博客中springMVC源码分析--RequestMappingHandlerAdapter(五)我们已经简单的介绍到具体请求访问的执行某个Controller中的方法是在RequestMa ...

  7. Hazelcast源码剖析之Eviction

    v:* { } o:* { } w:* { } .shape { }p.MsoNormal,li.MsoNormal,div.MsoNormal { margin: 0cm; margin-botto ...

  8. SceneKit做一个旋转的地球效果

    SceneKit可以用寥寥几行帮你完成很多OpenGL复杂的3D设置代码,下面本猫就带大家完成一个旋转的3D地球的场景. 首先需要地球表面图片,将其导入到Xcode中: 我们用SceneKit内置的几 ...

  9. android 网络工具 之Android-Volley的demo

    1.今天详细的研究了Volley的使用,下面来给大家介绍一下: Android Volley 是Google开发的一个网络lib,可以让你更加简单并且快速的访问网络数据.Volley库的网络请求都是异 ...

  10. Tomcat的系统安全管理

    Tomcat是一个Web容器,我们开发的Web项目运行在Tomcat平台,这就好比将一个应用嵌入到一个平台上面运行,要使嵌入的程序能正常运行,首先平台要能安全正常运行.并且要最大程度做到平台不受嵌入的 ...