table表格美化代码实例

最新推荐文章于 2024-05-01 18:07:01 发布
最新推荐文章于 2024-05-01 18:07:01 发布
阅读量2.9k 收藏 3
点赞数
文章标签： php
原文链接：https://yq.aliyun.com/articles/573432
版权
表单经常用来阻止数据非常的好用，但是通常默认状态下的表格是很难看的，所以对它最好要有些基本的优化美观，下面就是一段能够对表格进行简单美化的代码实例，希望能够给大家带来借鉴作用。

代码如下:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
< html >
< head >
< meta charset = " utf-8" >
< meta name = "author" content = "http://www.softwhy.com/" />
< title >蚂蚁部落</ title >
< style type = "text/css" >
body, table{font-size:12px;}
table{
   table-layout:fixed;
   empty-cells:show;
   border-collapse: collapse;
   margin:0 auto;
}
td{height:30px;}
h1, h2, h3{
   font-size:12px;
   margin:0;
   padding:0;
}
.table{
   border:1px solid #cad9ea;
   color:#666;
}
.table th{
   background-repeat:repeat-x;
   height:30px;
}
.table td, .table th{
   border:1px solid #cad9ea;
   padding:0 1em 0;
}
.table tr.alter{
   background-color:#f5fafe;
}
</ style >
</ head >
< body >
< table width = "90%" class = "table" >
   < tr >
     < th >学号</ th >
     < th >姓名</ th >
     < th >平时</ th >
     < th >期中</ th >
     < th >实验（践）</ th >
     < th >其它</ th >
     < th >期末</ th >
     < th >总评</ th >
   </ tr >
   < tr >
     < td >1</ td >
     < td >1</ td >
     < td >1</ td >
     < td >1</ td >
     < td >1</ td >
     < td >1</ td >
     < td >1</ td >
     < td >1</ td >
   </ tr >
   < tr class = "alter" >
     < td >2</ td >
     < td >2</ td >
     < td >2</ td >
     < td >2</ td >
     < td >2</ td >
     < td >2</ td >
     < td >2</ td >
     < td >2</ td >
   </ tr >
</ table >
</ body >
</ html >





原文发布时间为：2017-2-10

本文作者：admin

本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落

原文链接：table表格美化代码实例


weixin_33924770
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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...
JS实现漂亮的表格table特效代码
09-11
JS实现漂亮的表格table特效代码，四五种效果可选择哦
2024年搞点Python骚操作，自动美化excel表格_python美化excel
2401_84557926的博客
05-01 127
获取样例表格的列宽数据def get_sample_format(col):##因为无需读取整个excel所有列的列宽，所以这里传入一个读取的列宽范围参数wb = xw.Book(“sample.xlsx”) # 建立于sample.xlsx文件的连接sheet = wb.sheets[“sheet1”] #打开sample.xlsx文件的sheet1print(‘列宽:’+str(format)) #‘行高：’+sheet.range(‘A1’).column_width+
纯CSS美化HTML的Table
weixin_30301183的博客
05-30 1650
今天发觉一个很好的表格CSS代码： http://veerle-v2.duoh.com/blog/comments/a_css_styled_table 整体的CSS代码： body { font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color:...
漂亮的表格代码
weixin_34233856的博客
10-29 921
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <met...
html表格美化代码,分享：记录一次使用纯CSS美化table表格的代码
weixin_33400388的博客
06-17 1024
今天准备美化下作的一个小页面的样式，这个页面就是一个表格，调取报名信息的，例如「姓名」「联系方式」「时间」，就单独一个页面，不想再使用复杂的插件来实践，就准备用纯CSS来定一下样式。检索了下，在「蝈蝈要安静」的博客上看到了这个样式，使用一下，感觉挺好，就记录一下。首先上下效果图：CSS 代码/** Table 表格样式 **/.qgg-table{border-collapse: collapse...
Java表格JTable代码实例解析
08-19
Java表格JTable代码实例解析是Java语言中一个常用的GUI组件，用于展示和编辑表格数据。JTable组件是Java Swing库的一部分，提供了丰富的功能和自定义选项，使其变得非常灵活和强大。 Java表格JTable代码实例解析中...
jQuery Table点击选中表格行变色代码.zip
09-22
在网页开发中，表格（Table）是一种常见的数据展示方式，为了提升用户体验，我们常常需要在用户点击表格行时改变其颜色，以显示当前选中状态。jQuery作为一个轻量级、功能强大的JavaScript库，为我们提供了便捷的DOM...
python表格用法实例代码.rar
03-21
在这个"python表格用法实例代码.rar"压缩包中，我们可以期待找到一系列关于如何在Python中操作表格数据的示例代码。Python提供了多个库来处理表格数据，如pandas、csv以及sqlite3等。这里我们将详细探讨这些库及其在...
jQuery Table选中表格行变色特效代码
03-20
jQuery Table选中表格行变色特效代码是jQuery应用的一个实例，旨在提升用户体验，通过用户交互来突出显示表格中的选定行。 在网页开发中，表格是一种常用的数据展示方式，用于组织和排列信息。jQuery Table选中特效...
基于Bootstrap table组件实现多层表头的实例代码
08-29
Bootstrap Table多层表头实现实例代码 Bootstrap Table是一个功能强大的表格组件，它提供了许多有用的功能，包括多层表头的实现。在本文中，我们将分享基于Bootstrap Table组件实现多层表头的实例代码。 多层表头...
js实现漂亮的table表格
07-26
利用js技术和css技术实现比较好看使用的table表格，方便用来制作前端页面表格，可供参考学习或直接使用。
漂亮的table表格样式
06-16
非常漂亮 实现简单 亮蓝色 鼠标移动变色
CSS 美化Table,可以多选Table的行和列
03-06
CSS 美化Table,可以多选Table的行和列
HTML表格的美化修饰
08-14
html表格美化，创建一个布局协调、色调统一、美观、大方的表格
python xlsx 样式 谷歌开源 样式_一个不错的table样式
weixin_39966130的博客
03-01 277
CSS Tables/* CSS Document */body {font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;color: #4f6b72;background: #E6EAE9;}a {color: #c75f3e;}#mytable {width: 700px;padding: 0;...
HTML TABLE 数据处理，美化
程序员专栏
03-28 892
钻研技术，分享技术！题：在数据已经混乱的情况怎么进行整理将所有数据上移？ 科室 内科 一月 二月 三月 四月 五月 六月 七月 八月 九月 十月 十一月 十二月 张三 李四 王五 赵六 赵六 张三 李四 李四
如何简单美化html中的table标签？
shanlanliu的专栏
05-08 3253
由于项目需求，要做一些小网页，其中有一些是通过表格展示的，但我做出来的表格很丑，如何美化呢？ 常用的table属性有 border：边框的线条宽度（外边框） cellspacing：单元格之间的距离 cellpadding：单元格边框与单元格内容的举例 <table border="1" cellpadding="3" cellspacing="0"> <tr&g...
el-table 表格选中回显
最新发布
06-26
`el-table` 是 Element UI 提供的一个用于展示表格的组件，在 Vue.js 中非常常用。如果你想实现表格的选中回显功能，即用户选择某一行后，再次打开页面时这一行仍然被选中，你可以按照以下步骤操作： 1. 绑定数据：...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值