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>
复制代码

相关文章
|
8天前
|
前端开发
css 十字分割线(含四等分布局)
css 十字分割线(含四等分布局)
14 2
|
7天前
|
移动开发 前端开发 HTML5
CSS 【实战】 “四合院”布局
CSS 【实战】 “四合院”布局
10 0
CSS 【实战】 “四合院”布局
|
10天前
|
前端开发
css的flex布局中使用margin:auto智能分配剩余空间
css的flex布局中使用margin:auto智能分配剩余空间
13 1
|
4天前
|
编解码 前端开发 C++
CSS【详解】布局 display ( 含 flex 布局,grid 布局,table 布局,float 布局,响应式布局 等)
CSS【详解】布局 display ( 含 flex 布局,grid 布局,table 布局,float 布局,响应式布局 等)
10 0
|
8天前
|
前端开发
CSS 自测题 -- 用 flex 布局绘制骰子(一、二、三【含斜三点】、四、五、六点)
CSS 自测题 -- 用 flex 布局绘制骰子(一、二、三【含斜三点】、四、五、六点)
5 0
|
8天前
|
前端开发 C++ 容器
css【详解】—— 圣杯布局 vs 双飞翼布局 (含手写清除浮动 clearfix)
css【详解】—— 圣杯布局 vs 双飞翼布局 (含手写清除浮动 clearfix)
9 0
|
10天前
|
前端开发
前端 CSS 经典:flex + margin 布局
前端 CSS 经典:flex + margin 布局
12 0
|
4天前
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
46 0
|
9天前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
16天前
|
安全 JavaScript
旋转木马轮播图 html+css+js
旋转木马轮播图 html+css+js