CSS美化HTML表格：单像素边框与背景图示例

5星 · 超过95%的资源需积分: 40 93 浏览量更新于2024-09-08 收藏 81KB DOCX 举报

在HTML和CSS中，表格是网页设计中的常见元素，特别是在需要呈现数据或者结构化信息时。本文档主要介绍两种常用的表格样式：单像素边框CSS表格和带背景图的CSS样式表格。 1. 单像素边框CSS表格这种表格样式注重细节和清晰度，适合那些对HTML样式有较高要求的项目。CSS代码定义了一个名为`.gridtable`的类，用于创建具有统一外观的表格。首先，你需要在文档的<head>部分或外部样式表中添加以下样式： ```css .gridtable { font-family: verdana, arial, sans-serif; font-size: 11px; color: #333333; border-width: 1px; border-color: #666666; border-collapse: collapse; } .gridtable th { border-width: 1px; padding: 8px; border-style: solid; border-color: #666666; background-color: #dedede; } .gridtable td { border-width: 1px; padding: 8px; border-style: solid; border-color: #666666; background-color: #ffffff; } ``` 通过这些样式，表格会呈现出淡灰色的表头（`.gridtableth`），白色的基础单元格（`.gridtabletd`），以及统一的1像素边框，整体风格简洁且专业。表格结构由`<table>`标签创建，例如： ```html <table class="gridtable"> <tr> <th>InfoHeader1</th> <th>InfoHeader2</th> <th>InfoHeader3</th> </tr> <tr> <td>Text1A</td> <td>Text1B</td> <td>Text1C</td> </tr> <tr> <td>Text2A</td> <td>Text2B</td> <td>Text2C</td> </tr> </table> ``` 2. 带背景图的CSS样式表格此样式在单像素边框的基础上增加了视觉层次感，通过在单元格中添加背景图片来实现。首先，你需要准备两个图片文件（如`cell-blue.jpg`和`cell-grey.jpg`），并确保它们放在项目的正确路径下。然后，你可以修改以下代码来应用背景图片： ```css .gridtable td { /* ...其他样式... */ background-image: url('cell-blue.jpg'); /* 或者 'cell-grey.jpg'，根据需要切换 */ background-repeat: no-repeat; /* 防止背景图片重复 */ background-position: center; /* 图片居中显示 */ /* 如果背景图片大小不一，可以添加background-size: cover; 使图片填充整个单元格 */ } ``` 将背景图片的URL替换为你实际的图片路径，并确保`<table>`中的单元格使用`<td>`标签，这样就可以创建一个带有背景图片的表格了。总结来说，掌握这些基础的HTML和CSS表格样式，可以帮助你创建出美观且功能性的表格布局，适应不同的项目需求。对于提高网站的专业性和用户体验至关重要。

原文地址: http://blog.csdn.net/nightelve/article/details/7957726/

1. 单像素边框 CSS 表格

这是一个很常用的表格样式。

源代码：

table.gridtable {

font-family: verdana,arial,sans-serif;

font-size:11px;

color:#333333;

border-width: 1px;

border-color: #666666;

border-collapse: collapse;

}

table.gridtable th {

border-width: 1px;

padding: 8px;

border-style: solid;

border-color: #666666;

下载后可阅读完整内容，剩余7页未读，立即下载

Jerry_蓝

粉丝: 263
资源: 3

CSS美化HTML表格：单像素边框与背景图示例

HTML常用table样式

固定html表(table)头的html/css/js源码

HTML表格代码的示例

Table常用的几种CSS样式

Table CSS样式

table 细线 样式

html标记大全 有marquee，table，form等最常用标记。

好看的TABLE样式

table表格的一些常用属性介绍

css常用样式

最新资源

table 细线样式

html标记大全有marquee，table，form等最常用标记。