<!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. fork函数的一些小结

    今天遇到一个这样的问题,假设父进程有一个变量S,fork后,子进程中的变量S地址是否和父进程中的变量S 是相同的? 再学操作系统的时候,知道fork是采用的写时复制,所以如果子进程或者父进程不对变量S ...

  2. cmd切换路径和查看路径下的文件的命令

    查看当前路径下的文件: 1.1首先敲入命令  D:  则进入D盘目录,如下图所示: 1.2进入D盘目录后,敲入命令  dir  则显示D盘下的所有文件,如下图所示: 入上所述,在Windows系统的c ...

  3. NXP_RTCESL库

    恩智浦实时控制嵌入式软件库(缩写为RTCESL,以前为恩智浦嵌入式软件库FSLESL)是一组算法,从基础数学运算到高级数学变换以及高级观测器,这些都可以方便地用在复杂的实时控制应用中以及我们的电机控制 ...

  4. vue模板语法下

    样式绑定 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  5. AcWing 154. 滑动窗口 单调队列

    地址 https://www.acwing.com/problem/content/description/156/ 输入格式 输入包含两行. 第一行包含两个整数n和k,分别代表数组长度和滑动窗口的长 ...

  6. 原型链 | 显示原型、隐式原型 | 构造关系constructor | instanceof

    1.原型关系 prototype 显式原型:prototype 隐式原型:__proto__ 1. 每个函数function都有一个prototype,即显式原型(属性)2. 每个实例对象都有一个__ ...

  7. CometOJ10C 鱼跃龙门

    题目链接 problem 实际上就是对于给定的\(n\)求一个最小的\(x\)满足\(\frac{x(x+1)}{2}=kn(k\in N^*)\). solution 对上面的式子稍微变形可得\(x ...

  8. Python程序中的进程操作-进程池(multiprocess.Pool）

    目录 一.进程池 二.概念介绍--multiprocess.Pool 三.参数用法 四.主要方法 五.其他方法(了解) 六.代码实例--multiprocess.Pool 6.1 同步 6.2 异步 ...

  9. 我的前端架构(jquery)汇总

    目录 我的前端架构之一--页面作用域 我的前端架构之二--统一扩展Js方法 我的前端架构之三 -- 页面规范 我的前端架构之四 -- UI控件 我的前端架构之五 -- 一些方案实现 判断对象是否是 e ...

  10. React: React的复合组件

    一.介绍 不论Web界面是多么的复杂,它都是由一个个简单的组件组合起来实现的,既然会创建一个简单的组件,那么复杂的组件就有了下手的切入点了.现在来实现一个简单的复合组件.一个颜色面板,一共三部分组成. ...