表单经常用来阻止数据非常的好用,但是通常默认状态下的表格是很难看的,所以对它最好要有些基本的优化美观,下面就是一段能够对表格进行简单美化的代码实例,希望能够给大家带来借鉴作用。

代码如下:

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表格美化代码实例

table表格美化代码实例相关推荐

  1. html表格美化代码,分享:记录一次使用纯CSS美化table表格的代码

    今天准备美化下作的一个小页面的样式,这个页面就是一个表格,调取报名信息的,例如「姓名」「联系方式」「时间」,就单独一个页面,不想再使用复杂的插件来实践,就准备用纯CSS来定一下样式. 检索了下,在「蝈 ...

  2. php网页表格制作,如何制作html表格的边框?HTML table表格制作及实例

    本篇文章主要为大家讲述的就是关于html table表格标签的边框用法,一般我们都是把边框线设置为1来演示边框的方法.接下来我们一起来看这篇关于html table表格标签的边框用法的文章吧 首先我们 ...

  3. java表格源码_Java表格JTable代码实例解析

    代码如下: import javax.swing.JTable; import javax.swing.table.AbstractTableModel; import javax.swing.JSc ...

  4. css怎么设置table表格的边框为单线边框?(代码详解)

    table表格边框怎么设置为单线边框?本篇文章就给大家介绍一种css设置table表格的边框为单线边框的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们来看看给tabl ...

  5. css单线边框_css怎么设置table表格的边框为单线边框?(代码详解)

    table表格边框怎么设置为单线边框?本篇文章就给大家介绍一种css设置table表格的边框为单线边框的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们来看看给tabl ...

  6. 怎样美化html文本框,HTML/css文本框样式美化代码

    HTML/CSS文本框样式美化代码 输入框景背景透明: 鼠标划过输入框,输入框背景色变色: style="width: 106; height: 21" οnmοuseοut=&q ...

  7. html5 表格向下,html中table固定头部表格tbody可上下左右滑动代码实例

    本篇文章小编给大家分享一下html中table固定头部表格tbody可上下左右滑动代码实例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 当表格头部固 ...

  8. layui table 表格模板按钮的实例代码

    文章转载:https://www.jb51.net/article/170530.htm 今天小编就为大家分享一篇layui table 表格模板按钮的实例代码,具有很好的参考价值,希望对大家有所帮助 ...

  9. datagridview控件读写mysql数据库表格的方法_C#读写Access数据库、表格datagridview窗体显示代码实例...

    C#读写Access数据库.表格datagridview窗体显示代码实例 最近项目中用到C#对于Access数据库表读写.mdb操作,学习了下相关的东西,这里先整理C#对于Access数据库的操作,对 ...

最新文章

  1. 完美解决“惠普p1007打印机老显示脱机使用”的问题
  2. 如何在页面加载完成后再去做某事?什么方法可以判断当前页面加载已完成?...
  3. 企业网络推广期间对于易流失用户群体企业网络推广有话说
  4. SAAS,象B2C那样的B2B分销系统
  5. 使用puppeteer爬 EXTJS
  6. 防火墙技术指标---并发连接数/吞吐量
  7. 先序、中序确定二叉树
  8. springboot 没有找到service_Spring Boot 应用程序五种部署方式
  9. c/c++头文件之string.h、cstring与string的区别
  10. 为什么需要学习编程?
  11. 基于yolo的口罩识别(开源代码和数据集)
  12. (MTT)连续能量函数最小化方法
  13. 三菱触摸屏通讯错误_s7-200和三菱触摸屏通讯的问题
  14. 微信小程序云开发--数据库使用
  15. Java语言这些年的发展
  16. linux使用tmux后台运行程序
  17. 关于《人月神话》的读后感
  18. 奥鹏 大工21秋《计算机网络技术》在线作业
  19. 想要改变世界的 Rust 语言
  20. @Autowire和@Resource区别

热门文章

  1. 74cms分站职位发布只能在一个分站显示
  2. 一剑封喉:Uniswap V3引领AMM向CEX发起冲锋
  3. i7 975EE与i7980XE两种CPU的峰值计算能力(每秒多少次浮点运
  4. 排序算法-冒泡排序(可视化动图)
  5. 使用 Python 进行机器学习
  6. 锤子m1 android 7,Smartisan 锤子 M1L 入手两日感受和DIY换背盖经验分享
  7. Webmin -- Custom Commands模块
  8. 3、创建线程方式三:实现Callable接口
  9. unity入门~炮弹打飞机(一)
  10. Echarts之气泡图图例