首先说说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. DragonBoard810使用记录

    1. 执行~/workdir/Source_Package$ getSource_and_build.sh后该脚本先下载android仓库.repo到~目录,然后将android源码check out ...

  2. EBS查询用户客户化的文件配置

    select pro.profile_option_name, pro.user_profile_option_name, lev.level_type type, --lev.level_code, ...

  3. Gray Code 解答

    Question The gray code is a binary numeral system where two successive values differ in only one bit ...

  4. QT 4.7支持中文（QT4.7）（中文)（makeqpf）

    QT 4.7支持中文(QT4.7)(中文)(makeqpf) 摘要: QT4.7.0在移植到开发板上的时候,中文支持是必不可少的,如何让QT支持中文,如何制作QT支持的字体文件,如何使QT UI编辑器 ...

  5. 分析linux下的编译环境

    不论是windows下的程序,还是linux下的程序,开发环境都离不开三个目录:include.lib.bin,分别是头文件目录.库文件目录.运行文件目录.或许目录不叫这个名字,但却必不可少,除非你的 ...

  6. Unity 白猫操作小实例

    最近师兄找我说白猫的操作如何做,  0.0 结果白猫没有android的客户端玩不了,看了下视频介绍就简单做了下 效果图:   核心代码: using UnityEngine; using Syste ...

  7. qt model/view 架构自定义模型之QFileSystemModel

    # -*- coding: utf-8 -*- # python:2.x #QFileSystemModel """ Qt  内置了两种模型:QStandardItemM ...

  8. python学习之路-8 面向对象之进阶

    上篇内容回顾和补充 面向对象三大特性 封装 继承 多态 在python中没有多态的概念 变量的类型允许为多种数据类型称之为多态 # c#/java中的多态 # 伪代码 def func(int arg ...

  9. 多线程下不反复读取SQL Server 表的数据

    在进行一些如发送短信.邮件的业务时,我们常常会使用一个表来存储待发送的数据,由后台多个线程不断的从表中读取待发送的数据进行发送.发送完毕后再将数据转移到历史表中,这样保证待发送表的数据普通情况下不会太 ...

  10. Android开发中用到的框架、库介绍

    Android开发中用到的框架介绍,主要记录一些比较生僻的不常用的框架,不断更新中...... 网路资源:http://www.kuqin.com/shuoit/20140907/341967.htm ...