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 ...

随机推荐

html中通过移除空格的方法来解决浏览器上的留白间距该怎么理解？
今天在切图的时候,碰到一个兼容性的问题,很幸运最后通过张金鑫老师的文章解决了这个问题!但在阅读张老师文章的时候,我有个地方不明白,在网上查了下也没找到我想要的答案,后来自己想了半天好像是这么回事,现在 ...
有关background 背景图片不能显示
首先有两个概念绝对路径,从根目录为起点到你所在的目录: 相对路径,从一个目录为起点到你所在的目录. 例如: ┍ A文件夹 C -| ...
Zygote和System进程的启动过程
##init脚本的启动 +------------+ +-------+ +-----------+ |Linux Kernel+--> |init.rc+-> |app_process| ...
python常用模块（二）
1.ConfigParser模块用于生成和修改配置文档,在python3.x中变更为configparser 1 [DEFAULT] 2 ServerAliveInterval = 45 3 Com ...
JsonResponse、FileResponse和StreamingHttpResponse
一.JsonResponse对象 class JsonResponse(data,encoder=DjangoJSONEncoder,safe=True,json_dumps_params=None, ...
Android仿QQ复制昵称效果
本文同步自http://javaexception.com/archives/76 背景: 这几天做一个复制文本的需求,突然看到QQ上复制昵称跟QQ号的效果,觉得很不错,就想要模仿一波,办法比较简单粗 ...
【luogu P3128 [USACO15DEC]最大流Max Flow】题解
题目链接:https://www.luogu.org/problemnew/show/P3128 菜 #include <cstdio> #include <cstring> ...
c# 后台线程访问前台控件并显示信息
//设置为后台线程 Thread th = new Thread(delegate() { append(); }); th.IsBackground = true; th.Start(); //在a ...
data-ng-click 指令
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
LeetCode12.整数转罗马数字 JavaScript
罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如, 罗马数字 2 写做 II ,即为两个并 ...

css表格

css表格的更多相关文章

随机推荐

热门专题