<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>表格与表单02</title>

        <style>

            table{

                width: 1000px;

                border: 1px white solid;

                margin: 100px auto;

                border-collapse: collapse;

            }

            td,th{

                border: 1px white solid;

                padding: 20px;

            }

            .a{background-color:paleturquoise ;}

            first td{background-color: cadetblue;}

            .b{background-color: darkgoldenrod;}

        </style>

    </head>

    <body>

        <table>

            <tr style="background-color: darkcyan;">

                <th rowspan="2">Main mode</th>

                <th colspan="5">Area of workspace</th>

            </tr>

            <tr style="background-color: cadetblue;">

                <td> Central London</td>

                <td> Rest of inner London</td>

                <td> Outer London</td>

                <td> all London</td>

            </tr>

            <tr>

                <td style="background-color: cadetblue;"> Car and van</td>

                <td class="a">48</td>

                <td class="a">56</td>

                <td class="a">24</td>

                <td class="a">18</td>

            </tr>

            <tr>

                <td style="background-color: cadetblue;"> Motorbike</td>

                <td class="a">25</td>

                <td class="a">34</td>

                <td class="a">27</td>

                <td class="a">41</td>

            </tr>

            <tr>

                <td style="background-color: cadetblue;"> Bicycle</td>

                <td class="a">45</td>

                <td class="a">27</td>

                <td class="a">58</td>

                <td class="a">14</td>

            </tr>

                <tr>

                <td style="background-color: cadetblue;"> Bus and coach</td>

                <td class="a">47</td>

                <td class="a">56</td>

                <td class="a">25</td>

                <td class="a">14</td>

            </tr>

                <tr>

                <td style="background-color: cadetblue;"> National Rall</td>

                <td class="a">19</td>

                <td class="a">34</td>

                <td class="a">28</td>

                <td class="a">27</td>

            </tr>

                <tr>

                <td style="background-color: cadetblue;">Underground,train, light,rall</td>

                <td class="a">45</td>

                <td class="a">35</td>

                <td class="a">67</td>

                <td class="a">58</td>

            </tr>

                <tr class="b">

                <td> Total</td>

                <td> 150</td>

                <td> 123</td>

                <td> 142</td>

                <td> 181</td>

            </tr>

        </table>

</html>

结果：

Html学习之十八（表格与表单学习--统计表制作）的更多相关文章

  1. Html学习之十七（表格与表单学习--排行版制作）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 测开之路一百四十八：WTForms表单验证

    使用WTForms表单验证,可以在数据建模时就设置验证信息和错误提示 创建模型时,设置验证内容,如必填.格式.长度 from flask_wtf import Formfrom wtforms imp ...

  3. Html学习之十九（表格与表单学习--邮箱注册页面设计）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. Html学习之十六（表格与表单学习--课程表制作）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. python3.4学习笔记(十八) pycharm 安装使用、注册码、显示行号和字体大小等常用设置

    python3.4学习笔记(十八) pycharm 安装使用.注册码.显示行号和字体大小等常用设置Download JetBrains Python IDE :: PyCharmhttp://www. ...

  6. 学习笔记：CentOS7学习之十八：Linux系统启动原理及故障排除

    目录 学习笔记:CentOS7学习之十八:Linux系统启动原理及故障排除 18.1 centos6系统启动过程及相关配置文件 18.1.1 centos6系统启动过程 18.1.2 centos6启 ...

  7. DOM之表格与表单基础分享

    我是沐晴,好久不见.马上要放假啦,也是比较的忙. 今天来谈谈表格和表单的基本知识.前期的写的都是比较基础的知识,后期会慢慢增加实例.一起来学习吧. 先看表格,DOM中提供了一些属性,便于我们获取表单节 ...

  8. WEB入门二 表格和表单

    学习内容 Ø        表格的作用和制作 Ø        表单的制作 能力目标 Ø        掌握表格的创建 Ø        掌握设置表格的常用属性: Ø        理解表单的作用 Ø ...

  9. HTML&CSS精选笔记_表格与表单

    表格与表单 表格标记 创建表格 要想创建表格,就需要使用表格相关的标记 <table>     <tr>     <td>单元格内的文字</td>   ...

随机推荐

  1. 电池的QPNP模式

    名词解释: CV:Constant Voltage恒压 SMMB charger:Switch-ModeBattery Charger and Boost peripheral开关模式电池充电器和升压 ...

  2. OSPF与ACL综合实验

    OSPF与ACL综合实验 1.实验内容 (1)企业内网运行OSPF路由协议,区域规划如拓扑图所示(见3.实验拓扑图): (2)财务和研发所在的区域不受其他区域链路不稳定性影响: (3)R1.R2.R3 ...

  3. 机器学习--用PCA算法实现三维样本降到二维

    对于维数比较多的数据,首先需要做的事就是在尽量保证数据本质的前提下将数据中的维数降低.降维是一种数据集预处理技术,往往在数据应用在其他算法之前使用,它可以去除掉数据的一些冗余信息和噪声,使数据变得更加 ...

  4. 2019年最新50道java基础部分面试题（四）

    前35题请移步上几篇文章 36.数组有没有length()这个方法? String有没有length()这个方法?  数组没有length()这个方法,有length的属性.String有有lengt ...

  5. JDBC数据库连接（二）

    要想在编程语言中操作数据库,就必须与数据库建立连接. 建立JDBC连接的步骤如下: 导入JDBC包:使用Java语言的import语句在Java代码开头位置导入所需的类. 注册JDBC驱动程序:使JV ...

  6. python3的ExecJS安装使用

    参考官方文档安装 pip3 install PyExecJS 代码编写 import execjs ctx = execjs.compile(""" function a ...

  7. windows10安装最新的redis

    官方给的redis的windows版本最新为3,而linux版本是5 这里通过win10子系统安装,win10子系统的配置见另一篇博客https://www.cnblogs.com/MC-Curry/ ...

  8. 【洛谷5008】逛庭院（Tarjan，贪心）

    [洛谷5008]逛庭院(Tarjan,贪心) 题面 洛谷 题解 如果图是一个\(DAG\),我们可以任意选择若干个不是入度为\(0\)的点,然后把它们按照拓扑序倒序删掉,不难证明这样一定是合法的. 现 ...

  9. docker 集群管理gui

    k8s: https://www.rancher.cn/ swarm: https://github.com/dockersamples/docker-swarm-visualizer https:/ ...

  10. 前端之javascript1

    js介绍和js引入页面 学习前端脚本语言javascript的基本概念.页面引入方式.获取页面元素及操作元素属性的技巧,学习函数的基本定义方法和使用方法. JavaScript介绍 JavaScrip ...