<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"utf-8" />
<title>坏狼安全网-漂亮CSS Tables</title>
</head>
<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;
}
</style>
<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">badwolf</td>
<td class="row">100</td>
<td class="row">010-110</td>
<td class="row">中国北京</td>
</tr>
</table>
</body>
</html>
分享到：
相关推荐
网络上收集的css table样式 好看table样式 好看的CSS——Table样式表
"头歌教学实践平台"提供的"CSS——表格样式"课程，通过实际案例和练习，帮助学习者理解并运用上述知识点，提升Web前端开发技能。 总之，理解和掌握CSS在表格样式设计中的应用，对于构建美观且功能齐全的网页至关...
样式表——Styling the Tables1.表属性——Tables Properties2.标题设置——caption-side2.空白单元格设置——empty-cells3.表格布局——table-layout三.链接样式——Styling the Links1.设置样式2.修饰链接的文字...
以上介绍了两种常见的HTML表格样式——单像素边框CSS表格与带背景图的CSS样式表格，并简单提及了一种自动换整行颜色的CSS样式表格（需要用到JavaScript）。这些样式不仅提高了表格的美观度，也增强了用户的阅读体验...
本文将深入探讨如何使用CSS来实现这一功能，并通过分析提供的两个示例文件——test1.html和test2.html，展示不同的实现方法。 首先，我们要理解CSS中的定位（positioning）概念，这是实现固定表头的关键。CSS提供了...
本教程将深入探讨如何使用纯 CSS 实现美观且功能丰富的表格样式。 表格在 HTML 中通常使用 `<table>`、`<tr>`（行）、`<th>`（表头）和 `<td>`（单元格）等标签来创建。CSS 则通过选择器和属性来控制表格的样式。...
本文将详细解析如何使用这两种语言实现一个经典的教育工具——九九乘法表，并结合CSS（Cascading Style Sheets）来增强页面的视觉效果。 首先，ASP是一种微软开发的服务器端脚本环境，它允许开发人员在HTML页面中...
- **CSS**: 层叠样式表，用于定义网页的表现形式。在该项目中，CSS被广泛应用于调整网页的颜色、布局、字体大小等，以实现更加美观的设计。 #### 2. **网页布局方式** - **Div+CSS**: 这是一种常见的网页布局方法...
总之，Bootstrap Table 的表头固定功能通过CSS样式和JavaScript实现了在滚动时保持表头可见，大大提升了用户在处理大量数据时的可读性和操作便捷性。在实际开发中，可以根据项目需求灵活配置和扩展，以达到最佳的...
7.1.1 表格的基本构成——table、tr、td 119 7.1.2 表格的标题——caption 120 7.1.3 表格的表头——th 121 7.2 设置表格基本属性 123 7.2.1 表格的宽度——width 123 7.2.2 表格的高度——height...
可以使用`<style>`标签在`<head>`中添加内联样式，或者通过`class`和`id`选择器引用外部样式表。 9. **响应式设计**： 在HTML5中，我们可以使用媒体查询（`@media`）实现响应式设计，使网页能在不同设备上适配显示...
在Vue.js中，我们可以利用CSS样式、DOM操作或者第三方库来实现这个功能。 首先，我们需要创建一个Vue组件来表示表格。这个组件将包括一个`<table>`元素，其中包含`<thead>`（表头）和`<tbody>`（表格主体）。在CSS...
同时，还引入了一个自定义的CSS样式，用于调整单元格的内边距、输入框的大小和对齐方式，以及添加和删除按钮的样式。 表格结构使用了Bootstrap的`table`, `table-striped`, `table-bordered`, 和 `table-condensed`...
本资源包“常用js demo”聚焦于一些常见的JavaScript示例，包括倒计时功能和特定的表格显示效果——固定表头以及双色球样式的设计。 首先，我们来看倒计时功能。倒计时在许多应用场景中都很常见，如活动开始时间...
CSS（层叠样式表）是用来控制HTML元素外观和布局的样式语言。它可以用来设置颜色、字体、布局、动画等，通过选择器选择HTML元素并应用样式规则。例如： ```css p { color: blue; /* 设置段落文字颜色为蓝色 */ ...
1. **外部样式表**：通常推荐使用外部样式表文件（.css文件），这样可以更好地管理和维护样式。只需要在HTML文件中通过`<link>`标签引入即可。 ```html <link rel="stylesheet" href="styles.css"> ``` 2. **内联...
2.8.3 外部样式表 2.9 样式优先权问题 2.9.1 写法优先权 2.9.2 选择符优先权 2.9.3 样式继承 2.9.4 !important语法 2.10 代码注释 2.11 CSS开发环境与调试环境 第3章 CSS网页布局与定位 3.1 认识div 3.1.1 div是什么...
酒店管理系统采用CSS（层叠样式表）来美化用户界面，通过设置颜色、布局、字体等样式属性，提供友好的用户体验。开发者需要掌握CSS选择器、盒模型、浮动布局、响应式设计等基础知识。同时，JavaScript作为客户端脚本...
根据提供的文件信息，这里主要涉及的是前端Web开发中的一个具体应用案例——实现表格（table）中的光棒效果。下面将围绕这一主题展开详细介绍。 ### 一、标题与描述中的“table光棒效果”解读 #### 1.1 表格...