今天写某个平台的前端数据展示 主要使用表格展示 正好复习总结一下css的表格

首先说说thead、tbody、tfoot

<thead></thead>

<tbody></tbody>

<tfoot> </tfoot>

无论前后顺序如何改变， <thead> 内的元素总是在表的最上面， <tfoot> 总在表的最下面

可能会有人分不清 tr th td

tr: table row => 表格中的一行

th: table head => 表格头部

td: table data => 表数据

然后在看例子就很容易理解啦

表结构

<table>

   <caption>Book List</caption>

  //caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

  <thead>

    <tr>

      <th></th>   //table head 定义表格内的表头单元格。此th元素内部的文本通常会呈现为粗体

      <th></th>

      <th></th>

      <th></th>

    </tr>

  </thead>

  <tbody>

    <tr>

    	<td><td>   //table data cell

    	<td><td>

    	<td><td>

    	<td><td>

    </tr>

  </tbody>

  <tfoot>

    <tr>

      <td></td>

      <td></td>

      <td></td>

      <td></td>

    </tr>

  </tfoot>

<table>

dome帮助理解

<!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>table</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;

        }

        tbody tr:hover td,

        tbody tr:hover th {

            /*tr也有hover样式*/

            background-color: #8b7;

            color: #fff;

        }

    </style>

</head>

<body>

    <table summary="book list">

        <caption>table</caption>

        <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 class="odd">

                <td>tfoot</td>

                <td>tfoot</td>

                <td>tfoot</td>

                <td>tfoot</td>

                <td>tfoot</td>

            </tr>

        </tfoot>

    </table>

</body>

</html>

</body>

</html>

css表格的更多相关文章

  1. 第 18 章 CSS 表格与列表

    学习要点: 1.表格样式 2.列表样式 3.其他功能 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 表格和列表,通过表格和列表的样式设置,让表格和列表显示更加多元化. 一．表格样式 表格有五 ...

  2. HTML 学习笔记 CSS(表格)

    CSS 表格属性可以帮助您极大的改善表格的外观 表格边框 如需在CSS中设置表格的边框 请使用border属性. 在下面的例子中table th 以及td设置了蓝色边框. table, th, td ...

  3. Bootstrap css栅格 + 网页中插入代码+css表格

    设计达人 http://www.shejidaren.com/30-minimal-app-icons.html CSS栅格: <!DOCTYPE html> <html lang= ...

  4. 第七十五节，CSS表格与列表

    CSS表格与列表 学习要点: 1.表格样式 2.列表样式 3.其他功能 一．表格样式 表格有五种独有样式,样式表如下:             属性               值           ...

  5. CSS 表格实例

    CSS 表格实例CSS 表格属性可以帮助您极大地改善表格的外观.CSS Table 属性属性 描述border-collapse 设置是否把表格边框合并为单一的边框.border-spacing 设置 ...

  6. CSS表格(未完成)

    CSS 表格 使用 CSS 可以使 HTML 表格更美观. 表格边框 指定CSS表格边框,使用border属性. 下面的例子指定了一个表格的Th和TD元素的黑色边框:

  7. CSS：CSS 表格

    ylbtech-CSS:CSS 表格 1.返回顶部 1. CSS 表格 使用 CSS 可以使 HTML 表格更美观. Company Contact Country Alfreds Futterkis ...

  8. css 表格

    1.给元素的display属性添加为以下值 table : <table> table-caption :<caption> table-cell : <td> t ...

  9. 3月23.CSS表格布局

    360表格布局: CSS定义标签: @charset "utf-8";/* CSS Document */.bt1{ border:#309 solid 1px; height:1 ...

  10. HTML学习笔记 CSS表格及轮廓案例 第八节 （原创）参考使用表

    #tb, tb1, tr, th, td { border: 5px solid blue; /*加边框*/ padding: 5px; /*内边距*/ } #tb1 { border-collaps ...

随机推荐

  1. MongoDB（online） 优化

    MongoDB(online) 优化 1. find.findOne 2. 操作 vip_emp_relation 的一个公共方法 3. 查询记录数 4. save.insert 5. 总结 1. f ...

  2. linux 服务注册 service文件 在service文件中设置变量和环境变量

    [Unit] Description=  #服务描述 After=syslog.target     #服务启动依赖 [Service] Type=forking          #服务启动类型 可 ...

  3. user purchase behavior:

    user purchase behavior: 参考网址: online shopping frequent https://www.bigcommerce.com/blog/ecommerce-tr ...

  4. dwr2.0版本的demo

        谈起DWR,这个东西在上学的时候接触过,但工作之后就再也没有用过.       对DWR的印象是不手写AJAX,使用JavaScript调用java后台的代码,就如同调用前台代码一样.     ...

  5. Azure 8月众多新版本公布

    Azure 8月新发布:IoT 中心S3 版,Azure 热/冷存储层,DocumentDB,SQL Server Stretch Database, MySQL 5.7, Cloud Foundry ...

  6. SSM整合的简单实现

    整合需要的jar包和源码将在文末给出 本文参考黑马程序员视频,由于视频用的环境和我使用的环境不同,建议使用我的环境及jar包(比较新) 一 整合思路 第一步 整合dao层 mybatis和spring ...

  7. Oracle日志组添加冗余文件和日志组

    rac中需要指定thread添加日志组RAC:alter database add logfile thread 1 group 1('+DATA/irac/redo01_1.log','+DATA/ ...

  8. ZT 头文件包含其实是一想很烦琐的工作 第一个原则应该是，如果可以不包含头文件

    当出现访问类的函数或者需要确定类大小的时候,才需要用头文件(使用其类定义)    http://blog.csdn.net/clever101/article/details/4751717 看到这个 ...

  9. 【转载】#457 Converting Between enums and their Underlying Type

    When you declare an enum, by default each enumerated value is represented internally with an int. (S ...

  10. C语言 条件编译（if ）

    #include <stdio.h> #define NUM -1 int main(int argc, const char * argv[]) { #if NUM > 0 pri ...