一，效果图。

二，代码。

<!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. Input and Output File

    Notes from C++ Primer File State Condition state is used to manage stream state, which indicates if ...

  2. SVN 客户端 TortoiseSVN 的安装和使用

    关于 参考博客:TortoiseSVN新人使用指南 TortoiseSVN 是一个 Apache Subversion(SVN)客户端,实现为Windows外壳扩展.它直观且易于使用,因为它不需要Su ...

  3. springboot知识点补充（一）

    测试配置 @RunWith(SpringRunner.class) @SpringBootTest @Configuration @ActiveProfiles("test") p ...

  4. jvm-垃圾回收gc简介+jvm内存模型简介

    gc是jvm自动执行的,自动清除jvm内存垃圾,无须人为干涉,虽然方便了程序员的开发,但同时增加了开发人员对内存的不可控性. 1.jvm内存模型简介 jvm是在计算机系统上又虚拟出来的一个伪计算机系统 ...

  5. String-intern方法举例分析其含义

    之后重新理解这个知识点时,又写了一些小例子 String a1 = new String("str01") ; String a2 = "str01" ; Sy ...

  6. hdu 6058---Kanade's sum（链表）

    题目链接 Problem Description Give you an array A[1..n]of length n. Let f(l,r,k) be the k-th largest elem ...

  7. List和ArrayList的区别

    List是一个接口,而ListArray是一个类. ListArray继承并实现了List. 所以List不能被构造,但可以向上面那样为List创建一个引用,而ListArray就可以被构造. Lis ...

  8. MLlib之LR算法源码学习

    /** * :: DeveloperApi :: * GeneralizedLinearModel (GLM) represents a model trained using * Generaliz ...

  9. leetcode — regular-expression-matching

    /** * Source : https://oj.leetcode.com/problems/regular-expression-matching/ * * Created by lverpeng ...

  10. loadrunner：Action.c(4): Error -27796: Failed to connect to server "192.168.66.3:8080": [10060] Connection timed out

    Action.c(4): Error -27796: Failed to connect to server "192.168.66.3:8080": [10060] Connec ...