好看的table3

最新推荐文章于 2018-08-01 12:06:48 发布
原创 最新推荐文章于 2018-08-01 12:06:48 发布 · 224 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"utf-8" />
<title>css tables</title>
<mce:style type="text/css"><!--

/* 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;
margin: 0;
}

caption {
padding: 0 0 5px 0;
width: 700px;
font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: right;
}

th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA no-repeat;
}
/*power by www.winshell.cn*/
th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}

td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
font-size:11px;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
/*power by www.winshell.cn*/

td.alt {
background: #F5FAFA;
color: #797268;
}

th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}

th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #797268;
}
/*---------for IE 5.x bug*/
html>body td{ font-size:11px;}
body,td,th {
font-family: 宋体, Arial;
font-size: 12px;
}
--></mce:style><mce:style type="text/css" mce_bogus="1"><!--

/* 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;
margin: 0;
}

caption {
padding: 0 0 5px 0;
width: 700px;
font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: right;
}

th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA no-repeat;
}
/*power by www.winshell.cn*/
th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}

td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
font-size:11px;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
/*power by www.winshell.cn*/

td.alt {
background: #F5FAFA;
color: #797268;
}

th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}

th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #797268;
}
/*---------for IE 5.x bug*/
html>body td{ font-size:11px;}
body,td,th {
font-family: 宋体, Arial;
font-size: 12px;
}
--></mce:style><style type="text/css" mce_bogus="1" mce_bogus="1">
/* 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;
margin: 0;
}

caption {
padding: 0 0 5px 0;
width: 700px;
font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: right;
}

th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA no-repeat;
}
/*power by www.winshell.cn*/
th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}

td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
font-size:11px;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
/*power by www.winshell.cn*/

td.alt {
background: #F5FAFA;
color: #797268;
}

th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}

th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #797268;
}
/*---------for IE 5.x bug*/
html>body td{ font-size:11px;}
body,td,th {
font-family: 宋体, Arial;
font-size: 12px;
} </style>
</head>
<body>
<table id="mytable" cellspacing="0" summary="The technical specifications of the Apple

PowerMac G5 series">
<caption> </caption>
<tr>
<th scope="col">姓名</th>
<th scope="col">年龄</th>
<th scope="col">电话</th>
<th scope="col">居住地点</th>
</tr>
<tr>
<td class="row">cwt123</td>
<td class="row">99</td>
<td class="row">0755-88886666</td>
<td class="row">中国深圳</td>
</tr>
</table>

</body>
</html>
漂亮的Table CSS
09-23
很好看的Table CSS,做网页很有用
好看的table css样式
热门推荐
王永安的博客
04-20 7万+
漂亮的table表格样式css源码漂亮的table表格样式css源码&lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; table { border-collapse: collapse; margin: 0 ...
好看的table
arienya1的博客
02-23 168
css_table 3 /* css document */ body { font: normal 11px auto "trebuchet ms", verdana, arial, helvetica, sans-serif; color: #4f6b72; background: #e6eae9; } a { color: #c75f3e; } #m...
好看的table样式
weixin_30539625的博客
11-17 486
收藏个好看的table样式 <style type="text/css">table.gridtable { font-family: verdana,arial,sans-serif; font-size:11px; color:#333333; border-width: 1px; border-color: #666666; border-collapse: collapse;...
好看table样式 好看的CSS——Table样式表
04-01
网络上收集的css table样式 好看table样式 好看的CSS——Table样式表
js实现漂亮的table表格
07-26
在网页开发中，表格（Table）是展示数据的重要方式之一，尤其在前端界面设计中，一个美观、功能齐全的表格可以提升用户体验。本教程将详细介绍如何利用JavaScript (JS) 和 Cascading Style Sheets (CSS) 技术来创建...
教大家轻松制作Bootstrap漂亮表格（table）
11-27
例如，`table`, `table-striped`, `table-hover`, 和 `table-bordered`这四个类，分别赋予表格基本样式、斑马纹效果、鼠标悬停高亮和边框： ```html <table style="width: 500px;" class="table table-striped ...
table CSS制作好看的网页表格
12-12
幸运的是html规范提供了许多无素和属性来提高数据表格对于这些设备的可访问性. 1.summary 和 caption 第一元素是表格的caption,它基本上用做表格的标题.尽管这不是必须有的元素,但是尽可以使用caption总是好的....
好看的css table列表样式
07-19
好看的css table列表样式
好看的css table样式
01-19
好看的css table样式 常见用于报表相关
漂亮的table样式（内附css）
08-10
漂亮的table样式（内附css） 漂亮的table样式（内附css）
挺好看的CSS TABLE样式
03-01
整体代码 博文链接：https://tylerxi.iteye.com/blog/215668
HTML Table 漂亮的CSS
03-26
HTML Table 漂亮的CSS 包含了格式各样的CSS，代码非常独立，肯定能够让你用到的。
好看的form1
smile725775的专栏
11-08 729
<br /><html> <br /><head> <br /><meta http-equiv="Content-Type" content="text/html; charset=gb2312"utf-8" /> <br /><title>坏狼安全网-漂亮CSS Tables</title> <br /></head> <br /><style type="text/css"> <br />/* CSS Document */ <br />body { <br />font: normal 11px a
好看的表格样式
zhuixunhebe1的专栏
08-01 2148
https://www.cnblogs.com/zk-zhou/p/7427883.html
好看的CSS——Table样式表
爱在深夜
09-21 1685
好看的table 样式一
陈伟堂的专栏
01-19 2881
收集好看的table 样式,报表经常用的到.效果图源代码:css tables
html 好看的table
最新发布
01-24
### 如何创建美观的 HTML 表格 为了创建一个既功能齐全又视觉上吸引人的HTML表格，可以综合运用HTML结构和CSS样式。以下是具体实现方法： #### 使用HTML定义表格框架 通过`<table>`标签构建表格的基础架构，并利用`<thead>`, `<tbody>`以及`<tfoot>`来区分不同的逻辑部分。 ```html <table> <thead> <tr> <th>Name</th> <th>Age</th> <th>Branch</th> </tr> </thead> <tbody> <tr> <td>Bittu Sehgal</td> <td>22</td> <td>CSE</td> </tr> <!-- 更多行 --> </tbody> </table> ``` 此段代码展示了如何使用标准的HTML标记建立表格[^4]。 #### 应用CSS美化表格外观 借助于CSS能够极大地改善表格的表现形式。这里列举了一些常用的CSS属性用于定制化表格风格： - `border-collapse`: 控制边框合并模式； - `text-align`: 设置单元格内文字对齐方式； - `padding`: 调整内容与边界之间的间距； - `background-color`: 改变背景颜色； ```css table { border-collapse: collapse; } th, td { text-align: center; padding: 8px; } ``` 上述CSS片段提供了基础样式的配置方案[^2]。 #### 增强用户体验的功能特性 除了静态展示数据外，还可以考虑加入动态效果提升交互体验。例如，当鼠标悬停在某一行时改变其颜色，或是为表格添加水平/垂直滚动条以便处理大量数据的情况。 ```css tr:hover { background-color:#f5f5f5; } /* 对于超出宽度的内容启用横向滚动 */ div.table-container { overflow-x:auto; } ``` 这些技巧不仅提高了可读性和易用性，同时也让页面更加生动有趣[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值