首先说说thead、tbody、tfoot

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

效果

代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Book List</title>

<style type="text/css">

table {

    background-color: #FFF;

    border: none;

    color: #;

    font: 12px arial;

}

table caption {

    font-size: 24px;

    border-bottom: 2px solid #B3DE94;

    border-top: 2px solid #B3DE94;

}

table, td, th {

    margin: ;

    padding: ;

    vertical-align: middle;

    text-align:left;

}

tbody td, tbody th {

    background-color: #DFC;

    border-bottom: 2px solid #B3DE94;

    border-top: 3px solid #FFFFFF;

    padding: 9px;

}

tfoot td, tfoot th {

    font-weight: bold;

    padding: 4px 8px 6px 9px;

    text-align:center;

}

thead th {

    font-size: 14px;

    font-weight: bold;

    line-height: 19px;

    padding:  8px 2px;

    text-align:center;

}

tbody tr.odd th,tbody tr.odd td { /*odd就是偶数行*/

    background-color: #CEA;

    border-bottom: 2px solid #67BD2A;

}

td+td+td, /*第三个td以及之后的td元素*/

col.price{ /*类样式*/

    text-align:right;

}

tbody tr:hover td, tbody tr:hover th { /*tr也有hover样式*/

    background-color: #8b7;

    color:#fff;

}

</style>

</head>

<body>

        <table summary="book list">

            <caption>Book List</caption> <!-- caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。 -->

            <col></col><col></col><col></col><col class="price" align="right"></col><col></col>

            <thead>

                <tr>

                    <th >Title</th>

                    <th >ID</th>

                    <th >Country</th>

                    <th >Price</th>

                    <th >Download</th>

                </tr>

            </thead>

            <tbody>

                <tr >

                    <th >Tom</th>

                    <td></td>

                    <td>Germany</td>

                    <td>$3.12</td>

                    <td>Download</td>

                </tr>

                <tr class="odd">

                    <th >Chance</th>

                    <td></td>

                    <td>Germany</td>

                    <td>$123.34</td>

                    <td>Download</td>

                </tr>

                <tr >

                    <th >John</th>

                    <td></td>

                    <td>Germany</td>

                    <td>$34.37</td>

                    <td>Download</td>

                </tr>

                <tr class="odd">

                    <th >oKathleen</th>

                    <td></td>

                    <td>Germany</td>

                    <td>$23.67</td>

                    <td>Download</td>

                </tr>

                </tbody>

            <tfoot>

                <tr>

                    <th >Total</th>

                    <td colspan=""> books</td>

                </tr>

            </tfoot>

</table>

</body>

</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. Doxygen安装使用

    Doxygen是一个 C++.C.Java.Objective-C.Python.IDL(CORBA和Microsoft flavors).Fortran.VHDL.PHP.C#和D语言的文檔生成器. ...

  2. C++ builder 生成以管理员身份运行的exe

    转自:http://bbs.csdn.net/topics/310225109#post-312177603 ,稍微做了一点修改 创建一个文本文件,命名为123.manifest,内容如下: < ...

  3. ZOJ3829---模拟，贪心

    这是2014年ACM亚洲区预赛牡丹江现场赛的一道题,铜牌题,可惜当时一路WA到死... 只有乘法的后缀表达式的特点有两个:(1)数字的数量一定大于‘*’的数量(2)最后一位一定是‘*’: 数字比*多的 ...

  4. 《Algorithms 4th Edition》读书笔记——2.4 优先队列(priority queue)-Ⅵ

    · 学后心得体会与部分习题实现 心得体会: 曾经只是了解了优先队列的基本性质,并会调用C++ STL库中的priority_queue以及 java.util.PriorityQueue<E&g ...

  5. sql求和涉及到null值

    SQL ISNULL().NVL().IFNULL() 和 COALESCE() 函数 请看下面的 "Products" 表: P_Id ProductName UnitPrice ...

  6. IOS 设备信息读取

    let infoDictionary = NSBundle.mainBundle().infoDictionary let appDisplayName: AnyObject? = infoDicti ...

  7. iOS多线程及其感悟

    感觉每天都是匆匆忙忙的,每天似乎都是时间不够用一样,可是等真的想要动手敲代码的时候才发现,原来还有好多好多的知识点不是太熟练,所以,人不可以一直感觉自我良好, 有时间就是那种自我感觉良好的心态毁了自己 ...

  8. Android Path

    外置SDCard(TF卡) 1. SDCard的挂载路径(根据系统不同的ROM挂载的路径不同,以下列举几个是从旧系统到新系统的表现形式) /sdcard/external_sd /mnt/extSdC ...

  9. nodejs报错 events.js:72 throw er; // Unhandled 'error' event

    var http = require('http'); var handlerRequest = function(req,res){ res.end('hello');}; var webServe ...

  10. HTML5-常见的事件- contextmenu 事件

    主要控制应该何时显示上下文菜单,以便开发人员取消默认的上下文菜单而提供自定义的菜单 <1> 由于该事件是冒泡的,因此可以为document 指定一个事件处理程序,用以处理页面中发生的所有此 ...