一，效果图。

二，代码。

<!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. 2.html基础标签:无序+有序+自定义列表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. fiddler电脑抓包和手机抓包

    概述 以前听别人说抓包抓包的,听起来很神秘高大上的样子,想入门又不知道从何学起.今天偶然在工作中遇到了以下2个需求: 改线上的代码,特别是PC端js代码. 写了一个移动端页面,由于跨域,改了host地 ...

  3. Liferay的一些应用领域

    Liferay的用途是快速的部署内外站点,统一权限管理,开发Web热插拔插件,并不是所有系统都适合 不适合Liferay的一些应用领域: 1.独立认证.简单的系统,比如一些简单的增删改查:2.复杂业务 ...

  4. 自定义线程池reject策略

    import java.util.Date;import java.util.concurrent.ArrayBlockingQueue;import java.util.concurrent.Rej ...

  5. 线程间通信wait和notify【All】简介

    1.通信就是指相互交换一些数据或者发送一些控制指令,比如一个线程给另一个暂停执行的线程发送一个恢复执行的指令. 可变共享变量是天然的通信媒介,也就是说一个线程如果想和另一个线程通信的话,可以修改某个在 ...

  6. centos下如何使用sendmail发送邮件

    最近在实施服务端日志监控脚本,需要对异常情况发送邮件通知相关责任人,记录下centos通过sendmail发送邮件的配置过程. 一.安装sendmail与mail 1.安装sendmail:  1) ...

  7. SignalR 中使用 MessagePack 序列化提高 WebSocket 通信性能

    It's like JSON.but fast and small. MessagePack is an efficient binary serialization format. It lets ...

  8. spring framework核心框架体系结构（转载）

    作者:Dreawer 很多人都在用spring开发java项目,但是配置maven依赖的时候并不能明确要配置哪些spring的jar,经常是胡乱添加一堆,编译或运行报错就继续配置jar依赖,导致spr ...

  9. （转）关于CNN中平移不变性的理解

    https://www.quora.com/Why-and-how-are-convolutional-neural-networks-translation-invariant https://st ...

  10. leetcode — two-sum-ii-input-array-is-sorted

    import java.util.ArrayList; import java.util.List; /** * Source : https://oj.leetcode.com/problems/m ...