纯css打造漂亮的html表格

花了点时间，自己做了个漂亮的html表格，采用技术有css,html，其他的废话我也不多说了，直接上图，上代码。

界面图片：

HTML代码：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML>

<html>

<head>

<title>My JSP ‘index.jsp‘ starting page</title>

<link type="text/css" rel="stylesheet" href="index.css"/>

</head>

<body>

<div class="table_div">

<div class="div_clear">

<div class="left_top"></div>

<div class="center_top">

<div style="float:left">

<img src="./tab/images/tb.gif" width="16px" height="16px" style="vertical-align:middle"/>

<span style="font-weight:bold">你当前的位置</span>：[业务中心]-[我的邮件]

</div>

<div style="float:right;padding-right:6px">

<img width=‘16‘ height=‘16‘ src="./tab/images/22.gif" style="vertical-align:middle"/>

<a href="#">新增</a>&nbsp;

<img width=‘16‘ height=‘16‘ src="./tab/images/33.gif" style="vertical-align:middle"/>

<a href="#">修改</a>&nbsp;

<img width=‘16‘ height=‘16‘ src="./tab/images/11.gif" style="vertical-align:middle"/>

<a href="#">删除</a>

</div>

</div>

<div class="right_top"></div>

</div>

<div class="div_clear">

<div class="left_center"></div>

<div class="center_center">

<div class="table_content">

<table cellspacing="0px" cellpadding="0px">

<thead >

<tr>

<th width="16%">wo</th>

<th width="16%">ffe</th>

<th width="16%">ff</th>

<th width="16%">ff</th>

<th width="16%">ff</th>

<th wdith="20%" style="border-right:none">操作</th>

</tr>

</thead>

<tbody>

<tr>

<td width="16%">ff</td>

<td width="16%">ff</td>

<td width="16%">f</td>

<td width="16%">fe</td>

<td width="16%">ew</td>

<td width="20%" style="border-right:none">

<img width=‘16‘ height=‘16‘ src="./tab/images/del.gif" style="vertical-align:middle"/>

<a href="#">修改</a>&nbsp;

<img width=‘16‘ height=‘16‘ src="./tab/images/edt.gif" style="vertical-align:middle"/>

<a href="#">删除</a>

</td>

</tr>

<tr>

<td width="16%">ff</td>

<td width="16%">ff</td>

<td width="16%">f</td>

<td width="16%">fe</td>

<td width="16%">ew</td>

<td width="20%" style="border-right:none">

<img width=‘16‘ height=‘16‘ src="./tab/images/del.gif" style="vertical-align:middle"/>

<a href="#">修改</a>&nbsp;

<img width=‘16‘ height=‘16‘ src="./tab/images/edt.gif" style="vertical-align:middle"/>

<a href="#">删除</a>

</td>

</tr>

<tr>

<td width="16%">ff</td>

<td width="16%">ff</td>

<td width="16%">f</td>

<td width="16%">fe</td>

<td width="16%">ew</td>

<td width="20%" style="border-right:none">

<img width=‘16‘ height=‘16‘ src="./tab/images/del.gif" style="vertical-align:middle"/>

<a href="#">修改</a>&nbsp;

<img width=‘16‘ height=‘16‘ src="./tab/images/edt.gif" style="vertical-align:middle"/>

<a href="#">删除</a>

</td>

</tr>

</tbody>

</table>

</div>

</div>

<div class="right_center"></div>

</div>

<div class="div_clear">

<div class="left_bottom"></div>

<div class="center_bottom">

<span>&nbsp;&nbsp;共有 120 条记录，当前第 1/10 页</span>

<div style="float:right;padding-right:30px">

<input type="button" value="首页"/>

<input type="button" value="上页"/>

<input type="button" value="下页"/>

<input type="button" value="尾页"/>

<span>跳转到</span>

<input type="text" size="1"/>

<input type="button" value="跳转"/>

</div>

</div>

<div class="right_bottom"></div>

</div>

</div>

</body>

</html>

CSS文件代码：

/*******************************通用样式***********************/

body{

padding:0px;

margin:0px;

font-size:12px;

}

body a{

color:#03515d;

text-decoration:none;

}

body button{

color:#03515d;

}

body span{

color:#03515d;

}

.center_bottom input{

color:#03515d;

font-size:12px;

height:20px;

width:40px;

padding:2px;

vertical-align:middle;

text-align:center;

margin-bottom:6px;

}

/**************************布局部分********************/

.table_div{

width:1000px;

padding:10px;

margin:0 auto;

}

.div_clear{

clear:both;

}

.left_top{

background:url("./tab/images/tab_03.gif");

height:30px;

width:12px;

float:left;

}

.left_center{

background:url("./tab/images/tab_12.gif");

height:400px;

width:12px;

float:left;

}

.left_bottom{

background:url("./tab/images/tab_18.gif");

height:35px;

width:12px;

float:left;

}

.center_top{

background:url("./tab/images/tab_05.gif") repeat-x;

height:30px;

line-height:30px;

width:900px;

float:left;

}

.center_center{

height:400px;

width:900px;

float:left;

}

.center_bottom{

background:url("./tab/images/tab_19.gif") repeat-x;

height:35px;

width:900px;

float:left;

line-height:35px;

}

.right_top{

background:url("./tab/images/tab_07.gif");

height:30px;

width:15px;

float:left;

}

.right_center{

background:url("./tab/images/tab_15.gif");

height:400px;

width:15px;

float:left;

}

.right_bottom{

background:url("./tab/images/tab_20.gif");

height:35px;

width:15px;

float:left;

}

/**************************************表格内容***********************************/

.table_content{

margin:5px;

border:1px solid #B5D6E6;

width:890px;

height:390px;

overflow-x:hidden;

overflow-y:auto;

}

.table_content table{

width:100%;

border:0;

border-collapse:collapse;

font-size:12px;

}

.table_content table tr:hover{

background-color:#C1EBFF;

}

.table_content table th{

border-collapse:collapse;

height:22px;

background:url("./tab/images/bg.gif");

border-right:1px solid #B5D6E6;

border-bottom:1px solid #B5D6E6;

}

.table_content table td{

height:22px;

word-wrap:break-word;

max-width:200px;

text-align:center;

vertical-align:middle;

border-right:1px solid #B5D6E6;

border-bottom:1px solid #B5D6E6;

}

图片素材也给大家献上，几分钟就可以吧这个漂亮的表格搞到手。

时间： 2024-11-13 02:02:01

纯css打造漂亮的html表格的相关文章

HTML5 CSS3专题 纯CSS打造相册效果

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享下. 效果图: 效果是不是还是很不错的,最主要的是没有使用一行js,这才是亮点. 先看html文件: <body> <div id="gallery"> <h1>纯CSS3相册效果&l

纯CSS实现漂亮圆角阴影边框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>[荐]纯CSS实现漂亮圆角阴影边框_潜水射

纯CSS打造忙碌光标

我们经常会用到忙碌等待的情况,比如ajax等待回调,或者加载页面的时候,我们通常的做法就是放一张loading.gif图片,在那里转呀转. 以前是在pc上用,也没有觉得不妥,如今要在移动端用,问题就来了,以前呢,做前端,兼容各种浏览器,就够让人头疼了,现在还要兼容各种屏幕尺寸. 开始呢,是做了N张不同大小的gif图.用javascript去判断屏的大小,然后选择适当的gif图片,这样做的缺点是很显的,说多了都是泪.现在我要做的,就是 换成css3去实现这个效果.下面看效果图: 有兴趣的,可以复制

纯CSS打造的安卓系统开机画面动画特效代

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>纯CSS打造的安卓系统开机画面动画特效代码</title> <style> .android{ position:relative; width:200px; heigh

史上最详细 纯CSS打造3D文本滚动

昨天看见了一篇文章关于用纯CSS实现文本滚动,在这里跟大家分享一下. 首先把效果图贴给大家 根据效果图我们很容易发现肯定是要用到3D转换的,如果对这个还不是很了解的可以先看看下面的文章 http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/comment-page-1/ http://www.w3cplus.com/blog/tags/95.html 那么首先我们就

纯CSS打造可折叠树状菜单

1:Html代码 <li> <label for="subsubfolder1">下级</label> <input id="subsubfolder1" type="checkbox" /> <ol> <li class="file"><a>下级</a></li> <li> <label for=&q

哥也有个MacBook Air——纯CSS打造银色MacBook Air（一）

上一篇:<CSS3小分队——text分身text-shadow> 写在前面: 前段时间自己用CSS绘制了一个银色的MacBook Air,今天把它从电脑硬盘深处挖了出来,我把我的思路和想法写下来和小伙伴们分享分享.先把最后的效果给大家. 这其实是一个半成品,键盘上的其他图标和文字都还没有加,图标的话可以用font-face,有机会的话把它补全给大家. 小伙伴们也可以去codepen上查看高清无码大图,给出链接: http://codepen.io/myvin/pen/yNezZR 这里使用了C

【css】 收藏 纯css打造 mackbook air

http://www.cnblogs.com/myvin/p/4621231.html <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="./key.css"&g

纯css打造凹进与突出效果

1.凹进效果 background:#f2f2f2  center repeat; border-bottom: 1px solid #e9e9e9;border-top: 1px solid #f9f9f9; 2.突出效果 background:#f2f2f2  center repeat; border-top: 1px solid #e9e9e9;border-bottom: 1px solid #f9f9f9;