一，效果图。

二，代码。

<!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. Jira/Confluence的备份、恢复和迁移

    之前的文章已经分别详细介绍了Jira.Confluence的安装及二者账号对接的操作方法,下面简单说下二者的备份.恢复和迁移: 一.Jira.Confluence的备份.恢复1)Confluence的 ...

  2. maya2016卸载/安装失败/如何彻底卸载清除干净maya2016注册表和文件的方法

    maya2016提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装maya2016失败提示maya2016安装未完成,某些产品无法安装,也有时候想重新安装maya ...

  3. AndroidStudio环境安装与配置

    前言 大家好,给大家带来AndroidStudio环境安装与配置的概述,希望你们喜欢 AndroidStudio IDE下载 我们选择用Android Studio开发Android的App,Andr ...

  4. spring 原理1：java 模拟springIOC容器

    本篇博客主要是使用java代码模拟spring的IOC容器,实现依赖注入:当然只是模拟spring容器中简单的一点实现原理而已,加深一些自己对spring框架的底层原理的理解: 使用的技术:dom4j ...

  5. Shell-12 -- case

    case 是一种匹配选择执行的结构,相当于java中的switch

  6. MSTP-多生成树协议

    多生成树协议MSTP(Multiple Spanning Tree Protocol)是IEEE 802.1s中定义的一种新型生成树协议.简单说来,STP/RSTP是基于端口的,PVST+是基于VLA ...

  7. Rip配置

    Rip配置 首先建立如图拓扑图 分别配置两台电脑的ip地址和子网掩码和网关.如图所示. 在router0上配置两个端口的IP以及子网掩码 在路由器router0上配置rip2协议.里面的no auto ...

  8. hdu 5972---Regular Number(字符串匹配)

    题目链接 Problem Description Using regular expression to define a numeric string is a very common thing. ...

  9. 使用jdk的keytool 生成CA证书的方法

    一.CA证书生成设置总共分为以下5步: 步骤: 1.根据java的keytool生成CA根证书,放在服务器 2.根据服务器CA根证书导出客户端证书 3.tomcat增加SSL配置 4.客户端IE浏览器 ...

  10. 解决vue路由history模式刷新后404的问题

    server { listen ;#默认端口是80,如果端口没被占用可以不用修改 server_name localhost; root E:/vue/my_project/dist;#vue项目的打 ...