css案例学习之用thead、tbody、tfoot实现漂亮的table布局-阿里云开发者社区

开发者社区> 桃子红了呐> 正文

css案例学习之用thead、tbody、tfoot实现漂亮的table布局

简介:
+关注继续查看

首先说说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: #565;
    font: 12px arial;
}

table caption {
    font-size: 24px;
    border-bottom: 2px solid #B3DE94;
    border-top: 2px solid #B3DE94;
}

table, td, th {
    margin: 0;
    padding: 0;
    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: 0 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>1213456</td>

                    <td>Germany</td>
                    <td>$3.12</td>
                    <td>Download</td>
                </tr>
                <tr class="odd">
                    <th >Chance</th>
                    <td>1213457</td>

                    <td>Germany</td>
                    <td>$123.34</td>
                    <td>Download</td>
                </tr>
                <tr >
                    <th >John</th>
                    <td>1213458</td>

                    <td>Germany</td>
                    <td>$34.37</td>
                    <td>Download</td>
                </tr>
                <tr class="odd">
                    <th >oKathleen</th>
                    <td>1213459</td>
                    <td>Germany</td>
                    <td>$23.67</td>
                    <td>Download</td>
                </tr>
                </tbody>
            <tfoot>
                <tr>
                    <th >Total</th>
                    <td colspan="4">4 books</td>
                </tr>
            </tfoot>
</table>
</body>

</html>
复制代码

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【短语学习】狮子那一份the lions share
作者:gnuhpc 出处:http://www.cnblogs.com/gnuhpc/ 战国末年,政治家苏秦曾经指出秦国是不会甘心七分天下的:“夫秦,虎狼之国也,有吞天下之心。”对中国人来说,虎狼总是要独吞一切的;英国人呢?他们会说比虎狼更厉害的狮子:the lion's share. The lion's share直译是“狮子那一份”。
555 0
JAVA多线程高并发学习笔记(三)——Callable、Future和FutureTask
为什么要是用Callable和Future Runnable的局限性 Executor采用Runnable作为基本的表达形式,虽然Runnable的run方法能够写入日志,写入文件,写入数据库等操作,但是它不能返回一个值,或者抛出一个受检查的异常,有些需要返回值的需求就不能满足了。
1342 0
【短语学习】out of the box的含义和翻译
作者:gnuhpc 出处:http://www.cnblogs.com/gnuhpc/ out of the box: 1)“Out of box”用于描述某种不确定的事件。常常作为副词来形容某种观点的不确定性。
607 0
《Servlet和JSP学习指南》一导读
自从Servlet面世以来,也开发出了许多基于Java的Web框架,以帮助程序员更迅速地编写Web应用程序。
1137 0
The Road to learn React书籍学习笔记(第四章)
高级React组件 本章将重点介绍高级 React 组件的实现。我们将了解什么是高阶组件以及如何实现它们。此外,我们还将深入探讨 React 中更高级的主题,并用它实现复杂的交互功能。 引用 DOM 元素 有时候我们需要在 React 与 DOM 节点进行交互。
903 0
应用统计学与R语言实现学习笔记(十四)——案例与实践
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/ESA_DSQ/article/details/78177826 Chapter 14 Case and Practice 本篇是第十四章,内容是案例与实践。
1158 0
The Road to learn React书籍学习笔记(第一章)
react灵活的生态圈 Small Application Boilerplate: create-react-app Utility: JavaScript ES6 and beyond Styling: plain CSS and inline style Asynchronous Re...
1023 0
teachable-machine:探索机器学习如何工作,浏览器中实时浏览
教学机器是一个实验,让所有人都非常方便的探索机器学习,在浏览器中实时浏览,不需要编程。学习更多实验,然后亲自尝试它 访问:https://teachablemachine.
812 0
4269
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载