一个不错的表格样式

最新推荐文章于 2021-12-31 18:33:16 发布
最新推荐文章于 2021-12-31 18:33:16 发布
阅读量475 收藏
点赞数
分类专栏： HTML 文章标签： table class xhtml html border c
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/octverve/article/details/1787272
版权
今天在蓝色看到一个表格的设计图，于是自己动手做了效果，虽然没有达到图中的效果，但也算不错了！

div css xhtml xml Source Code to Run Source Code to Run [www.52css.com]

     [ 可先修改部分代码 再运行查看效果 ]

HTML代码：

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
<table width="590" cellspacing="1">
 <caption>
  text
 </caption>
 <thead>
<tr>
<th class="line1" scope="col">text</th>
<th scope="col">text</th>
<th scope="col">text</th>
<th class="line4" scope="col">More</th>
</tr>
</thead>
 <tbody>
<tr>
<th height="78">text text text text</th>
<td>text text text text</td>
<td>text text text</td>
<td class="line4"> </td>
</tr>
 </tbody>
 <tfoot>
<tr>
<th></th>
<td></td>
    <td></td>
    <td></td>
</tr>
</tfoot>
</table>

CSS代码：

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
body{background-color:#D5DFE9;}
table{border-spacing:1px; border:1px solid #A2C0DA;}
td, th{padding:2px 5px;border-collapse:collapse;text-align:left; font-weight:normal;}
thead tr th{background:#B0D1FC;border:1px solid white;}
thead tr th.line1{background:#D3E5FD;}
thead tr th.line4{background:#C6C6C6;}
tbody tr td{height:50px;background:#CBE2FB;border:1px solid white; vertical-align:top;}
tbody tr td.line4{background:#D5D6D8;}
tbody tr th{height:50px;background: #DFEDFF;border:1px solid white; vertical-align:top;}
caption,tfoot{display:none;}
 
octverve
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用python给表格加边框_Python-PPTX：更改表格样式或向单元格添加边框
weixin_39839478的博客
12-04 1765
我已经开始整理一些代码来获取Pandas数据并将其放入PowerPoint幻灯片中.我使用的模板默认为中等样式2 – 重音1,这很好,因为更改字体和背景相当容易,但似乎没有实现python-pptx的部分允许更改单元格边框.以下是我的代码,可以解决任何问题. (改变XML或更改模板默认设置以填充更好的样式对我来说是个不错的选择,但是没有找到关于如何做的好文档).中等风格4对我来说是理想的,因为它...
不错的Javascript表格翻页效果
10-30
在这个例子中，页面包含了一个简单的表格和分页导航组件。表格用于展示数据，而分页导航则允许用户切换不同的数据页面。 ```html 表格翻页 <!-- 表格和分页导航的基本结构 --> <!-- 数据行将在这里动态生成 --> ...
div html表格样式,table 表格 div + css 样式
weixin_42527464的博客
06-29 705
【注意：此文章为博主原创文章！转载需注意，请带原文链接，至少也要是txt格式！】因偶尔在文章中会粘贴表格，发现没有任何样式，非常难看，然后发现freebuf中的样式还算好看，那么就分享一下啦。首先，在你需要有样式的页面调用如下CSS。#contenttxt hr {display: block;height: 0px;border: 0;border-top: 1px solid #ccc;mar...
html表格样式
flyyhz的博客
07-28 1万+
本文导读：CSS表格与表单是网页上最常见的元素，表格除了显示数据外，还常常被用来排版。CSS表格作为传统的HTML元素，一直受到网页设计者们的青睐。使用CSS表格来表示数据、制作调查表等在网络中屡见不鲜。同时因为CSS表格框架的简单、明了，使用没有边框的表格来排版，也受到很多设计者的喜爱。下面介绍CSS控制表格的方法，包括表格的颜色、标题、边框、背景等。 WEB2.0提倡使用div开布局，但不是
html 模仿表格的样式,div+css模拟表格效果代码
weixin_35942339的博客
06-18 518
非常不错的模拟表格效果代码，需要注意的是 这类代码一般都是通过宽度控制，大家注意计算好DIV+CSS模拟表格效果 - by koyoz.com* {margin:0;padding:0}#main {margin:100px 0 0 200px}#main ul {width:520px;height:165px;list-style:none}#main li {border-left:1px ...
h5学习笔记：写一个小表格
夏天的树人的专栏
12-31 2439
1. 前言 2021即将过去了，今年也参与了不少小程序开发。在小程序里面，并没一个比较完善的表格控件。有时候希望有Element 那种table组件，但是在移动端里面展示table，要写完善是很困难，但是通过一些小小样式flex布局。可以简单地模拟一个表格展示效果。仅仅是一个展示的效果。里面用到代码并不多。看如何下。我们先用html代码模拟一下。 2 .搭建一个结构 表格里面要头和身，第一步我们先建立一个简单结构。看如下的效果图。 <!DOCTYPE html> <html> &
微信小程序:好看的表格样式
weixin_40762926的博客
10-15 9333
一个在微信小程序中创建表格的demo 效果图 最后做出来大概就是这个样子的，先看下设计图：（画的真好看） 设计图 然后再看下数据返回的格式： 数据返回格式 这数据...o.0... 分析数据得知，后台返回的数据远比设计图上描绘的复杂，内容是不固定的，而且需要显示一周的排班 个人思路：用scroll-view来做，整个表格按 -行- 分为4大块：排班、上午、下午、晚上。 ①先将从今天开始往后7天的日期放到数组中，作为第一大块的数据源 ②循环遍历数据，...
响应式Table表格样式代码
ICode联盟
09-11 254
下载地址外观样式不错的表格代码，使用CSS3代码实现的响应式Table表格，在不同分辨率下显示效果都不错。 dd:
CSS实例(一)：漂亮的表格样式
无名指的约定
08-19 6565
WEB2.0提倡使用div布局，但不是要完全放弃使用表格，表格在数据展现方面还是不错的选择。 现在使用介绍使用CSS样式表来控制、美化表格的方法。 Html代码   >  html xmlns="http://www.w3.org/1999/xhtml">  head>  meta http-equiv="Content-Type" content="text
几个漂亮的表格样式
xshf12345的专栏
06-02 1万+
<br />漂亮的表格样式(使用CSS样式表控制表格样式) - 隔壁老王的博客 - CSDN博客 <br />依照WEB2.0风格，设计了几个表格样式，希望大家喜欢。<br />WEB2.0提倡使用div开布局，但不是要完全放弃使用表格，表格在数据展现方面还是不错的选择。<br />现在使用介绍使用CSS样式表来控制、美化表格的方法。<br /> <br /> <br /><br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN
8款设计师常用漂亮的HTML CSS表格样式
热门推荐
大树叶 技术专栏
03-05 3万+
原来的地址： http://www.laozuo.org/2040.html 我们在布局网站的时候以前都可能直接用TABLE设计，如今都更流行使用CSS设计，这样对于网站结构更加友好和轻便。下面老左整理的8款设计师常用漂亮的HTML CSS样式是在国外网站看到的，也有用到自己的网站中，顺带分享到博客中，以便日后使用的时候直接下载，当然有需要的也方便网友朋友使用。 第一、简单的表格
一个不错的js的表格插件
08-21
"一个不错的js的表格插件"这个标题所指的很可能是一个高效、易用且功能丰富的JavaScript库，专为创建动态和交互式的表格而设计。这种插件通常具有灵活的配置选项，可以自定义样式、排序、过滤、分页等功能，同时保持...
一个不错的用JavaScript实现的UBB编码函数
10-31
16. **电子邮件链接1**：`/[EMAIL\]>([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,})[/EMAIL\]>/gi` 匹配电子邮件地址，替换为`$1'>$1</a>`，创建一个邮件发送链接。 17. **电子邮件链接2**：`/[EMAIL=(.*?)\]>...
一个不错的表格控件网格控件
10-08
本文将深入探讨“一个不错的表格控件网格控件”，重点关注其核心功能和优势。 表格控件，也称为网格控件，是一种允许用户以二维表格形式查看和编辑数据的组件。这个特定的表格控件以其灵活性和实用性脱颖而出，能够...
CSS打造的不错表格折角效果.rar
07-03
本案例“CSS打造的不错表格折角效果”旨在利用CSS的特性，为表格创建一种视觉上具有立体感的折角效果，以提升用户体验和页面的视觉吸引力。这种效果通常用于数据展示，让表格看起来更加专业且引人注目。 首先，我们...
如何判断一个网络路径是不是有效路径
09-25 901
如何判断一个网络路径是不是有效路径 private int GetUrlError(string curl){      int num = 200;      if (this.method == 1)      {          HttpWebRequest request = (HttpWebReq
Rainer’s DHTML Library 2.0　　学习ＣＳＳ的好助手
09-18 818
Rainer’s DHTML Library 2.0　　学习ＣＳＳ的好助手 
无懈可击的CSS圆角技术
09-16 692
要一个宽度不固定的框，事情变得有些复杂了。宽度不固定，就意味着这个框在水平和垂直方向都有足够灵活的变化。　　为什么说这更难一些呢？因为它需要对四张图片的合适安置——每个圆角用一张。每个圆角都要独立出来，以便框能够在各个方向伸展。于是，四张图片就意味着需要四个HTML对象来作为背景图片的载体。　　有一些实现办法包括在样式表中使用“生成内容”，即使用：before和:after伪类来为单独的一个对象加
html页面内容分页
09-17 614
      上网看新闻或是资料时，经常看到有些文章内容分页。非常好奇其实现方法。今天在网上淘到一个非常棒的用javasript给页面内容分页的例子。看下效果吧   ：下面是代码，大家可以研究一些，非常不错的javascript代码：  1DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  2html>  3head> 
帮我设计一个认为不错的界面布局
最新发布
07-16
当设计一个界面布局时，可以考虑以下几个方面来提供一个认为不错的设计： 1. 界面结构：考虑使用响应式布局，使得界面能够适应不同大小的屏幕。可以采用经典的网格布局，将界面划分为多个区域，例如顶部导航栏、侧...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值