css表格

今天写某个平台的前端数据展示主要使用表格展示正好复习总结一下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表格的更多相关文章

第 18 章 CSS 表格与列表
学习要点: 1.表格样式 2.列表样式 3.其他功能主讲教师:李炎恢本章主要探讨 HTML5 中 CSS 表格和列表,通过表格和列表的样式设置,让表格和列表显示更加多元化. 一．表格样式表格有五 ...
HTML 学习笔记 CSS(表格)
CSS 表格属性可以帮助您极大的改善表格的外观表格边框如需在CSS中设置表格的边框请使用border属性. 在下面的例子中table th 以及td设置了蓝色边框. table, th, td ...
Bootstrap css栅格 + 网页中插入代码+css表格
设计达人 http://www.shejidaren.com/30-minimal-app-icons.html CSS栅格: <!DOCTYPE html> <html lang= ...
第七十五节，CSS表格与列表
CSS表格与列表学习要点: 1.表格样式 2.列表样式 3.其他功能一．表格样式表格有五种独有样式,样式表如下: 属性值 ...
CSS 表格实例
CSS 表格实例CSS 表格属性可以帮助您极大地改善表格的外观.CSS Table 属性属性描述border-collapse 设置是否把表格边框合并为单一的边框.border-spacing 设置 ...
CSS表格(未完成)
CSS 表格使用 CSS 可以使 HTML 表格更美观. 表格边框指定CSS表格边框,使用border属性. 下面的例子指定了一个表格的Th和TD元素的黑色边框:
CSS：CSS 表格
ylbtech-CSS:CSS 表格 1.返回顶部 1. CSS 表格使用 CSS 可以使 HTML 表格更美观. Company Contact Country Alfreds Futterkis ...
css 表格
1.给元素的display属性添加为以下值 table : <table> table-caption :<caption> table-cell : <td> t ...
3月23.CSS表格布局
360表格布局: CSS定义标签: @charset "utf-8";/* CSS Document */.bt1{ border:#309 solid 1px; height:1 ...
HTML学习笔记 CSS表格及轮廓案例第八节（原创）参考使用表
#tb, tb1, tr, th, td { border: 5px solid blue; /*加边框*/ padding: 5px; /*内边距*/ } #tb1 { border-collaps ...

随机推荐

CocoaPods管理的项目移植到别人电脑后找不到头文件
CocoaPods管理的项目移植到别人电脑后找不到头文件在TARGETS -> Search Paths -> User Header Search Paths 中写入 ${SRCRO ...
C++基础--结构体声名
struct是一种数据结构,当需要存储的相关数据为一个集合时,struct是很好的选择;例如,当存储student,学生的学号, 名字,年龄,身高,就构成了一个集合,用stuct声名为: typede ...
OOM android
1.[原创]Android 系统稳定性 - OOM(一) 2.[原创]Android 系统稳定性 - OOM(二) 3.Android内存泄露分析(MemoryAnalyzer工具)
关联关系的CRUD
关联关系中的CRUD_Cascade_Fetch 1. hibernate_1700_one2many_many2one_bi_crud 2. 设定 cascade 可以设定在持久化时对于关联对象的操 ...
SQL Server ->> CLR编程问题汇总
1) CLR不支持C#类方法重载(Method Overload) 今天打算写个枚举目录的C# CLR存储过程,结果发现原来CLR不支持方法重载. Msg 6572, Level 16, State ...
spring配置连接池和dao使用jdbcTemplate
1 spring配置c3p0连接池第一步导入jar包第二步创建spring配置文件,配置连接池 (1)把代码中的实现在配置文件中实现 2 dao使用jdbcTemplate (1) 创建ser ...
RAC修改spfile位置
RAC修改spfile位置 [root@rac1 ~]# su - oracle [oracle@rac1 ~]$ sqlplus / as sysdba SQL*Plus: Releas ...
模线性方程&&中国剩余定理及拓展
一.求解模线性方程由ax=b(mod n) 可知ax = ny + b 就相当于ax + ny = b 由扩展欧几里得算法可知有解条件为gcd(a, n)整除d 可以直接套用扩展欧几里得算法最终由 ...
CF666E 【Forensic Examination】
题目每天一道$SAM$真是非常开心一看就是广义$SAM$+线段树合并了我们存好$S$串每一个前缀的终点,之后在$parent$树上倍增找到表示$S[l,r]$这个子串的节点, ...
MYSQL5.7.15安装步骤
下载完成之后双击安装: 接下来一路next (出现的问题) 在我第一次安装myslq过程中,上图中的mysql server failed ,这是因为电脑环境需要升级一个插件,Visual C++ 2 ...

css表格

css表格的更多相关文章

随机推荐

热门专题