好看的table css样式

最新推荐文章于 2024-06-11 16:06:12 发布
最新推荐文章于 2024-06-11 16:06:12 发布
阅读量4.4w 收藏 21
点赞数 9
分类专栏： HTML5 CSS 实用
实用 同时被 3 个专栏收录
738 篇文章 3 订阅
订阅专栏
CSS
191 篇文章 0 订阅
订阅专栏
HTML5
155 篇文章 0 订阅
订阅专栏

原文出处：https://blog.csdn.net/hello_mr_anan/article/details/70257627?locationNum=3&fps=1

漂亮的table表格样式css源码漂亮的table表格样式

源码


<head>

    <title></title>

    <style type="text/css">

        table

        {

            border-collapse: collapse;

            margin: 0 auto;

            text-align: center;

        }

        table td, table th

        {

            border: 1px solid #cad9ea;

            color: #666;

            height: 30px;

        }

        table thead th

        {

            background-color: #CCE8EB;

            width: 100px;

        }

        table tr:nth-child(odd)

        {

            background: #fff;

        }

        table tr:nth-child(even)

        {

            background: #F5FAFA;

        }

    </style>

</head>

<body>

    <table width="90%" class="table">

        <caption>

            <h2>

                车间能源消耗比例</h2>

        </caption>

        <thead>

            <tr>

                <th>

                    车间

                </th>

                <th>

                    产量

                </th>

                <th>

                    电量

                </th>

                <th>

                    单耗

                </th>

            </tr>

        </thead>

        <tr>

            <td>

                109

            </td>

            <td>

                13

            </td>

            <td>

                1.34

            </td>

            <td>

                213

            </td>

        </tr>

        <tr>

            <td>

                109

            </td>

            <td>

                13

            </td>

            <td>

                1.34

            </td>

            <td>

                213

            </td>

        </tr>

        <tr>

            <td>

                109

            </td>

            <td>

                13

            </td>

            <td>

                1.34

            </td>

            <td>

                213

            </td>

        </tr>

        <tr>

            <td>

                109

            </td>

            <td>

                13

            </td>

            <td>

                1.34

            </td>

            <td>

                213

            </td>

        </tr>

        <tr>

            <td>

                109

            </td>

            <td>

                13

            </td>

            <td>

                1.34

            </td>

            <td>

                213

            </td>

        </tr>

        <tr>

            <td>

                109

            </td>

            <td>

                13

            </td>

            <td>

                1.34

            </td>

            <td>

                213

            </td>

        </tr>

    </table>

</body>

</html>
chelen_jak
关注
  • 9
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
table 样式美化
dengjuanshou7445的博客
08-15 1万+
1. 单像素边框CSS表格 这是一个很常用的表格样式。 源代码： 1 <!-- CSS goes in the document HEAD or added to your external stylesheet --> 2 <style type="text/css"> 3 table.gridtable { 4 f...
教你如何用原生css和html搭建一个好看的Table表格
抗争小青年的博客
11-27 8759
大家在学习标签的时候，可能还没有接触css，所以你做出来的表格可能是这样的：或者是这样的：大家有想过自己做一个漂亮的表格吗？我知道大家在做项目的时候大概率会去当下流行的UI框架中找已经封装好的表格来使用，就像layui的表格：但大家真的考虑过如何写一个好看的表格吗？表格背景色的交替变化大家有考虑过吗？大家亲手实现过吗这可是博主面试字节跳动时候的面试题啊！(虽然失败告终，还是自己太菜)。这些都是非常重要的基础，这篇博文，跟着博主一起做一个好看的表格，拒绝使用框架。
几款CSS3美化的表格样式
学习笔记
10-25 4606
几款CSS3美化的表格样式 table.table1{ font-family: "Trebuchet MS", sans-serif; font-size: 16px; font-weight: bold; line-height: 1.4em; font-style: normal; border-collap
CSS 列表样式（ul）全面解析
2401_83810323的博客
06-11 745
属性用于定义列表项的标记类型。常见的值包括disc（实心圆）、circle（空心圆）、square（方块）以及none（无标记）。此外，也可以使用decimal（十进制数字）、（小写字母）、（大写罗马数字）等来生成不同的编号效果。ul {/* 方块标记 */ol {/* 大写罗马数字 */
好看的table-css样式
qq_45450789的博客
04-13 5837
1.单像素边框css表格 源代码： <style type="text/css"> table.gridtable { font-family: verdana,arial,sans-serif; font-size:11px; color:#333333; border-width: 1px; border-color: #666666; border-collapse: collapse; } table.gridtable t.
好看的table样式
心有—林夕的博客
04-30 2548
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>table1</title> </head> <style type="text/css"> body { text-align:center; font: normal 11px "Trebuchet MS.
html5 table样式css,css表格样式的布局篇
weixin_36433730的博客
06-16 1129
进修了div css构造后，确凿css对表格样式的设置就变得简单了。一样平常对table配置class或id来对其设置装备摆设CSS花色。表格CSS花式配置实例代码：表格CSS设置装备摆设实例 CSS5.tablecss{text-align:center; border:1px solid #CCC;border-bottom:0;border-left:0}.tablecss th{color...
好看的css样式 table样式
jiana227的专栏
05-19 7281
table{ border-bottom:1px solid silver; border-right:1px solid silver; width:100%; } .bordered { border: solid #ccc 1px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-
四个好看的CSS样式表格
wangchaoqi1985的博客
06-29 6609
1. 单像素边框CSS表格 这是一个很常用的表格样式。 源代码： &lt;!-- CSS goes in the document HEAD or added to
CSS-table样式+
weixin_47345929的博客
11-30 1486
table样式 table一般不用来布局，主要用来格式化数据。 属性： width:宽度 height:高度 border-collapse:collapse; 单线边框 border:边框线 td,tr属性： width:宽度 height:高度 text-align:文本水平方向对齐方式(left(默认)/center/right) vertical-align:文本垂直方向对齐方式(top/middle(默认)/bottom) 列表样式 不是描述性的文本的任何内容都可以认为是列表。比如：菜单、商品列
好看的css table列表样式
07-19
好看的css table列表样式
好看table样式 好看的CSS——Table样式表
04-01
网络上收集的css table样式 好看table样式 好看的CSS——Table样式表
挺好看的CSS TABLE样式
03-01
整体代码 博文链接：https://tylerxi.iteye.com/blog/215668
好看的css table样式
01-19
在这个主题中，我们聚焦于“好看的css table样式”，这在创建报表、数据展示以及各种信息汇总的网页中尤其重要。 一个美观的CSS表格不仅需要清晰易读，还要具有良好的可读性和吸引力。下面我们将深入探讨如何使用...
Table CSS样式
07-30
在网页设计中，CSS（Cascading Style Sheets）是一种用于定义HTML或XML（包括SVG、...总之，Table CSS样式是网页设计中的重要一环，通过熟练掌握相关技巧，我们可以创建出美观且功能强大的表格，满足各种设计需求。
pi_heif-0.17.0-cp310-cp310-manylinux_2_17_aarch64.whl
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
Numper基础（一）
07-27
Numper基础（一）
C语言写的潮流计算大作业代码.zip
最新发布
07-27
c写的潮流计算大作业代码.zipc写的潮流计算大作业代码.zipc写的潮流计算大作业代码.zip
html➕css好看的table样式
06-28
为了使表格看起来更美观，可以使用CSS样式。 一些常用的样式包括设置边框、表格间距和颜色、为表头和行/列设置不同的背景色等。 一些示例代码： ``` table{ border-collapse: collapse; /* 合并边框 */ width: ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值