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,iVBORw0KGgoAAAANSUhEUgAAAckAAACqCAIAAABJSiNmAAASWElEQVR4nO2d268bxR2A9z/ye9UiUNMnVFGEgELZlFJoKi4VtIFCSAgQUjAIcREhF0BFUQsRArKCQoEAoZBDadMWUB1CzgnQPvCCyOWcPPXJffCxd667O/Z4dmf8ffKLPXuZ/e1vv50Zj73Ze8ur2/ccXPnmf7x48eLFy9crO7y8un3PwRfe/pgXL168ePl6Ze8tr23fc3AIAAD+yA4vr23fW7RdDQCApMjeWz63fQ9uBQDwSXZ4eQ23AgD4BbcCAPgHtwIA+Cd798TaXbgVAMAr2Tu4FQDAN7gVAMA/2Tsn1rbhVgAAr2Rvf45bAQA8g1sBAPyTHcKtC8ig38tK8mbnv8gbLyrvqdcfuFdR2cYIdUvycUxosMNBv+d8LAAOZIc+X9u2myRbIIpcts/ITw1EM5VbZ6fIx9Ud9HtKDfRPmjHtegCNyQ4dX9u6m//BWhhKUykf1qumHbeKFdYqj1uhs2RvHV/FrQuDzSlFIX5W5Mb+teJWcany40G/l+X99a56XqhjAsJKsuHFren6nLbdahz7MFccwC/ZW8dX78Sti0KDpqfcNhRbtMLK8jiCuNCopNyA6FapeaxuebKK5svRIEaeG4YuKt0qFwqOpt0KAcjePL5655O4dTFooBTVvoL2yiKtb24fEy3danRmrz9o3Po0fENVtab6LZq4LG6FuZO9+RluXRhclKL33iduNWxG8qRqNJtA5Q2ae+ijaqyPMmjlxnkC6lLiQrgVQoFbF4qGYwKCUk3tVsO8qoZurRChacBV6seP5zdoIxCVYwLlXmi3QlCyNz5b3YJbFwWbUyaf2zvu9e1Wo3er2q1m1luqxVC7FUz0ax+bVbbDmAC0Rvb64Mwdu15uuxoQipo5WKbhVufxVqNbzROojLP8JwXmOVfKN2UWRxqHW3ErBCN79ZNvbn/8hbarAeGo/O2A1AufNBRLozaaJ2B2qzJPQNCbYjrBqObqZHJ5RbtV3luz9QC8kL189OvNjzzfdjUgLNIMVkP3viwR7Gaf36qY2uZWbeNDabEGJaqLqx0prqoM1I4rMuvPcQFsZM+9v/KrB55tuxoAAEmRPf3aPzfdvbvtagAAJEX2yB8PbbztwbarAQCQFNndu56/9IZtbVcDACApslvu23Xh1bfYig8CAMTA/v37Q6qzluy6W3duuHyTrbjtcAEA1LN///4NGzaEVGctWX7DHef96GpbcdsRAwCo4cCBAxs2bOicW6/cdOv3LtpoK247aAAAVUzE2jm3XrFp83kX/dRW3HbcAACsiGLtnFuv/OVvz7/4Z7bitkMHAGBGEWvn3HrVDXdecMl1tuK2owcAYEAXa+fcuvGmrd+/lHkCABANRrF2z603bsOtABALNrF2zq1XXb/lgkuutRW3HUYAgJIKsXbOrVduuu28i6b8LitkRQEAKsTaObdefu1vvvvDKee3hqwoAEBUbr3m5u9c+BNbcRO3Vh8twHSQYE6kHa6GRzdPVTqTXXbNLbO7NVRtYYEgwZxIO1xRuvWKX9w645hA1w4J0oAEcyLtcEXp1o03bj3/4p/binErtAUJ5kTa4YrSrddt3vmDH19vK8at0BYkmBNphytKt9607ZELN/7aVoxboS1IMCfSDleUbr31/n0XX7fFVoxboS1IMCfSDleUbt322HOX3XSPrRi3QluQYE6kHa4o3frAM6/kmx+wFeNWaAsSzIm0wxWlWx89cPiaLY/ZinErtAUJ5kTa4YrSrXteObrpnr22YtwKbUGCOZF2uKJ067NvH7vx/t/binErtAUJ5kTa4YrSrc8f+fLmh/5gK8at0BYkmBNphytKt7549OvNjxywFeNWaAsSzIm0wxWlW4uPv7nt8RdsxSm7ddDvZev0+oPy8yIff5zlRZiqrO9S2F2RB9t5V/GWYMIJVc+1nfXsaLi0z5WnZKpwyaEpaZJ7g35PPsAib3TMo+A4ZneUbn3101O3P/GSrXhB3CpmhJhu7bh1vWK41UOCmeXRQHq4tcGK4gE2V+ZoSbfgROnWP/37zO1PvGwrXhS3ljkhZVs7esOtw+HQh1vHZ7i8jCfnvPbKbkOPMzGLW91TTXPr6INmG5oiweN06+Ds7bsW2a29nnii1++po8+Esy8oV0io8gIsyyfF2tVpT2ShRGlJjBeu3H9elPeJvBiKt42IBT1zghnjPej3ZGFKt9hyYYNbxVNj+DzP8/E29JXFvUgVknY/i8nn41YpHderJ0ds9KnejhVW1QLiLlfcGhWT890vx4nG3ZW+mHNKLglZYSjRVpvdrY77H98Y5AsiPmZNsCYXsCGAskAUG5hOgnrKev2BsrLe8zZbaqbTNQe3GkYMDPnY6w/07ZivjMnBGVTc/Ohwa+eZXABFOf4z7tmIuaLkgfh2kkHrSVXkwtvp3DrUpNBg/0pt5LexNl1nTbAG/V155K8w3FBNcVZDOz7r2tCDtPK4HuJb6dTOOArhcbxVymY5KeVYKfHQUl29udj7dC5Hh1s7T3l+J5fYJJvsDUkp/yr16cmtDvufuefVKQK4VV1WWEGMpX18QDCkuCPDyipa2az9C/9uVY5GqqXRreqAitaMVa+FxN362uDsHYvu1vEdOp/cqOvdar7owrlV3L+pSaS/jY0QYwKm4FrdKm5Jb306utU63jTt6fI/JmCqudmt6maMcwoN1wJuTd+t2ldFuluN6RfQrVX7x61GzJErcm24ev0UWccEfLRbazUyScEpG7De3SoNcDUaE7C7lXarzqK4tbxFj0634dIxjYo1cav2vVNTtyqNgor941YzdXOw5LBXuKTReKvFrWoeCEur6TP1jKjh0L9b5cqpEajM2Mbjrc2PFLdGhfECMF0utd/TW5qmlbMIJIyZOsnG2v3jVhtVg5220op2mvlE1ri1Yp5A5WYdmVu7tbbieWEdYJ2s1jPdRVKfJ4BbDR1CLeekVKnt6mido9FnTccE9GZ0zf5xayWyJOQLWpyEKQXMPg6gbaXWrRXrmmeQToP/8VYlDY3zVcZrV81v1SeluWcmbgXwBgnmRMvhkiZsKeMrmsPlhZuAWwG8QYI50Xa4Rm1Ry+8pDKZ1a6LjVgBvkGBOtB+uIpcao4ZfGBqXa0SUbn392OodTx60FeNWaAsSzIm0wxWlW/98bHULboXuQYI5kXa4cCuAN0gwJ9IOF24F8AYJ5kTa4cKtAN4gwZxIO1y4FcAbJJgTaYcrSre+cWz1TtwK3YMEcyLtcOFWAG+QYE6kHS7cCuANEsyJtMOFWwG8QYI5kXa4FtSt1csATA0J5kTa4RodXUxuffOzWd0KABAG3AoA4J/Fcmv10QJMBwnmRNrhWtAxga4dEqQBCeZE2uHCrQDeIMGcSDtcuBXAGySYE2mHK0q3vvXZ6lbcCt2DBHMi7XDhVgBvkGBOpB2uON16fHXr7tjcan/ucJHbHsUz6Pemf0TxoN9r4WHU9iq3U5+wdEAWRa7F3/4wbDkrg5+coOGyPNN9fuDWAMiPkxyqD420u3X2veLWoLTt1lGmaXfuSdgH/Z5QLJ0RuSgM4cIlH900TxZ0J0q3Hjq+ui0etxqdIp5r3JoMbbq1bJeJ8VeTSzgL6qka9HuBz0+wcGlZWeTzv5Hg1nljOYuDohgIS+SF0DubJLiSEmKvRr4IypXLxWWXjZbQL53RLopyy3JdxT6jsrK5SK6yUOO8b3ervdNq2b9iDOFQ1WCGbYm15tZJ16hWGmXotHv6nG7ydtq7Fc002tYQ3DpnGpzEkQjGC4n9FXFlqVejvymbIuLKwlVU1ZqU15G2O7nY9L6lsUiosrSxddsZLl3JBtoBmPdf7VbL8QSg7TGB+gZZeX70zAzRmJNoL1whbiO4dc40yFdlEXOvTd1OuZRtD+Mlqv2i9tTLrWnbbVRUVlldyDLIZR0qqNhJnVvNRQHovFuF4gV2a5ikiNKtb3++tm2PNTJRutVsA7uoyjJrnoyc2uuZW4vqZrT6GrY7LqsoKrenXbq2io7HDZSiqp3UjglUHOBc6bhbtS7CQro11O0Wt86ZhmMCTdyqMxadcQfrzqqxa6VbDRN2LLvUV9Mv1Ip+mGHAtWonuNWK3Y+qUhbUreEOErfOG9u5bCKKqnarYXFbQdWUE9d2a15UFk3RbtWiUr8TF7cGFUZn3WoaGFrA77LCTL5aB7fOHdc5WEa36huZrFU33jo0X1nCUka3hhpvtVaobrxVKBM2bRpvDdcW66RbtenVwufqEH7C0yoqvtCdD1G69Z3P1+6Kx62uvx2wzEDUZz8b5gmo31XUzwy3uzXQPAHlruGwf+OmDfMEAjbFuufWURArujzm/ApDuHDZpiDOE9waCHFuavVvXu2zu8VtWKeBSpNjFWkZrp0KtyobVtc1F00zv1WOjdY6N+9fmsIqjxb0+v3cuLW50zm32sfph8NhZeRDECpc8mGGOl7cCkkR/PsYCRLMibTDFaVb3z2xth23ggncGhFphwu3QlLg1ohIO1y4FcAbJJgTaYcLtwJ4gwRzIu1wRenWwzO7tXoZgKkhwZxIO1yjo4vKrctr2/fO5FYAgDDgVgAA/8Tk1veW1+6eza3VRwswHSSYE2mHK8oxAS9uDVVbWCBIMCfSDhduBfAGCeZE2uGK0q1/WT53D26F7kGCOZF2uOJ068q5e/bhVugcJJgTaYcrSre+j1uhk5BgTqQdLtzaVaR/h2vvF/Ie8fK39u3+X0AdXUgw/T9rpb/Ys/45ZYL/MWh4VNAEMSjzOXDc2kFq/ks7VnBrAORnog+HSsT0fxiv/ff0OTLXcNn/TH30dhKieT3oJUq3fnDy3L3purX2GTCxglvnzqQxJv8nuhj1Irc97VESThDmGS71uNWncygxmcOR49auYXuYXFGoz/Uzd2msfR1pHduf+4v7LvLyH/xtj7dz3J6wnOUQBv3e+iMKMulSGG+sj1utjGRZSPdm4yMhjc/ATP1ZhNYnWc4L3NoxGjwQbqBdPOaHHolv5HVEf8suF/tHVc8YmnZ7xudYaRW1PGdw8lhw3GpgHFP91Oi32PGDdBfoGdrycz17/YH4vCHGW9fJPjh5bkeqbq3Pb1NXTnpYlKnIullT98j8MNVm1azZnvE5YNojaZXWrfowMdxqQHqKOW5VUfKwokPlDdzaMRzyW+v96+vKHcDKJp/+1L/KlPOzPX0AQ7nijf1W3Kph7RPg1uGw6vu84XA4r6eHR+rWtXufStStTccESh/JjVMd80M95W9JywWN7czaerhuz3oIpufEBrgMfNFSgklnCrcqqElkboL4b7lG6dYjJ8/tSNWt1gSffD5Fx19BGNPUssrBrdNvz34ItFunwHxPLUcIFvm7LMMgkn5Twa1j0nZr3Rws41ilaaRtOKy4WsYFpuFRZ7e6bq/iENQyxludUUJmn29kOg1hQzvncGnzxIXPpQOdzw07Trd+kbJb6347oM+JLgtl9Vi/lyovP32FsoNf5dbZtldxCMa8Z56AA6Yu8OS9fUJ9ar8d0CaciFQMovgjTreeXEvarcOhOv3T0IUpS+SxeaWwXMv2I1rx87wQLrGadutM27MegqnxxPxWF8y9F3NOVMyTDsEcw1Xz3YN06HPKpyjdurQAboUYIcGcSDtccbr1C9wKXYQEcyLtcOFWAG+QYE6kHa443cqYAHQSEsyJtMMVpVuPnFxN9ndZEDMkmBNphytKty6tnN2x76CtuIlbq5cBmBoSzIm0wzU6upjceuTk6oxuBQAIQ0xuXVo5ex9uBYAYiMytO/a9bCuuEOvDDz9cfZwAACEJqc5apnQrYgWArhFSnbVkSytn7nN0K2IFgA4SUp21ZEsrZ5zarYgVALpJSHXWkh1ZPt3crYgVADpLSHXWkh1ZPt1wTACxAkCXCanOWrIjy6d27H3JVoxYASAWQqqzluzIiVM79r5oK0asABALIdVZS3279dFHH207YgAA9YRUZy3ZUmW7FbECQCyEVGct2dJylVsBAGAKsqUT3+JWAAC/ZEvL396HWwEAvEK7FQDAP7RbAQD8k314ArcCAHgm+3D52524FQDAK9lfl7/duQ+3AgD4JPtoBbcCAHgGtwIA+Cf7aOUUbgUA8Ev2t5OnfodbAQC8kv0dtwIA+CY7+sWp+5/CrQAAPsmOfnH6/qes/98KAABTkP3jy9MPPI1bAQB8kv0TtwIA+Cb711en+7gVAMAr2cdfnXnwaesztAEAYAqyj/9z5sFncCsAgE+yT3ArAIBvsk//e+Yh3AoA4BXcCgDgH9wKAOCf/wOzjj4p8l4KBAAAAABJRU5ErkJggg==" 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. Java：静态导入

    静态导入 importStatic 当类重名时,需要指定具体的包名. 当方法重名时,需要指定具体的类或对象名. 举例如下: import java.util.*; import static java ...

  2. Linux命令-wc

    wc命令用于统计指定文本的行数.字数.字节数 格式:wc [参数] 文本 [root@localhost test]# wc test.txt test.txt [root@localhost tes ...

  3. Linux内核的整体架构

    Linux内核的整体架构 作者:蜗蜗 发布于:2014-2-21 13:23 分类:Linux内核分析 原文:http://www.wowotech.net/linux_kenrel/11.html ...

  4. HDU 4652 Dice（期望）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4652 题意:一个m个面的筛子.两种询问:(1)平均抛多少次后使得最后n次的面完全一样:(2)平均抛多少 ...

  5. [HIHO1323]回文字符串（区间dp）

    题目链接:http://hihocoder.com/problemset/problem/1323 思路:区间dp,按照区间长度枚举所有区间和区间的起始位置.这时也可获取到区间的末位,比对这两个字符是 ...

  6. 如何将SQLite数据库（dictionary.db文件）与apk文件一起发布

      可以将dictionary.db文件复制到Eclipse Android工程中的res\raw目录中,如图1所示.所有在res\raw目录中的文件不会被压缩,这样可以直接提取该目录中的文件.使 用 ...

  7. Asp.Net生命周期系列四

    上回我们说的当一个Http请求来到HttpModule这里的时候,Asp.Net内部并未对这个Http请求做出任何的处理,我们可以对这个Http请求添加一些我们需要的信息,以方便我们控制这个Http请 ...

  8. Windows系统下Memcached缓存系列一:Couchbase(服务器端)和CouchbaseClient(c#客户端)的安装教程

    一:服务器端的安装  官网 http://www.couchbase.com/download  我的电脑是64位的win7,找到对应下载windows版本的服务器端缓存,大概90M的样子 运行期间可 ...

  9. cakephp之查询

    find public find( string $type 'first' , array $query array() ) Queries the datasource and returns a ...

  10. 长期演进技术(LTE，Long Term Evolution)

    /********************************************************************************* * 长期演进技术(LTE,Long ...