HTML元素学习

1：表格：表格的作用是显示表格数据，小范围内布局

表格的框架

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>TableDemo</title>

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>Document</title>

 </head>

 <body>

    <table border = "10px" width = "400px">

        <caption>Calories&Fat</caption>

        <tr height = "40px">

        <!--表头，表头为Menuitem calories Fat(g)-->

            <th>Menu item</th>

            <th>Calories</th>

            <th>Fat(g)</th>

        </tr>

        <tbody align = "center"><!--居中-->

        <tr >

            <td>Chieck noold soup</td>

            <td>120</td>

            <td>2</td>

        </tr>

        <tr >

            <td>Caesar salard</td>

            <td>400</td>

            <td>26</td>

        </tr>

        </tbody>

    </table>

 </body>

</html>

要点：

一次定义，处处使用：<tbody></tbody>,用来设置表格的属性；

 border = "10px" width = "400px" 设置表格属性
 <caption>Calories&Fat</caption>设置表头

aaarticlea/png;base64,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" alt="" />

单元格合并：

左右合并用 colspan = "2";后面接单元格的个数（包含自己），并删除后面合并的个数

上下合并  rowspan= "2";后面接单元格的个数（包含自己），并删除后面的个数；

Web表格的更多相关文章

  1. 葡萄城首席架构师：前端开发与Web表格控件技术解读

    讲师:Issam Elbaytam,葡萄城集团全球首席架构师(Chief Software Architect of GrapeCity Global).曾任 Data Dynamics.Inc 创始 ...

  2. 水晶报表(web)表格信息展示

    一.环境安装 开发工具使用VS2010+SAP Crystal Reports13_0+.NETformwork4.0 因为vs2010已经不再集成水晶报表,所以需要我们去找合适的版本下载http:/ ...

  3. WEB 表格测试点

    Web页面的表格测试点: 1.表格列名 2.表格翻页.表格跳转到多少页.最后一页.首页 3.表格每页显示的数据, 数据的排序 4.表格无数据 5.表格支持的最大数据量 6.表格中数据内容超长时,显示是 ...

  4. web表格代码（5）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 创建高性能移动 web 站点

    如果你的网站3秒钟没有响应,人们就会失去兴趣了.为了满足响应快这个愿望,需要一个不同的方法在手机上进行分析,设计和测试. 这篇文章将会对Johan Johansson在2013年4月提出" ...

  6. 创建高性能移动 web 站点【转载】

    如果你的网站3秒钟没有响应,人们就会失去兴趣了.为了满足响应快这个愿望,需要一个不同的方法在手机上进行分析,设计和测试. 这篇文章将会对Johan Johansson在2013年4月提出"  ...

  7. web漏洞扫描工具AWVS使用

    AWVS AWVS简介:Acunetix Web Vulnerability Scanner(简称AWVS)是一款知名的网络漏洞扫描工具,它通过网络爬虫测试你的网站安全,检测流行安全漏洞,如交叉站点脚 ...

  8. Acunetix Web Vulnarability Scanner V10.5 详细中文手册

    目录: 0×00.什么是Acunetix Web Vulnarability Scanner ( What is AWVS?) 0×01.AWVS安装过程.主要文件介绍.界面简介.主要操作区域简介(I ...

  9. 应用日志获取-web系统

    1 场景 应用使开发写的,但应用使部署再服务器上,而开发没有ssh登陆服务器的权限. so,开发总是请运维查日志,下载日志. so and so,运维要花很多时间帮开发去搞日志. 这是件很没意义的事, ...

随机推荐

  1. C++：四种必须使用初始化列表情况

    [c++]必须在类初始化列表中初始化的几种情况   1. 类成员为const类型   2. 类成员为引用类型   复制代码 #include <iostream> using namesp ...

  2. Android 常用时间格式转换代码

    /** * 获取现在时间 * * @return 返回时间类型 yyyy-MM-dd HH:mm:ss */ public static Date getNowDate() { Date curren ...

  3. linux 命令案例学习——文件搜索

    两个搜索文件的工具 locate  ——仅仅通过文件名查找文件 find     ——依据文件的各种属性在既定目录(包括子目录)里查找 一个通常与文件搜索命令一起使用.处理搜索结果文件列表的命令 xa ...

  4. 了解python

    Python是一种解释型.面向对象.动态数据类型的高级程序设计语言.Python的文本文件是.py文件 Python的用途: 1.做日常事务,比如自动备份你的MP3 2.可以做网站,很多著名的网站包括 ...

  5. 局部敏感哈希Locality Sensitive Hashing(LSH)之随机投影法

    1. 概述 LSH是由文献[1]提出的一种用于高效求解最近邻搜索问题的Hash算法.LSH算法的基本思想是利用一个hash函数把集合中的元素映射成hash值,使得相似度越高的元素hash值相等的概率也 ...

  6. sleep和wait到底什么区别

    wait是在当前线程持有wait对象锁的情况下,暂时放弃锁,并让出CPU资源,并积极等待其它线程调用同一对象的notify或者notifyAll方法.注意,即使只有一个线程在等待,并且有其它线程调用了 ...

  7. C# List.sort排序详解(多权重,升序降序)

    很多人可能喜欢Linq的orderBy排序,可惜U3D里面linq在Ios上会报错,所以就必须使用list的排序. 其实理解了并不难 升序降序比较 sort有三种结果 1,-1,0分别是大,小,相等. ...

  8. javascript 一个关于时间排序的算法（一个页面多个倒计时排序）

    上周要做一个活动页面 秒杀列表页 需要一个时间的算法排序 自己琢磨了半天想了各种算法也没搞出来,后来问了下一个后台的php同学 他写了个算法给我看了下 ,刚开始看的时候觉得这就是个纯算法,不能转化成页 ...

  9. [HDOJ2604]Queuing（递推，矩阵快速幂）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2604 递推式是百度的,主要是练习一下如何使用矩阵快速幂优化. 递推式:f(n)=f(n-1)+f(n- ...

  10. Linux同步机制 - 多线程开发总结

    1 对于CPU开销大的场景,能利用多核,就尽量利用多核(常常自以为某需求的运算量不大,且CPU足够快,就偷懒写个单线程,结果效率很低) 2 使用多线程的时候,默认是加锁的.在加锁保证业务正常的条件下, ...