一，效果图。

二，代码。

<!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. 13.翻译系列：Code-First方式配置多对多关系【EF 6 Code-First系列】

    原文链接:https://www.entityframeworktutorial.net/code-first/configure-many-to-many-relationship-in-code- ...

  2. javascript从作用域到闭包-笔记

    读<你不知道的javascript>一书做个笔记;编译原理:    js是一门编译型的语言,与传统编译语言类似,传统编译的过程分为三个阶段 ;     1. 分词/词法分析; 2.解析/语 ...

  3. Java学习笔记44（多线程一：Thread类）

    多线程的概念:略 多线程的目的:提高效率 主线程: package demo; //主线程 public class Demo { public static void main(String[] a ...

  4. underscore.js源码解析【集合】

    // Collection Functions // -------------------- // The cornerstone, an `each` implementation, aka `f ...

  5. mysql 开发进阶篇系列 23 应用层优化与查询缓存

    一.概述 前面章节介绍了很多数据库的优化措施,但在实际生产环境中,由于数据库服务器本身的性能局限,就必须要对前台的应用来进行优化,使得前台访问数据库的压力能够减到最小. 1. 使用连接池 对于访问数据 ...

  6. jq通过对象获取其ID值,再简单ajax传到后台改值

    <tbody> <tr> <#if scopes?exists> <#list scopes as scopes> <td id='${(scop ...

  7. 从零开始学 Web 之 JavaScript（三）函数

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  8. spring boot 2.0 源码分析（一）

    在学习spring boot 2.0源码之前,我们先利用spring initializr快速地创建一个基本的简单的示例: 1.先从创建示例中的main函数开始读起: package com.exam ...

  9. 解决使用elementUI框架el-upload上传组件时session丢失问题

    在使用elementui框架上传组件的时候,出现session丢失,后端无法获取到sessionid,导致返回状态为未登陆 查看请求头缺少cookie值 上传组件代码: <el-upload c ...

  10. python的Web框架，类视图

    类视图 范式 from django.views import View # 继承View class IndexView(View): def get(self, request): #写法和函数视 ...