一，效果图。

二，代码。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>html 表格</title>

</head>

<body>

    <!--表格-->

    <p>

        Each table starts with a table tag. Each table row starts with a tr tag. Each table data starts with a td tag.

    </p>

    <h4>one column:</h4>

    <table border="1">

        <tr>

            <td>100</td>

        </tr>

    </table>

    <h4>one row and theree columns:</h4>

    <table border="1">

        <tr>

            <td>100</td>

            <td>200</td>

            <td>300</td>

        </tr>

    </table>

    <h4>tow rows and there columns:<h4>

        <table border="1">

            <tr>

                <td>100</td>

                <td>200</td>

                <td>300</td>

            </tr>

            <tr>

                <td>400</td>

                <td>500</td>

                <td>600</td>

            </tr>

        </table>

        <!--表格实例-->

        <table border="1">

            <tr>

                <td>row 1,cell 1</td>

                <td>row 1,clee 2</td>

            </tr>

            <tr>

                <td>row 2,cell 1</td>

                <td>row 2,cell 2</td>

            </tr>

        </table>

         <!--表格表头-->

         <table border="1">

            <tr>

                <th>Header 1</th>

                <th>Header 2</th>

            </tr>

            <tr>

                <td>row 1,cell 1</td>

                <td>row 1,cell 2</td>

            </tr>

            <tr>

                <td>row 2,cell 1</td>

                <td>row 2,cell 2</td>

            </tr>

         </table>

<!--没有边框的表格-->

<h4>this table has no bordrs:</h4>

    <table>

        <tr>

            <td>100</td>

            <td>200</td>

            <td>300</td>

        </tr>

        <tr>

            <td>400</td>

            <td>500</td>

            <td>600</td>

        </tr>

    </table>

    <h4>And this table has no borders:</h4>

    <table border="0">

        <tr>

            <td>100</td>

            <td>200</td>

            <td>300</td>

        </tr>

        <td>400</td>

        <td>500</td>

        <td>600</td>

        <tr>

        </tr>

    </table>

    <!--表格中的表头-->

    <h4>Table headers:</h4>

    <table border="1">

        <tr>

            <th>Name</th>

            <th>telephone</th>

            <th>Telephone</th>

        </tr>

        <tr>

            <td>bill</td>

            <td>3333</td>

            <td>9999</td>

        </tr>

    </table>

    <h4>vertical headers:</h4>

    <table border="1">

        <tr>

            <th>first name:</th>

            <td>bill</td>

        </tr>

        <tr>

            <th>telephone:</th>

            <td>777</td>

        </tr>

        <tr>

            <th>telephone:</th>

            <td>999</td>

        </tr>

    </table>

    <!--带有标题的表格-->

    <table border="1">

        <caption>Monthly savings</caption>

        <tr>

            <th>month</th>

            <th>saving</th>

        </tr>

        <tr>

            <td>Jan</td>

            <td>$100</td>

        </tr>

        <tr>

            <td>feb</td>

            <td>$50</td>

        </tr>

    </table>

    <!--跨行或跨列的表格-->

    <h4>cell that spans tow columns:</h4>

    <table border="1">

        <tr>

            <th>name</th>

            <th colspan="2">telephone</th>

        </tr>

        <tr>

            <td>bill</td>

            <td>4444</td>

            <td>999</td>

        </tr>

    </table>

    <h4>cell that spans two rows:</h4>

    <table border="1">

        <tr>

            <th>first name:</th>

            <td>bill</td>

        </tr>

        <tr>

            <th rowspan="2">telephone:</th>

            <td>88888</td>

        </tr>

        <tr>

            <td>888888</td>

        </tr>

    </table>

    <!--表格内的标签-->

    <table border="1">

        <tr>

            <td>

                <p>This is a paragraph</p>

                <p>This is another paragraph</p>

            </td>

            <td>This cell contains a table:

                <table border="1">

                    <tr>

                        <td>A</td>

                        <td>B</td>

                    </tr>

                    <tr>

                        <td>C</td>

                        <td>D</td>

                    </tr>

                </table>

            </td>

        </tr>

        <tr>

            <td>This cell contains a list

                <ul>

                    <li>apples</li>

                    <li>bananas</li>

                    <li>pineapples</li>

                </ul>

            </td>

            <td>HELLO</td>

        </tr>

    </table>

    <!--单元格边距-->

    <h4>without celladding:</h4>

    <table border="1">

        <tr>

            <td>first</td>

            <td>row</td>

        </tr>

        <tr>

            <td>second</td>

            <td>row</td>

        </tr>

    </table>

    <h4>with cellpadding:</h4>

    <table border="1" cellpadding="10">

        <tr>

            <td>first</td>

            <td>row</td>

        </tr>

        <tr>

            <td>second</td>

            <td>row</td>

        </tr>

    </table>

    <!--单元格间距离-->

    <h4>without cellspacing:</h4>

    <table border="1">

        <tr>

            <td>first</td>

            <td>row</td>

        </tr>

        <tr>

            <td>second</td>

            <td>row</td>

        </tr>

    </table>

    <h4>without cellspacing:</h4>

    <table border="1" cellspacing="0">

        <tr>

            <td>first</td>

            <td>row</td>

        </tr>

        <tr>

            <td>second</td>

            <td>row</td>

        </tr>

    </table>

    <h4>without cellspacing:</h4>

    <table border="1" cellspacing="10">

        <tr>

            <td>first</td>

            <td>row</td>

        </tr>

        <tr>

            <td>second</td>

            <td>row</td>

        </tr>

    </table>

</body>

</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. MFS 服务扫描与爆破

    MSF 服务发现 常用来发现局域网内,的常见服务,比如HTTP,FTP,TELNET等. MSF模块搜索: [root@localhost ~]# msfconsole msf5 > searc ...

  2. Java中的代理机制

    Java的三种代理模式 代理模式是一种设计模式,提供了对目标对象额外的访问方式,即通过代理对象访问目标对象,这样可以在不修改原目标对象的前提下,提供额外的功能操作,扩展目标对象的功能. 简言之,代理模 ...

  3. javascript-浏览器消息提醒

    如何让用户在浏览器最小化的状态下也能及时的收到消息提醒呢? 这个问题作为webRd是要正面面对的. 大约可分两种场景:一种是类似桌面通知的形式还有一种是类似QQ提醒(在系统任务栏闪烁随后高亮);接下来 ...

  4. Scala微服务架构 二

    三. Scala的Macro(宏) Scala Macros对scala函数库编程人员来说是一项不可或缺的编程工具,可以通过它来解决一些用普通编程或者类层次编程(type level programm ...

  5. 分布式任务调度系统xxl-job搭建

    为解决分布式环境下定时任务的可靠性,稳定性,只执行一次的特性,我找到了个大众点评开源的分布式调度任务解决完整系统,下面我将一步步深入解读该系统,从基本的使用到源码的探究 下载 https://gith ...

  6. Kubernetes-2--安装部署

    kubernetes的部署方式: 1,kubeadm 2, 二进制安装包部署 条件准备: 1,关闭系统的swap分区 为什么要关闭swap分区,我还没有去看官方的说明,搜索到的答案是 kubernet ...

  7. Linux下安装配置与使用MySQL数据库

    Linux下安装配置与使用MySQL数据库 在Linux下安装做开发时往往少不了要使用到MySQL数据库,下面就Linux系统为例讲解一下,如何安装MySQL数据库,如何启用/停.止MySQL服务,如 ...

  8. SQL 的单引号转义字符

    SQL 的转义字符是:'(单引号) 例:select * from user where name = '''06' 其中红色的单引号即表示转义字符,上例中 name的实际条件值为 '06,而不是 ' ...

  9. git关于文件权限修改引起的冲突及忽略文件权限的办法

    我们在使用git进行版本管理的时候,有时候只是修改了文件的权限,比如将pack.php修改为777,但其实文件内容并没有改变,但是git会认为此文件做了修改,原因是git把文件权限也算作文件差异的一部 ...

  10. Go 新起点

    因项目需求 又得开始啃Go了,虽然比计划早了点,撸起袖子开始干吧~