首先说说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. poj3349(哈希+链地址法)

    给出N个六边形的6个边长,问其中是否有完全相同的两个六边形,完全相同包括边的长度和位置都要相同.边给出的顺序是逆时针或者顺时针的. 给每个6边形一个哈希值,方法是对6条边长度的平方和取模 #inclu ...

  2. vs2008工程配置

    一.添加H文件目录 依次点击“项目——配置属性——C/C++——常规”, 在“附加包含目录”中加入H文件所在的文件夹.(即项目所要用到的所有.h文件目录都要加进去)   二.添加LIB目录 1)依次点 ...

  3. 利用ant进行编译和发布项目

    本文通过一个示例来解说如何通过ant进行编译和发布项目.本例按如下目录结构来组织项目. D:/web/antsample项目根目录 D:/web/antsample/src源代码目录 D:/web/a ...

  4. redis的简单使用

    一.简单使用Jedis 需要Jedis就从Maven获取吧! Maven Pom.xml <dependency> <groupId>redis.clients</gro ...

  5. Java里多个Map的性能比較(TreeMap、HashMap、ConcurrentSkipListMap)

    问题 比較Java原生的 1.  TreeMap 2.  HashMap 3.  ConcurrentSkipListMap 3种Map的效率. 结果 模拟150W以内海量数据的插入和查找,通过添加和 ...

  6. Eclipse代理设置

    这段时间公司实行代理上网,不仅通过浏览器上网须要不停的输入username和password,在本地调试程序时候Eclipse居然也弹出框让输入username和password. 如图: 解决的方法 ...

  7. JAVA读、写EXCEL文件

    採用jxl.jar包,网上下载,百度一下到出都是.希望能够帮助到大家. 接下来直接贴代码: <span style="font-size:18px;"> public ...

  8. LDA-线性判别分析（四）

    本来是要调研 Latent Dirichlet Allocation 的那个 LDA 的, 没想到查到很多关于 Linear Discriminant Analysis 这个 LDA 的资料.初步看了 ...

  9. Filter简单介绍

    一.简单介绍 Filter也称为过滤器,WEB开发者通过Filter技术.对webserver管理的全部web资源:比如Jsp, Servlet, 静态图片文件或静态 html 文件等进行拦截.从而实 ...

  10. STL中map,set的基本用法示例

    本文主要是使用了STL中德map和set两个容器,使用了它们本身的一些功能函数(包括迭代器),介绍了它们的基本使用方式,是一个使用熟悉的过程. map的基本使用: #include "std ...