<!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. android binder 进程间通信机制2 - Binder进程间通信库实现原理

    1.Service组件 使用模板类BnInterface描述,称为Binder本地对象,对应于Binder驱动程序中的Binder实体对象 实现原理图如下:

  2. 008.MongoDB分片群集概念及原理

    一 MongoDB分片介绍 1.1 分片 Mongodb另一种集群,就是分片技术,可以满足MongoDB数据量大量增长的需求. 当MongoDB存储海量的数据时,一台机器可能不足以存储数据,也可能不足 ...

  3. 007.MongoDB特殊成员

    一 MongoDB成员 1.1 常见特殊member Secondary存在一些特殊的成员类型: Priority 0 #不能升为主,可以用于多数据中心场景 Hidden #对客户端来说是不可见的,一 ...

  4. （day58）十、Cookie、Session、Token、Django中间件

    目录 一.Cookie (一)由来 (二)什么是Cookie (三)Django中操作Cookie (1)设置Cookie (2)获取Cookie (3)删除Cookie 二.Session (一)由 ...

  5. Vue 组件通信的多种方式（props、$ref、$emit、$attr、 $listeners）

    prop和$ref之间的区别: prop 着重于数据的传递,它并不能调用子组件里的属性和方法.像创建文章组件时,自定义标题和内容这样的使用场景,最适合使用prop. $ref 着重于索引,主要用来调用 ...

  6. 趣谈Linux操作系统学习笔记：第二十四讲

    一.小内存的分配基础 1.kmem_cache_alloc_node的作用 通过这段代码可以看出,它调用了kmem_cache_alloc_node函数,在task_struct的缓存区域task_s ...

  7. dotnetcore实现Aop

    dotnetcore实现Aop Aop大家都不陌生,然而今天给大家不将讲官方的filter,今天给大家分享一个轻量级的Aop解决方案(AspectCore) 什么是AspectCore AspectC ...

  8. 【shell脚本】对100以内的所有正整数相加求和(1+2+3+4...+100)===sum.sh

    对100以内的所有正整数相加求和(1+2+3+4...+100) [root@VM_0_10_centos shellScript]# cat sum.sh #!/bin/bash # 对100以内的 ...

  9. Appium+java ---- Intellij IDEA +genymotion安装配置

    引用文章:https://www.cnblogs.com/kaola8023/p/8442686.html Intellij IDEA 中配置Android SDK File-Project Stru ...

  10. eclipse彻底去除validation（彻底解决编辑js文件的卡顿问题）

    Eclipse中默认的JS编辑器非常慢,尤其在拷贝粘贴代码时,CPU总是占用很高甚至到100%,也就导致了编辑起来很卡. 这是因为Eclipse中带的Validate功能导致的,这个鸡肋的功能简直让人 ...