一，效果图。

二，代码。

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>html 表格</title>
  7. </head>
  8.  
  9. <body>
  10.     <!--表格-->
  11.     <p>
  12.         Each table starts with a table tag. Each table row starts with a tr tag. Each table data starts with a td tag.
  13.     </p>
  14.     <h4>one column:</h4>
  15.     <table border="1">
  16.         <tr>
  17.             <td>100</td>
  18.         </tr>
  19.     </table>
  20.     <h4>one row and theree columns:</h4>
  21.     <table border="1">
  22.         <tr>
  23.             <td>100</td>
  24.             <td>200</td>
  25.             <td>300</td>
  26.         </tr>
  27.     </table>
  28.     <h4>tow rows and there columns:<h4>
  29.         <table border="1">
  30.             <tr>
  31.                 <td>100</td>
  32.                 <td>200</td>
  33.                 <td>300</td>
  34.             </tr>
  35.             <tr>
  36.                 <td>400</td>
  37.                 <td>500</td>
  38.                 <td>600</td>
  39.             </tr>
  40.         </table>
  41.  
  42.         <!--表格实例-->
  43.         <table border="1">
  44.             <tr>
  45.                 <td>row 1,cell 1</td>
  46.                 <td>row 1,clee 2</td>
  47.             </tr>
  48.             <tr>
  49.                 <td>row 2,cell 1</td>
  50.                 <td>row 2,cell 2</td>
  51.             </tr>
  52.         </table>
  53.          <!--表格表头-->
  54.          <table border="1">
  55.             <tr>
  56.                 <th>Header 1</th>
  57.                 <th>Header 2</th>
  58.             </tr>
  59.             <tr>
  60.                 <td>row 1,cell 1</td>
  61.                 <td>row 1,cell 2</td>
  62.             </tr>
  63.             <tr>
  64.                 <td>row 2,cell 1</td>
  65.                 <td>row 2,cell 2</td>
  66.             </tr>
  67.          </table>
  68. <!--没有边框的表格-->
  69. <h4>this table has no bordrs:</h4>
  70.     <table>
  71.         <tr>
  72.             <td>100</td>
  73.             <td>200</td>
  74.             <td>300</td>
  75.         </tr>
  76.         <tr>
  77.             <td>400</td>
  78.             <td>500</td>
  79.             <td>600</td>
  80.         </tr>
  81.     </table>
  82.     <h4>And this table has no borders:</h4>
  83.     <table border="0">
  84.         <tr>
  85.             <td>100</td>
  86.             <td>200</td>
  87.             <td>300</td>
  88.         </tr>
  89.         <td>400</td>
  90.         <td>500</td>
  91.         <td>600</td>
  92.         <tr>
  93.         </tr>
  94.     </table>
  95.     <!--表格中的表头-->
  96.     <h4>Table headers:</h4>
  97.     <table border="1">
  98.         <tr>
  99.             <th>Name</th>
  100.             <th>telephone</th>
  101.             <th>Telephone</th>
  102.         </tr>
  103.         <tr>
  104.             <td>bill</td>
  105.             <td>3333</td>
  106.             <td>9999</td>
  107.         </tr>
  108.     </table>
  109.     <h4>vertical headers:</h4>
  110.     <table border="1">
  111.         <tr>
  112.             <th>first name:</th>
  113.             <td>bill</td>
  114.         </tr>
  115.         <tr>
  116.             <th>telephone:</th>
  117.             <td>777</td>
  118.         </tr>
  119.         <tr>
  120.             <th>telephone:</th>
  121.             <td>999</td>
  122.         </tr>
  123.     </table>
  124.     <!--带有标题的表格-->
  125.     <table border="1">
  126.         <caption>Monthly savings</caption>
  127.         <tr>
  128.             <th>month</th>
  129.             <th>saving</th>
  130.         </tr>
  131.         <tr>
  132.             <td>Jan</td>
  133.             <td>$100</td>
  134.         </tr>
  135.         <tr>
  136.             <td>feb</td>
  137.             <td>$50</td>
  138.         </tr>
  139.     </table>
  140.     <!--跨行或跨列的表格-->
  141.     <h4>cell that spans tow columns:</h4>
  142.     <table border="1">
  143.         <tr>
  144.             <th>name</th>
  145.             <th colspan="2">telephone</th>
  146.         </tr>
  147.         <tr>
  148.             <td>bill</td>
  149.             <td>4444</td>
  150.             <td>999</td>
  151.         </tr>
  152.     </table>
  153.     <h4>cell that spans two rows:</h4>
  154.     <table border="1">
  155.         <tr>
  156.             <th>first name:</th>
  157.             <td>bill</td>
  158.         </tr>
  159.         <tr>
  160.             <th rowspan="2">telephone:</th>
  161.             <td>88888</td>
  162.         </tr>
  163.         <tr>
  164.             <td>888888</td>
  165.         </tr>
  166.     </table>
  167.     <!--表格内的标签-->
  168.     <table border="1">
  169.         <tr>
  170.             <td>
  171.                 <p>This is a paragraph</p>
  172.                 <p>This is another paragraph</p>
  173.             </td>
  174.             <td>This cell contains a table:
  175.                 <table border="1">
  176.                     <tr>
  177.                         <td>A</td>
  178.                         <td>B</td>
  179.                     </tr>
  180.                     <tr>
  181.                         <td>C</td>
  182.                         <td>D</td>
  183.                     </tr>
  184.                 </table>
  185.             </td>
  186.         </tr>
  187.         <tr>
  188.             <td>This cell contains a list
  189.                 <ul>
  190.                     <li>apples</li>
  191.                     <li>bananas</li>
  192.                     <li>pineapples</li>
  193.                 </ul>
  194.             </td>
  195.             <td>HELLO</td>
  196.         </tr>
  197.     </table>
  198.     <!--单元格边距-->
  199.     <h4>without celladding:</h4>
  200.     <table border="1">
  201.         <tr>
  202.             <td>first</td>
  203.             <td>row</td>
  204.         </tr>
  205.         <tr>
  206.             <td>second</td>
  207.             <td>row</td>
  208.         </tr>
  209.     </table>
  210.     <h4>with cellpadding:</h4>
  211.     <table border="1" cellpadding="10">
  212.         <tr>
  213.             <td>first</td>
  214.             <td>row</td>
  215.         </tr>
  216.         <tr>
  217.             <td>second</td>
  218.             <td>row</td>
  219.         </tr>
  220.     </table>
  221.     <!--单元格间距离-->
  222.     <h4>without cellspacing:</h4>
  223.     <table border="1">
  224.         <tr>
  225.             <td>first</td>
  226.             <td>row</td>
  227.         </tr>
  228.         <tr>
  229.             <td>second</td>
  230.             <td>row</td>
  231.         </tr>
  232.     </table>
  233.     <h4>without cellspacing:</h4>
  234.     <table border="1" cellspacing="0">
  235.         <tr>
  236.             <td>first</td>
  237.             <td>row</td>
  238.         </tr>
  239.         <tr>
  240.             <td>second</td>
  241.             <td>row</td>
  242.         </tr>
  243.     </table>
  244.     <h4>without cellspacing:</h4>
  245.     <table border="1" cellspacing="10">
  246.         <tr>
  247.             <td>first</td>
  248.             <td>row</td>
  249.         </tr>
  250.         <tr>
  251.             <td>second</td>
  252.             <td>row</td>
  253.         </tr>
  254.     </table>
  255. </body>
  256.  
  257. </html>

参考资料：《菜鸟教程》

【代码笔记】Web-HTML-表格的更多相关文章

  1. Web jquery表格组件 JQGrid 的使用 - 全部代码

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  2. 《编写高质量代码：Web 前端开发修炼之道》 笔记与读后感

    编写高质量代码:Web 前端开发修炼之道/曹刘阳著. —北京:机械工业出版社,2010.5 第一版 涉及到的知识点: 1. CSS Sprites 在国内很多人叫css精灵,是一种网页图片应用处理方式 ...

  3. Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引

    因为内容比较多,所以每篇讲解一些内容,最后会放出全部代码,可以参考.操作中总会遇到各式各样的问题,个人对部分问题的研究在最后一篇 问题研究 里.欢迎大家探讨学习. 代码都经过个人测试,但仍可能有各种未 ...

  4. Web jquery表格组件 JQGrid 的使用 - 11.问题研究

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  5. Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  6. Web jquery表格组件 JQGrid 的使用 - 5.Pager翻页、搜索、格式化、自定义按钮

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  7. Web jquery表格组件 JQGrid 的使用 - 6.准备工作 & Hello JQGrid

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  8. Web jquery表格组件 JQGrid 的使用 - 7.查询数据、编辑数据、删除数据

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  9. Web jquery表格组件 JQGrid 的使用 - 8.Pager、新增数据、查询、刷新、查看数据

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  10. <Python Text Processing with NLTK 2.0 Cookbook>代码笔记

    如下是<Python Text Processing with NLTK 2.0 Cookbook>一书部分章节的代码笔记. Tokenizing text into sentences ...

随机推荐

  1. winform判断一个事件是否已经绑定了事件处理函数

    public static class ComponentHelper<T> where T : Control { public static bool HaveEventHandler ...

  2. sku 和 spu

    https://www.jianshu.com/p/867429702d5a     里面的图片挺好的

  3. 基于vue的颜色选择器vue-color-picker

    项目中有用到颜色选择器的童鞋们可以看过来了 关于color-picker的jquery的插件是有蛮多,不过vue组件没有吧,反正我没有找到, 虽然element-ui里面有这个,但是你愿意为了一个小功 ...

  4. GMM基础

    一.单成分单变量高斯模型 二.单成分多变量高斯模型 若协方差矩阵为对角矩阵且对角线上值相等,两变量高斯分布的等值线为圆形. 若协方差矩阵为对角矩阵且对角线上值不等,两变量高斯分布的等值线为椭圆形, 长 ...

  5. windows下安装Jenkins

    1.在机子上安装jdk8 2.下载jenkins.war在里面可以选择任意版本的war包,lastest为最新的,推荐下载! 官网地址:https://jenkins.io/download/ 3.打 ...

  6. 未能写入输出文件“c:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files\root\106f9ae8\cc0e1169\App_global.asax.haz99mum.dll”--“拒绝访问。 ”

    在本地开发环境没问题,但是发布到服务器出现:未能写入输出文件“c:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Fil ...

  7. leetcode — reverse-integer

    /** * Source : https://oj.leetcode.com/problems/reverse-integer/ * * Created by lverpeng on 2017/7/4 ...

  8. Netty 超时机制及心跳程序实现

    Netty 超时机制的介绍 Netty 的超时类型 IdleState 主要分为: ALL_IDLE : 一段时间内没有数据接收或者发送 READER_IDLE : 一段时间内没有数据接收 WRITE ...

  9. NLog日志框架使用探究-1

    目录 前言 为什么是NLog? 目的 配置 基本配置 日志等级 输出例子 目标 参数 规则 日志分发 日志收集 结语 参考文档 前言 日志是每个程序的基本模块.本文是为了探究如何通过NLog方便及记录 ...

  10. Mybatis之逆向工程

    前面几篇基本把mybatis简单使用学习了下,今天学习下mybatis逆向工程,我们在开发中经常需要先设计数据库表结构或者先设计model,那就是能不能有工具可以只需在一边设计之后另一边自动生成呢?于 ...