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. 294. Flip Game II

    题目: You are playing the following Flip Game with your friend: Given a string that contains only thes ...

  2. MyBatis学习总结_07_Mybatis缓存

    一.MyBatis缓存介绍 正如大多数持久层框架一样,MyBatis 同样提供了一级缓存和二级缓存的支持 一级缓存: 基于PerpetualCache 的 HashMap本地缓存,其存储作用域为 Se ...

  3. Java：Collection集合类

    特点:只能用于存储对象,集合长度时可变的,集合可以存储不同类型的对象. 数组和集合类同时容器,不同的是: 1.数组虽然也可以存储对象,但是长度是固定的:集合长度时可变的. 2.数组中可以存储基本数据类 ...

  4. k序数组排序

    这道题,已知一个数组a,a[i]排好序后位于a[i-k]跟a[i+k]之间,问说该怎么最快地排序. 可以转换成多路归并问题, a[0]<a[k+1]<a[2k+2]<a[3k+3]. ...

  5. Android 设置闹铃步骤和基础代码

    主要分三步: 1. 设置闹铃时间; 2. 接收闹铃事件广播; 3. 重开机后重新计算并设置闹铃时间;   1. 设置闹铃时间(毫秒) private void setAlarmTime(Context ...

  6. docker 笔记（基本概念、快速运行、自定义镜像）

    1.docker docker是一个打包应用的工具 非常强大,能把操作系统也打在包里,进行无差别部署和运行. 所以docker也被认为是建立在操作系统上的虚拟机.   2.基本概念 镜像(image) ...

  7. 怎样做出优秀的扁平化设计风格 PPT 或 Keynote 幻灯片演示文稿？（装）

    不知道你有没有想过,为什么很人多的扁平化 PPT 是这个样子: 或者是这样: 然而,还有一小撮人的扁平化 PPT 却拥有那么高颜值: 为什么会产生这么大的差距呢?丑逼 PPT 应该如何逆袭成为帅逼呢? ...

  8. linux ps top 命令 VSZ,RSS,TTY,STAT, VIRT,RES,SHR,DATA的含义【转】

    转自:http://blog.csdn.net/zjc156m/article/details/38920321 http://javawind.net/p131 VIRT:virtual memor ...

  9. 《Linux/Unix系统编程手册》读书笔记8 （文件I/O缓冲）

    <Linux/Unix系统编程手册>读书笔记 目录 第13章 这章主要将了关于文件I/O的缓冲. 系统I/O调用(即内核)和C语言标准库I/O函数(即stdio函数)在对磁盘进行操作的时候 ...

  10. Java中的ArrayList的初始容量和容量分配

    List接口的大小可变数组的实现.实现了所有可选列表操作,并允许包括 null 在内的所有元素.ArrayList继承于List接口,除继承过来的方法外,还提供一些方法来操作内部用来存储列表的数组的大 ...