今天写某个平台的前端数据展示 主要使用表格展示 正好复习总结一下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. css3制作有动画效果的面板

    .show-panel .slide-panels{ right: 0px; } .slide-panels{ z-index: 101; background: #fff; position: fi ...

  2. AE多用户同时编辑同一个版本数据的解决方法

    项目中做了入库的功能,测试一切正常,但是实际使用多个用户同时编辑default版本的时候,问题就来了,StopEditing 错误信息如下 FDO_E_VERSION_REDEFINED -21472 ...

  3. Javascript 自定义输出

    缘由 前段时间再看了一些javascript的学习资料,也写的一些demo,在输出的时候一般都用alert,但这个方法会打断函数运行,用起来不是很好.还有就是console.log这个方法,这种方法原 ...

  4. microkernel architecture - Proxy

    The microkernel architecture pattern allows you to add additional application features as plug-ins t ...

  5. Android 笔记之 Android 系统架构

    Android笔记之Android系统架构 h2{ color: #4abcde; } a{ color: blue; text-decoration: none; } a:hover{ color: ...

  6. CompletionService的poll方法

    1.poll():马上返回完成的任务,若没有,则返回null 2.poll(long timeout, TimeUnit unit): 等待timeout时间,如果大于最短任务完成时间,则获取任务结果 ...

  7. C# winform 跨线程修改界面

    我们可以使用invoke和bengininvoke invoke同步执行一个委托 begininvoke异步执行一个委托

  8. check_mk的性能案例

    http://wiki.lustre.org/Check_MK/Graphite/Graphios_Setup_Guide Dell PowerEdge R515 2x 8-Core AMD Opte ...

  9. WAKE-WIN10-SOFT-python配置

    1,anaconda下载,安装 1,1 官网:https://www.continuum.io/downloads 下载:https://repo.continuum.io/archive/ win1 ...

  10. 用AutoHotkey一键完成Xmind里的几个功能

    F5一键添加超链接(类型为主题),常规步骤:Ctrl_h打开窗口,点击[主题],激活光标到输入框. Ctrl-i一键添加截取的图片,常规步骤是:打开画图→粘贴→保存图片为文件→Xmind里Ctrl-i ...