首先说说thead、tbody、tfoot

  1. <thead> <tbody> <tfoot> 无论前后顺序如何改变， <thead> 内的元素总是在表的最上面， <tfoot> 总在表的最下面

效果

代码如下

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>Book List</title>
  7. <style type="text/css">
  8. table {
  9.     background-color: #FFF;
  10.     border: none;
  11.     color: #;
  12.     font: 12px arial;
  13. }
  14.  
  15. table caption {
  16.     font-size: 24px;
  17.     border-bottom: 2px solid #B3DE94;
  18.     border-top: 2px solid #B3DE94;
  19. }
  20.  
  21. table, td, th {
  22.     margin: ;
  23.     padding: ;
  24.     vertical-align: middle;
  25.     text-align:left;
  26. }
  27.  
  28. tbody td, tbody th {
  29.     background-color: #DFC;
  30.     border-bottom: 2px solid #B3DE94;
  31.     border-top: 3px solid #FFFFFF;
  32.     padding: 9px;
  33. }
  34.  
  35. tfoot td, tfoot th {
  36.     font-weight: bold;
  37.     padding: 4px 8px 6px 9px;
  38.     text-align:center;
  39. }
  40.  
  41. thead th {
  42.     font-size: 14px;
  43.     font-weight: bold;
  44.     line-height: 19px;
  45.     padding:  8px 2px;
  46.     text-align:center;
  47. }
  48.  
  49. tbody tr.odd th,tbody tr.odd td { /*odd就是偶数行*/
  50.     background-color: #CEA;
  51.     border-bottom: 2px solid #67BD2A;
  52. }
  53.  
  54. td+td+td, /*第三个td以及之后的td元素*/
  55. col.price{ /*类样式*/
  56.     text-align:right;
  57. }
  58.  
  59. tbody tr:hover td, tbody tr:hover th { /*tr也有hover样式*/
  60.     background-color: #8b7;
  61.     color:#fff;
  62. }
  63.  
  64. </style>
  65. </head>
  66.  
  67. <body>
  68.         <table summary="book list">
  69.             <caption>Book List</caption> <!-- caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。 -->
  70.             <col></col><col></col><col></col><col class="price" align="right"></col><col></col>
  71.             <thead>
  72.                 <tr>
  73.                     <th >Title</th>
  74.                     <th >ID</th>
  75.  
  76.                     <th >Country</th>
  77.                     <th >Price</th>
  78.                     <th >Download</th>
  79.                 </tr>
  80.             </thead>
  81.             <tbody>
  82.                 <tr >
  83.                     <th >Tom</th>
  84.                     <td></td>
  85.  
  86.                     <td>Germany</td>
  87.                     <td>$3.12</td>
  88.                     <td>Download</td>
  89.                 </tr>
  90.                 <tr class="odd">
  91.                     <th >Chance</th>
  92.                     <td></td>
  93.  
  94.                     <td>Germany</td>
  95.                     <td>$123.34</td>
  96.                     <td>Download</td>
  97.                 </tr>
  98.                 <tr >
  99.                     <th >John</th>
  100.                     <td></td>
  101.  
  102.                     <td>Germany</td>
  103.                     <td>$34.37</td>
  104.                     <td>Download</td>
  105.                 </tr>
  106.                 <tr class="odd">
  107.                     <th >oKathleen</th>
  108.                     <td></td>
  109.                     <td>Germany</td>
  110.                     <td>$23.67</td>
  111.                     <td>Download</td>
  112.                 </tr>
  113.                 </tbody>
  114.             <tfoot>
  115.                 <tr>
  116.                     <th >Total</th>
  117.                     <td colspan=""> books</td>
  118.                 </tr>
  119.             </tfoot>
  120. </table>
  121. </body>
  122.  
  123. </html>

css案例学习之用thead、tbody、tfoot实现漂亮的table布局的更多相关文章

  1. table的thead,tbody,tfoot

    为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用tbody可以优化显示. 如果表格很长,用tbody分段,可以一部分一部分地显示 ...

  2. HTML表格,table,thead,tbody,tfoot,th,tr,td,的属性以及跨行，跨列

    在HTML中表格是作为一个整体来解析的,解析完才会在页面显示,如果表格很复杂很长,加载时间很长,用户体验就不好.所以这里就要用到表格结构标签,解析一部分就显示一部分,不用等表格全部加载完再显示. 表格 ...

  3. html-3,table 表格标签 tr th td caption thead tbody tfoot 的简单使用

    <!-- table border='1' style="border-collapse:collapse;" border 表格的像素宽度 border-collapse: ...

  4. HTML 表格<table><caption><th><tr><td><thead><tbody><tfoot><col><colgroup>

    <table>标签: 定义和用法: <table>标签定义HTML表格. 简单的HTML表格由table元素以及一个或多个tr.th或td元素组成. tr元素定义表格行,th元 ...

  5. thead tbody tfoot

    <!DOCTYPE html> <html lang="en"> <head> <title>Title</title> ...

  6. css案例学习之table tr th td ul li实现日历

    效果 代码 <html> <head> <title>Calendar</title> <style> <!-- .month { b ...

  7. css案例学习之盒子模型

    定义:每个盒子都有:边界.边框.填充.内容四个属性: 每个属性都包括四个部分:上.右.下.左:这四部分可同时设置,也可分别设置:里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子 ...

  8. css案例学习之继承关系

    代码 <html> <head> <title>继承关系</title> <style> body{ color:blue; /* 颜色 * ...

  9. CSS 案例学习

    1.样式 display:inline-block;可改变a标签,合其可定义宽高 2.a:hover表示鼠标经过 3.background:url(110.png) bottom 表示:给链接一个图片 ...

随机推荐

  1. Grok 正则捕获

    Grok 正则捕获: \s+(?<request_time>\d+(?:\.\d+)?)\s+ 回顾下: (?:pattern) 匹 配 pattern 但不获取匹配结果,也就是说这是一个 ...

  2. wikioi1369 xth 砍树

    题目描述 Description 在一个凉爽的夏夜,xth 和 rabbit 来到花园里砍树.为啥米要砍树呢?是这样滴, 小菜儿的儿子窄森要出生了.Xth这个做伯伯的自然要做点什么.于是他决定带着 r ...

  3. 【剑指offer】面试题35：第一个只出现一次的字符

    题目: 在一个字符串(1<=字符串长度<=10000,全部由字母组成)中找到第一个只出现一次的字符的位置.若为空串,返回-1.(书上是要求返回字符) 思路: 第一遍扫描保存下每个字符出现的 ...

  4. .NET 面试题（1）

    1.简述 private. protected. public. internal 修饰符的访问权限. private:私有成员,在类的内部才能访问 protected:保护成员,在该类内部和继承本类 ...

  5. 利用PHPExcel转Excel柱形图

    这在附还有一个转柱形图的效果及代码. 原PHP报表效果: 转成Excel后的效果: 附上代码: <? php /** * PHPExcel * * Copyright (C) 2006 - 20 ...

  6. [Python学习笔记][第八章Python异常处理结构与程序调试]

    1/30 第八章Python异常处理结构与程序调试 异常处理 try-except结构 try: try块 except Exception: except块 try-except-else结构 tr ...

  7. 关于select元素的一些基本知识

    为select元素绑定值的几个方法: 一.通过字符串拼接,让后追加到select元素下, 二.通过DOM创建option元素,为其绑上value值和文本: function loadProvinve( ...

  8. hbase学习笔记-----REST客户端

    1. 启动REST服务 a.启动一个非守护进程模式的REST服务器(ctrl+c 终止) bin/hbase rest start b.启动守护进程模式的REST服务器 bin/hbase-daemo ...

  9. Android PackageManager基础知识

    一.PackageManagerService启动过程 SystemServer首先启动,创建一个ServerThread线程来启动所有Android核心服务,其中PackageManagerServ ...

  10. 文摘：威胁建模(STRIDE方法)

    文摘,原文地址:https://msdn.microsoft.com/zh-cn/magazine/cc163519.aspx 威胁建模的本质:尽管通常我们无法证明给定的设计是安全的,但我们可以从自己 ...