W3School-CSS 表格实例

最新推荐文章于 2024-05-20 19:08:38 发布
最新推荐文章于 2024-05-20 19:08:38 发布
阅读量178 收藏 1
点赞数
文章标签： 人工智能
原文链接：http://www.cnblogs.com/hoey/p/5094584.html
版权

CSS 表格实例

CSS 实例

  • CSS 背景实例
  • CSS 文本实例
  • CSS 字体(font)实例
  • CSS 边框(border)实例
  • CSS 外边距 (margin) 实例
  • CSS 内边距 (padding) 实例
  • CSS 列表实例
  • CSS 表格实例
  • 轮廓（Outline） 实例
  • CSS 尺寸 (Dimension) 实例
  • CSS 分类 (Classification) 实例
  • CSS 定位 (Positioning) 实例
  • CSS 伪类 (Pseudo-classes)实例
  • CSS 伪元素 (Pseudo-elements)实例
01设置表格的布局
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>01设置表格的布局</title>
        <style type="text/css">
            body {background-color: #FF7070;}
            table.one {
                table-layout: automatic;
            }
            table.two {
                table-layout: fixed;
            }
        </style>
    </head>

    <body>
        <table class="one" border="1" width="100%">
            <tr>
                <td width="20%">1000000000000000000000</td>
                <td width="40%">1000</td>
                <td width="40%">1000</td>
            </tr>
        </table>
        <table class="two" border="1" width="100%">
            <tr>
                <td width="20%">1000000000000000000000</td>
                <td width="40%">1000</td>
                <td width="40%">1000</td>
            </tr>
        </table>
    </body>

</html>

846157-20160102165944729-795634741.png

02显示表格中的空单元
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>02显示表格中的空单元</title>
        <style type="text/css">
            body {
                background-color: #FF7070;
            }
            table {
                border-collapse: separate;
                empty-cells: hide;
            }
        </style>
    </head>

    <body>
        <table border="1">
            <tr>
                <td>我老大</td>
                <td>我老二</td>
            </tr>
            <tr>
                <td>我老三</td>
                <td></td>
            </tr>
        </table>
    </body>

</html>

846157-20160102192458276-1449312141.png

03合并表格边框
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>03合并表格边框</title>
        <style type="text/css">
            table {
                border-collapse: collapse;
            }
            
            table,
            td,
            th {
                border: 1px solid black;
            }
        </style>
    </head>

    <body>
        <table>
            <tr>
                <th>老几</th>
                <th>老几</th>
            </tr>
            <tr>
                <td>我老大</td>
                <td>我老二</td>
            </tr>
            <tr>
                <td>我老三</td>
                <td>我老四</td>
            </tr>
        </table>
    </body>

</html>

846157-20160104103151981-1681246845.png

04设置表格边框之间的空白
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>04设置表格边框之间的空白</title>
        <style type="text/css">
            table.one {
                border-collapse: separate;
                border-spacing: 10px;
            }
            
            table.two {
                border-collapse: separate;
                border-spacing: 10px 50px;
            }
        </style>
    </head>

    <body>
        <table class="one" border="1">
            <tr>
                <td>A1</td>
                <td>A2</td>
            </tr>
            <tr>
                <td>B1</td>
                <td>B2</td>
            </tr>
        </table>
        <table class="two" border="1">
            <tr>
                <td>A1</td>
                <td>A2</td>
            </tr>
            <tr>
                <td>B1</td>
                <td>B2</td>
            </tr>
        </table>
    </body>

</html>

846157-20160104111936028-1204074317.png

05设置表格标题的位置
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>05设置表格标题的位置</title>
        <style type="text/css">
            caption {
                caption-side: bottom;
            }
        </style>
    </head>

    <body>
        <table border="1">
            <caption>我是标题</caption>
            <tr>
                <td>111</td>
                <td>222</td>
            </tr>
            <tr>
                <td>333</td>
                <td>444</td>
            </tr>
        </table>
    </body>

</html>

846157-20160104114557106-2062978876.png

06制作一个表格
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>制作一个表格</title>
        <style type="text/css">
            #customers {
                font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
                width: 100%;
                border-collapse: collapse;
            }
            
            #customers td,
            #customers th {
                border: 1px solid #98bf21;
            }
            
            #customers th {
                text-align: left;
                background-color: #A7C942;
                color: #ffffff;
            }
            
            #customers tr.alt td {
                color: #000000;
                background-color: #EAF2D3;
            }
        </style>
    </head>

    <body>
        <table id="customers">
            <tr>
                <th>Company</th>
                <th>Contact</th>
                <th>Country</th>
            </tr>

            <tr>
                <td>Apple</td>
                <td>Steven Jobs</td>
                <td>USA</td>
            </tr>

            <tr class="alt">
                <td>Baidu</td>
                <td>Li YanHong</td>
                <td>China</td>
            </tr>

            <tr>
                <td>Google</td>
                <td>Larry Page</td>
                <td>USA</td>
            </tr>

            <tr class="alt">
                <td>Lenovo</td>
                <td>Liu Chuanzhi</td>
                <td>China</td>
            </tr>

            <tr>
                <td>Microsoft</td>
                <td>Bill Gates</td>
                <td>USA</td>
            </tr>

            <tr class="alt">
                <td>Nokia</td>
                <td>Stephen Elop</td>
                <td>Finland</td>
            </tr>

        </table>
    </body>

</html>

846157-20160104122948465-1233648775.png

CSS 表格实例总结

846157-20160104123109621-483422546.png

转载于:https://www.cnblogs.com/hoey/p/5094584.html

weixin_30415113
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
W3school html 表格用法总结
qq_43156556的博客
11-13 524
html 5 表格用法总结 1. 表格标签 表格 描述 table 定义表格 caption 定义标题 th 定义表头 td 定义单元格 2. 应用实例 表格边框— "<table border=“1” <!--1. 没有边框的表格--> <h3>1.无框表格</h3> <table> <!--tr 表格的行--> <tr> <td>100</
w3school关于table的操作API
wzy126126的专栏
08-09 538
<br />http://www.w3school.com.cn/htmldom/dom_obj_table.asp
html设置单元格间距属性,css单元格间距怎么调？
weixin_42402241的博客
06-05 6191
css可以使用border-spacing属性设置表格单元格的间距，我们该如何使用border-spacing 属性来设置表格单元格的间距呢？下面我们来看一下css设置表格单元格间距的方法。border-spacing 属性设置相邻单元格的边框间的距离(仅用于“边框分离”模式)。该属性指定分隔边框模型中单元格边界之间的距离。在指定的两个长度值中，第一个是水平间隔，第二个是垂直间隔。除非 borde...
html5表格w3c,CSS 表格
weixin_33365244的博客
07-15 111
HTML表用于在表格中布置表格数据。使用CSS，我们可以通过添加边框，控制表单元格文本对齐，高亮表行等样式HTML表。表格边框我们可以使用border属性为表，表行和表单元格添加边框。table, th, td {border: 1px solid black;}table, th, td {border: 1px solid black;}ValueItemCSSStyleHTMLStructu...
摘自w3school的html标签内容——表格标签
wzt2017l的博客
04-01 340
1： 定义表格                        属性：border 规定表格边框的宽度                                     cellpadding 规定单元边沿与其内容之间的空白                                     cellspacing 规定单元格之间的空白
W3School-CSS 列表实例
weixin_30700977的博客
12-27 121
CSS 列表实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS 内边距 (padding) 实例 CSS 列表实例 CSS 表格实例 轮廓（Outline） 实例 CSS 尺寸 (Dimension) 实例 CSS 分类 (Classification) 实例 CSS 定位 (Po...
W3School-CSS 背景实例
weixin_30627341的博客
11-29 142
CSS 背景实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS 内边距 (padding) 实例 CSS 列表实例 CSS 表格实例 轮廓（Outline） 实例 CSS 尺寸 (Dimension) 实例 CSS 分类 (Classification) 实例 CSS 定位 (Po...
W3School-CSS 文本实例
weixin_30394333的博客
12-04 107
CSS 文本实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS 内边距 (padding) 实例 CSS 列表实例 CSS 表格实例 轮廓（Outline） 实例 CSS 尺寸 (Dimension) 实例 CSS 分类 (Classification) 实例 CSS 定位 (Po...
W3School-CSS 外边距 (margin) 实例
weixin_30765475的博客
12-26 181
CSS 外边距 (margin) 实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS 内边距 (padding) 实例 CSS 列表实例 CSS 表格实例 轮廓（Outline） 实例 CSS 尺寸 (Dimension) 实例 CSS 分类 (Classification) 实例...
W3School离线指导.chm
10-11
在 w3school，你可以找到你所需要的所有的网站建设教程。 从基础的 HTML 到 CSS，乃至进阶的XML、SQL、JS、...在w3school，我们提供上千个实例。 通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验。
w3school离线手册20191204.chm 2019最新版
12-11
2019最新版w3school离线手册， 2019-12-04下载的数据制作。 tiy试一试实例都能打开，极少数几个CSS实例样式解析会出错。 改了近一个星期，实在是没精力去制作的完美无缺。
W3School离线手册中文版（web前端）
07-05
1．完整的网站技术参考手册 2. 实例测试工具 3.行为快捷易懂的学习方式 -从基础的HTML到CSS,乃至XML,SQL,JS,PHP和ASP.NET成熟的完备教程
W3School离线手册
10-15
在w3school，我们提供上千个实例。 通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验。 快捷易懂的学习方式 一寸光阴一寸金，因此，我们为您提供快捷易懂的学习内容。 在这里，您可以通过一种...
w3school 离线 包 下载
02-06
在w3school，我们提供上千个实例。 通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验。 快捷易懂的学习方式 一寸光阴一寸金，因此，我们为您提供快捷易懂的学习内容。 在这里，您可以通过一种易懂...
智能决策引擎架构设计
猫七姑娘的小博客
05-15 1452
智能决策引擎系统是在大数据支撑下，根据行业专家经验制定规则策略、以及机器学习/深度学习/AI领域建立的模型运算，对当前的业务进行全面的评估，并给出决策结果的一套系统。一套商业决策引擎系统动辄百万而且需要不断加钱定制，大多数企业最终仍会走上自研道路，市场上有些开源规则引擎项目可参考，比较出名的开源规则引擎有drools、urule，都是基于Rete算法，都是基于java代码实现，一些企业会进行二次开发落地生产。而这类引擎功能强大但也比较“笨重”，易用性以及定制性并不够好，对其他语言栈二次开发困难。
RANSAC算法概述
最新发布
点云侠的博客
05-20 594
RANSAC算法概述
使用多实例学习进行乳腺癌组织病理学图像分类和定位
qq_47896523的博客
05-16 1105
乳腺癌是女性最主要的死亡原因，病理学家根据病理切片中观察到的各种视觉特征（例如细胞核的形态特征、细胞核的微观和宏观结构等）做出决定。计算机辅助诊断（CAD）系统可以帮助病理学家自动做出决策。卷积神经网络是最广泛使用的深度学习框架，用于学习图像类别之间的复杂判别特征。多年来，VGG16 [3] 和 ResNet18 [4] 等各种 CNN 架构在海量 ImageNet 数据集上产生了出色的结果。CNN 被用于医学图像以产生最先进的结果。为图像中存在的所有类别提供了定位信息。
w3c-dtf 是什么作用
03-31
w3c-dtf 是一种用于表示日期和时间的标准格式，由 W3C 官方定义。它是 ISO 8601 标准的扩展版本，包括了时区信息和毫秒级别的精度。w3c-dtf 可以在不同的计算机和系统之间传输和共享日期和时间信息，确保了数据的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值