首先说说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. The Flat Dictionary

    The Flat Dictionary 原来的代码没处理dict为空的情况 1 def flatten(dictionary): 2 #[] is a list 3 #() is a tuple 4 ...

  2. perl 获取阿里云主机信息

    use LWP::UserAgent; use Data::UUID; use Data::GUID; use HTTP::Date qw(time2iso str2time time2iso tim ...

  3. UML--核心元素之业务实体

    如果说参与者和用例描述了我们在这个问题领域中达到什么样的目标,那么业务实体就描述了我们使用什么来达到业务目标以及通过什么来记录这个业务目标. 如果把问题领域比喻成一幢大楼的话,业务实体就是构成这幢大楼 ...

  4. 记忆2--记忆的"记"和"忆"

    有时候也会想,我们是如何记住东西的?是如何想起来的?在写这篇文章的时候,想起初中的时候(应当是初二),语文老师检查唐诗背诵,在下面觉得已经能背起来的时候,去向老师背诵的时候,忘记了开头,干急想不起来, ...

  5. 关于qt学习的一点小记录(2)

    嗯...这次接了个单 要求图形界面,刚好可以巩固并学习下QT.毫不犹豫的就接了 下面记录下出现的问题: 1. QWidget和QDialog QDialog下的槽函数有accept()与reject( ...

  6. 【HDU1233】还是畅通工程（MST基础题）

    无坑,裸题.直接敲就恩那个AC. #include <iostream> #include <cstring> #include <cstdio> #include ...

  7. Angular学习笔记(2)——TODO小应用

    Angular学习笔记(2)--TODO小应用 1. 写在前面 之前我们跑了Angular的Hello World,你是不是对它有点感觉了呢?这一篇将结合一个TODO程序来继续学习Angular的用法 ...

  8. QT绘制系统简介

    #3个类:QPainter,QPainterDevice 和 QPaintEngine 三个类 #qpainter用于执行绘制操作 #QPainterDevice是一个二维空间抽象,允许qpainte ...

  9. c++之 常用类型

    C/C++常用类型的范围 C/C++里常用的类型及表示范围如下表所示: 类型 sizeof 表示范围 说明 char 1 -128 - 127 -2^7 - (2^7 - 1) short 2 -32 ...

  10. java与.net比较学习系列(1) 开发环境和常用调试技巧

    最近因为公司项目要由.net平台转到java平台的原因,之前一直用.net的我不得不开始学习java了,刚开始听到说要转java的时候很抗拒,因为我想专注在.net平台上,不过这样也并不完全是坏事,通 ...