好看的table css样式

最新推荐文章于 2024-03-26 22:56:58 发布
最新推荐文章于 2024-03-26 22:56:58 发布
阅读量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
    评论
专栏目录
好看的css table列表样式
07-19
好看的css table列表样式
漂亮的table样式（内附css）
08-10
漂亮的table样式（内附css） 漂亮的table样式（内附css）
30个 CSS 样式常用的静态形状，资深前端开发带你入门Framework
最新发布
03-26 608
7. 右上角右上角.pngwidth: 0;height: 0;复制代码8. 左下角左下角.pngwidth: 0;height: 0;复制代码9. 右下角右下角.pngwidth: 0;height: 0;复制代码10. 箭头箭头.pngwidth: 0;height: 0;top: -12px;left: -9px;复制代码11. 平行四边形平行四边形.png复制代码12. 梯形梯形.png。
CSS通用样式3——表格
qq_66198247的博客
11-08 5560
上表中，.table是表格的一个基类，如果想要加其他的样式，都要在.table的基础上去添加。表内的样式可以组合使用，多个样式之间只需使用空格隔开即可，并且都支持.table-dark样式，适用于反转色调。Bootstrap中提供了一系列表格布局样式，利用该样式可以帮助开发者快速开发出美观的表格，作用于元素的表格样式如下表所示。Bootstrap为表格提供了多种状态的样式类，这些状态类的主要作用是为表格中的行或单元格设置不同的背景颜色。样式，可以将表格中的每个单元格增加边框样式。
简单好看的html表格模板,四款好看实用的css表格样式分享
weixin_32098457的博客
06-07 6321
!----=""{font-,,sans-;font-;#333333;border-width:1px;border-color:#999999;border-collapse:collapse;}table.hovertableth{background-color:#c3dde0;border-width:1px;padding:8px;border-style:solid;border-c...
20 个经典的 Ajax + CSS 表格
weixin_34049948的博客
01-07 91
并不是所有的Web 开发者都会对美化表格数据感兴趣，今天我们收集了20 个功能强大，外观漂亮的基于Ajax + CSS 的表格效果，你可以从这些示例中学习怎么使用这些表格提供的排序和过滤的功能来组织表格中的数据。现在让我们来看看这些表格：（点击每个样式前面的链接即可进入下载）　　#1. Tablecloth　　Tablecloth 由CSS Globe 开发，是一个轻量级的、易于使用的表格，以友好...
几款好看的css表格
HLLLLLL_的博客
03-30 1万+
表格一： 代码： html代码段： 是用vs写的 表头<th>那是从数据库读取的数据段,<td>那是我为测试效果加的代码，大家可以自行更改。 <h1>待处理订单</h1> <table id="all-requst"> <thead> <tr> ...
教你如何用原生css和html搭建一个好看的Table表格
抗争小青年的博客
11-27 7610
大家在学习标签的时候，可能还没有接触css，所以你做出来的表格可能是这样的：或者是这样的：大家有想过自己做一个漂亮的表格吗？我知道大家在做项目的时候大概率会去当下流行的UI框架中找已经封装好的表格来使用，就像layui的表格：但大家真的考虑过如何写一个好看的表格吗？表格背景色的交替变化大家有考虑过吗？大家亲手实现过吗这可是博主面试字节跳动时候的面试题啊！(虽然失败告终，还是自己太菜)。这些都是非常重要的基础，这篇博文，跟着博主一起做一个好看的表格，拒绝使用框架。
CSS表格样式
xiangxiongfly
07-21 1万+
CSS表格样式 caption-side 标题位置 border-collapse 边框合并 border-spacing 边框间距 css样式（推荐使用）
CSS表格边框50多种精美标签样式(边框也精彩)
02-27
CSS表格边框50多种精美标签样式(边框也精彩) 直接复制就可以用，几乎都是标签样式 CSS表格边框50多种精美标签样式(边框也精彩) 直接复制就可以用，几乎都是标签样式
好看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样式 常见用于报表相关
Table CSS样式
07-30
Table CSS 博文链接：https://hefeng1987-net-163-com.iteye.com/blog/868780
7种表格样式
eyugod的博客
08-02 6112
http://www.laozuo.org/4631.html 老左并不是一名网页设计师，但是经常在博客上捣鼓、修改一些自认为不太好的用户体验也仅仅局限在修改一些简单的CSS样式上，遇到不能解决的问题可以通过搜索查阅文档。随着时间的积累，我们越发感觉到CSS样式的无穷奇妙，比如我们在制作某个表格时候，可以简单的利用CSS样式表的修改变化多样的CSS表格样式。在页面布局和内容分享的
html+css+table一些比较漂亮的表格
热门推荐
zephyr的专栏
12-17 3万+
各种不同样式的css+table 效果图 具体的html文件 Employee Salary Bonus Supervisor Stephen C. Cox $300
十个最简单实用的Table设计模板
雾塔晨钟
12-31 771
  表格恐怕是 Web 设计中最困难的一个对象了，感谢神秘的标记语言，有太多的细节我们需要关注了，而且表格缺乏浏览器的兼容性。虽然表格只是一个简单的元素，但是它浪费了我们大量的时间。有人甚至说， 标签是垃圾。其实表格本身并没有什么，是你自己使用的不当，把简单的事情弄的复杂了。这就是我写下本篇文章的原因，它将向你展示十个最简单表格设计方法。   准备 想必大家都知道 xhtml 1.0...
html➕css好看的table样式
06-28
### 回答1： 为了使表格看起来更美观，可以使用CSS样式。 一些常用的样式包括设置边框、表格间距和颜色、为表头和行/列设置不同的背景色等。 一些示例代码： ``` table{ border-collapse: collapse; /* 合并边框 */ width: 100%; /* 表格宽度 */ } th, td{ border: 1px solid #ccc; /* 边框样式 */ padding: 8px; /* 单元格内边距 */ } th{ background-color: #f2f2f2; /* 表头背景色 */ text-align: left; /* 文本对齐方式 */ } ``` 除此之外，还可以使用css框架，如Bootstrap来美化表格,只需要在table上添加class就可以了。 还有很多其他的样式可以调整, 这里只是给出一些基本的样例。 ### 回答2： HTML的table（表格）是一个用于在网站上展示数据的非常常见的元素。然而默认的样式相对简单，如果你想要让表格更美观一些，可以使用CSS给它加点样式。在这里，我将会分享一些好看的table样式，希望能够为你的网站添加一些迷人的效果。 1. 简洁的黑白表格 这是一种非常简单却又非常流行的表格样式。只需要设定表格的背景颜色和字体颜色为白色和黑色，然后设置一些padding和border，你就可以得到一个很常见的简洁的表格。你还可以使用CSS伪类选择器来设置鼠标悬停时的效果。 2. 带有斑马线的表格 斑马线是指在表格中的每一行之间交替设置不同颜色的背景，以便于视觉区分。仍然可以使用黑白颜色组合，但是在不同的行之间间隔一些灰色或其他颜色的背景。你可以在CSS中使用:nth-child属性来设置这个效果。这种样式会让表格看起来更有层次感。 3. 圆角表格 圆角表格给人一种温和、柔软、可爱的效果。你可以用CSS的border-radius属性来控制，设置几个像素的边角半径来实现圆角。这个样式适用于如博客、产品列表等需要呈现温和氛围的网站。 4. 排序表格 如果你需要一个可以按照不同条件排序的表格，考虑使用第四种样式——排序表格。这个样式应用了一些额外的JavaScript功能，也可以使用jQuery插件库来实现。很多数据表格在传统上是通过点击表头实现排序，而这个样式让排序具有更显眼的效果。 这些都是一些不错的table样式来美化你的网站。虽然可以用这里提供的样式迅速地使表格变得好看，但除此之外还有很多其他的样式选择可以探索。总体而言，选择适合你的目的和风格的表格样式是一个重要的过程，你需要考虑你的网站主题、受众群体的偏好以及信息的可读性和可操作性。 ### 回答3： 在Web开发中，table是常用的布局元素，可以用于展示数据、排列表格等。然而，table默认的样式并不美观，这就需要我们自己来设计表格的样式，使其看起来更加美观、清晰、易于阅读。下面我来介绍一些好看的table样式。 首先，我们可以通过CSS来设计表格的外观，其中包括：背景色、边框、文本样式、字体等。以下是一个简单的CSS样式代码段，可以用于美化表格： ``` table { border-collapse: collapse; width: 100%; text-align: left; font-family: Arial, sans-serif; font-size: 14px; } td, th { border: 1px solid #ddd; padding: 8px; } th { background-color: #f2f2f2; color: #333; } tr:nth-child(even) { background-color: #f9f9f9; } ``` 这段代码实现了一些基本的样式，包括： - `border-collapse: collapse`将表格的边框合并为一个； - `width: 100%`使表格占据整个父元素的宽度； - `text-align: left`将表格中的文本左对齐； - `font-family`和`font-size`定义了表格中的字体信息； - `td, th`定义了表格中的单元格样式，包括边框和内边距； - `th`定义了表格头的样式，包括背景色和文本颜色； - `tr:nth-child(even)`定义了表格中偶数行的背景色。 此外，我们还可以通过CSS框架来进行表格的美化。Bootstrap是一个非常流行的CSS框架，它提供了丰富的组件库，其中包括表格组件。以下是一个Bootstrap表格样式代码段： ``` <table class="table table-striped"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <td>3</td> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table> ``` 这段代码中使用了Bootstrap的表格样式类`table table-striped`，它可以让表格变得更加美观，有斑马线效果，同时还包括表头样式等。 除了基本的CSS样式和框架之外，还有很多第三方CSS库可以用于表格样式的美化，例如Tablecloth、DataTables等。这些库都提供了丰富的表格样式、交互效果等，可以让我们在设计表格时更加方便快捷。 总之，设计好看的表格样式需要我们具备一定的CSS技术和美学能力，同时也要结合使用CSS框架和第三方库，充分利用现有的资源，才能让表格看起来更加美观、清晰、易于阅读、有条理。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值