表格基础知识链接：http://blog.csdn.net/baidu_37107022/article/details/71713281

练习要求实现如下效果图：

代码演示

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style>
  7.             body{
  8.                 background: #ebeff7;
  9.             }
  10.             /*清除表格默认样式*/
  11.             table{
  12.                 border-collapse: collapse;
  13.             }
  14.             th,td{
  15.                 padding: 0;
  16.             }
  18.             table{
  19.                 width: 640px;
  20.                 margin: 0 auto;
  21.             }
  22.             th,td{
  23.                 border: 1px solid #99b0da;
  24.                 text-align: center;
  25.             }
  27.             th{
  28.                 font: 14px/30px "微软雅黑";
  29.                 background: #dbe3fa;
  30.             }
  31.             td{
  32.                 font: 12px/28px "微软雅黑";
  33.                 background: #fff;
  34.             }
  35.             .bg{
  36.                 background: #f4f7fc;
  37.             }
  38.             img{
  39.                 vertical-align: middle;
  40.             }
  41.             .high{
  42.                 color: #e54600;
  43.             }
  44.             .low{
  45.                 color: #7171d1;
  46.             }
  47.             .space{
  48.                 height: 4px;
  49.                 border: none;
  50.                 background: #ebeff7;
  51.             }
  52.         </style>
  53.     </head>
  54.     <body>
  55.         <table>
  56.             <thead>
  57.                 <tr>
  58.                     <th colspan="2">日期</th>
  59.                     <th colspan="2">天气现象</th>
  60.                     <th>气温</th>
  61.                     <th>风向</th>
  62.                     <th>风力</th>
  63.                 </tr>
  64.             </thead>
  65.             <tbody>
  66.                 <tr>
  67.                     <td rowspan="2" class="bg">22日星期五</td>
  68.                     <td class="bg">白天</td>
  69.                     <td><img src="img/img_01.gif"/></td>
  70.                     <td>晴间多云</td>
  71.                     <td class="high">高温7C</td>
  72.                     <td>无持续风向</td>
  73.                     <td>微风</td>
  74.                 </tr>
  75.                 <tr>
  76.                     <td class="bg">夜间</td>
  77.                     <td><img src="img/img_02.gif"/></td>
  78.                     <td>晴</td>
  79.                     <td class="low">低温-4C</td>
  80.                     <td>无持续风向</td>
  81.                     <td>微风</td>
  82.                 </tr>
  83.                 <tr><td colspan="7" class="space"></td></tr>
  84.                 <tr>
  85.                     <td rowspan="2" class="bg">22日星期五</td>
  86.                     <td class="bg">白天</td>
  87.                     <td><img src="img/img_01.gif"/></td>
  88.                     <td>晴间多云</td>
  89.                     <td class="high">高温7C</td>
  90.                     <td>无持续风向</td>
  91.                     <td>微风</td>
  92.                 </tr>
  93.                 <tr>
  94.                     <td class="bg">夜间</td>
  95.                     <td><img src="img/img_02.gif"/></td>
  96.                     <td>晴</td>
  97.                     <td class="low">低温-4C</td>
  98.                     <td>无持续风向</td>
  99.                     <td>微风</td>
  100.                 </tr>
  101.             </tbody>
  102.         </table>
  103.     </body>
  104. </html>

源码地址：http://download.csdn.net/detail/baidu_37107022/9840533

【小练习03】CSS-表格（table）--天气预报的更多相关文章

  1. css如何让表格table的边框为1像素呢

    在Html中使用table是网页制作中必不可缺的一部分,如果直接给css设置table里面的td边框为1像素的话,那么实际我们从网页上看到的效果却不是1像素. 那么我们怎么用css让table的边框为 ...

  2. BootStrap入门教程 (二) ：BASE CSS（排版(Typography),表格(Table),表单(Forms),按钮(Buttons)）

    上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffoldin ...

  3. amazeui学习笔记--css（HTML元素5）--表格Table

    amazeui学习笔记--css(HTML元素5)--表格Table 一.总结 1.基本样式:am-table:直接模块名  <table class="am-table"& ...

  4. Css制作table细线表格

    制作细线表格,我想应该是最基本的css知识了,记录下来巩固下. 推荐: table{ border-collapse:collapse; border: 1px solid #000000; } td ...

  5. 初探css -11 Table表格

    CSS 表格 使用 CSS 可以使 HTML 表格更美观. Company Contact Country Alfreds Futterkiste Maria Anders Germany Bergl ...

  6. css列表list、表格table

    列表list,无序列表ul,有序列表ol 1.列表项样式list-style-type 无列表默认为dist实心圆,有序列表默认为decimal阿拉伯数字(前面不带0) 其他无序列表常用none无样式 ...

  7. 前端03 /css简绍/css选择器

    前端03 /css简绍/css选择器 目录 前端03 /css简绍/css选择器 昨日内容回顾 html标签 常用标签 table标签:表格标签 input标签 select下拉框 textarea多 ...

  8. 0005 表格table

    第01阶段.前端基础.表格 表格 table 目标: 理解: 能说出表格用来做什么的 表格的基本结构组成 应用: 能够熟练写出n行n列的表格 能简单的合并单元格 ​ 表格作用: 存在即是合理的. 表格 ...

  9. 2020年12月-第01阶段-前端基础-表格 table

    表格 table(会使用) 为了让我们页面显示的更加整齐,我们需要学习三个表(表格.表单.列表) 理解: 能说出表格用来做什么的 表格的基本结构组成 表格作用: 存在即是合理的. 表格的现在还是较为常 ...

  10. 第 18 章 CSS 表格与列表

    学习要点: 1.表格样式 2.列表样式 3.其他功能 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 表格和列表,通过表格和列表的样式设置,让表格和列表显示更加多元化. 一．表格样式 表格有五 ...

随机推荐

  1. 使用Java注解来简化你的代码

         注解(Annotation)就是一种标签,可以插入到源代码中,我们的编译器可以对他们进行逻辑判断,或者我们可以自己写一个工具方法来读取我们源代码中的注解信息,从而实现某种操作.需要申明一点, ...

  2. 记录参加QCon的心得

    如有侵权,请告知作者删除.scottzg@126.com 很荣幸参加QCon全球软件开发大会,这里特别感谢我们部门的总经理,也是<互联网广告算法和系统实践>此书的作者王勇睿.因为他我才有这 ...

  3. dispatch_group_t 日常使用注意事项

    一.背景简介平时在进行多线程处理任务时,有时候希望多个任务之间存在着一种联系,希望在所有的任务执行完后做一些总结性处理.那么就可以将多个任务放在一个任务组中进行统一管理.dispatch提供了相应的A ...

  4. html常用的知识点以及混合框架

    html中:   <hr/> 在页面中创建水平线 例如:   <p> p标签是定义段落   > alt 作为可预备可替换信息,在无法加载图片时显示文字信息   定义htm ...

  5. PPT要你好看---读书笔记

    PPT要你好看.主要是设计的思维. 下图,对于现阶段的我来说,收获最大的是毕业答辩PPT的制作. 以及整体的PPT制作思路.

  6. OpenMP 入门教程

    前两天(其实是几个月以前了)看到了代码中有 #pragma omp parallel for 一段,感觉好像是 OpenMP,以前看到并行化的东西都是直接躲开,既然躲不开了,不妨研究一下: OpenM ...

  7. OC点语法介绍和使用以及@property关键字

    使用"点语法" Person *p =[Person new]; //点语法 //对象.属性名 //注意,此时 (p.age)并不是直接方法实例对象 //而是xcode可能到点语法 ...

  8. Hadoop技术在商业智能BI中的应用

    Hadoop是个很流行的分布式计算解决方案,是Apache的一个开源项目名称,核心部分包括HDFS及MapReduce.其中,HDFS是分布式文件系统,MapReduce是分布式计算引擎.时至今日,H ...

  9. Linux下memcache的安装和启动测试

    memcache是一套分布式的高速缓存系统,MemCache的工作流程如下:先检查客户端的请求数据是否在memcached中,如有,直接把请求数据返回,不再对数据库进行任何操作:如果请求的数据不在me ...

  10. IDEA下使用maven构建web项目（SpringMVC+Mybatis整合）

    需求背景:由于最近总是接到一些需求,需要配合前端团队快速建设移动端UI应用或web应用及后台业务逻辑支撑的需求,若每次都复用之前复杂业务应用的项目代码,总会携带很多暂时不会用到的功能或组件,这样的初始 ...