首先说说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. 13.1.17 CREATE TABLE Syntax

    13.1.17 CREATE TABLE Syntax 13.1.17.1 CREATE TABLE ... LIKE Syntax 13.1.17.2 CREATE TABLE ... SELECT ...

  2. Divide Two Integers 解答

    Question Divide two integers without using multiplication, division and mod operator. If it is overf ...

  3. Hdu3640-I, zombie(模拟+二分)

    The "endless" model in "I, zombie" of "Plants vs. Zombies" is my favou ...

  4. 从运维角度浅谈 MySQL 数据库优化

    一个成熟的数据库架构并不是一开始设计就具备高可用.高伸缩等特性的,它是随着用户量的增加,基础架构才逐渐完善.这篇博文主要谈MySQL数据库发展周期中所面临的问题及优化方案,暂且抛开前端应用不说,大致分 ...

  5. Yii2 分页类的扩展和listview引用

    Yii2 本身提供了不错分页选项供用户设置,但是实际项目中我们往往需要复杂一些的分页样式,例如下图所示的效果,上下翻页可用和不可用均用图标来替换.

  6. hdu 3232 Crossing Rivers（期望 + 数学推导 + 分类讨论，水题不水）

    Problem Description   You live in a village but work in another village. You decided to follow the s ...

  7. WPF ICommand 用法

    基础类,继承与ICommand接口 using System; using System.Collections.Generic; using System.Linq; using System.Te ...

  8. WPF最基本的4个引用

    Windowsbase Windows基本类库 PresentationCore wpf核心类库 PresentationFramework wpf框架 System.Axml 系统类库

  9. classloader.getresources() 介绍

    ◆普通情况下,我们都使用相对路径来获取资源,这种灵活性比較大. 比方当前类为com/bbebfe/Test.class 而图像资源比方sample.gif应该放置在com/bbebfe/sample. ...

  10. git错误：fatal: Not a git repository (or any of the parent directories): .git

    git错误:fatal: Not a git repository (or any of the parent directories): .git 我用git add file添加文件时出现这样错误 ...