• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > H5 学习之旅-H5表格(7)

H5 学习之旅-H5表格(7)

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含H5, 学习之旅,表格等相关知识,匿名希望在学习及工作中可以帮助到您

表格语法

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

表格语法

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>
  


 

您可能想查找下面的文章:

  • 详解HTML5之pushstate、popstate操作history,无刷新改变当前url
  • HTML5各种头部meta标签的功能(推荐)
  • 如何用H5实现一个触屏版的轮播器的实例
  • H5新属性audio音频和video视频的控制详解(推荐)
  • HTML5页面音视频在微信和app下自动播放的实现方法
  • H5 meta小结(前端必看篇)
  • 浅谈h5自定义audio(问题及解决)
  • h5调用摄像头的实现方法
  • HTML5单页面手势滑屏切换原理
  • Html5实现二维码扫描并解析

相关文章

  • 2018-12-03HTML5实战与剖析之原生拖拽(一拖拽历史概述)
  • 2018-12-03教你如何用HTML5和JS实现切水果游戏
  • 2018-12-03在HTML5 Canvas中放入图片和保存为图片的方法
  • 2018-12-03对于一个高中学历前端开发工程师,在北京这样的大城市,该不该耗费精力自考一个本科学历?
  • 2017-10-01h5改良的input元素种类
  • 2017-08-06使用phonegap创建联系人的实现方法
  • 2018-12-032017年6月10个html5的视频教程汇总
  • 2018-12-038个最新炫酷的HTML5动画应用的图文详解
  • 2017-08-06调用HTML5的Canvas API绘制图形的快速入门指南
  • 2018-12-032017年前端领域可能迎来的6个发展趋势

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • HTML5 Canvas:绘制渐变色
    • 浅谈媒体元素的实例教程
    • 前端未来页面布局发展方向是 Flexbox 还是 Grid?
    • 如果html传输全部使用json, browser 将会快很多?
    • 详解HTML5中的Communication API基本使用方法
    • 分享一个用html5实现炮弹自由落体的实例代码
    • HTML5 Canvas 起步(3)-颜色与渐变
    • 基于HTML5 的人脸识别技术
    • HTML5 Canvas概述
    • 只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)_html5教程技巧

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有