<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Css制作table细线表格</title>
<style type="text/css" media="screen">
<!-- /* PR-CSS */
table {
border-collapse:collapse; /* 关键属性：合并表格内外边框(其实表格边框有2px，外面1px，里面还有1px哦) */
border:solid #999; /* 设置边框属性；样式(solid=实线)、颜色(#999=灰) */
border-width:1px 0 0 1px; /* 设置边框状粗细：上 右 下 左 = 对应：1px 0 0 1px */
}
table caption {font-size:14px;font-weight:bolder;}
table th,table td {border:solid #999;border-width:0 1px 1px 0;padding:2px;}
tfoot td {text-align:center;}
-->
</style>
</head>
<body>
<table>
<caption>表格头</caption>
<thead>
<tr><th>名称</th><th>网址</th><th>时间</th></tr>
</thead>
<tbody>
<tfoot>
<tr><td colspan="3">下一页</td></tr>
</tfoot>
<tr><th>百度</th><td>http://www.baidu.com</td><td>2007.01.11</td></tr>
<tr><th>百度</th><td>http://www.baidu.com</td><td>2007.01.11</td></tr>
<tr><th>百度</th><td>http://www.baidu.com</td><td>2007.01.11</td></tr>
</tbody>
</table>
</body>
</html>
分享到：
相关推荐
在CSS中创建细线表格是网页设计中一个常见的需求，主要目的是为了使表格看起来更加整洁、专业。在本文中，我们将深入探讨如何使用CSS来实现这样的效果，特别是通过`border-collapse`属性和边框属性缩写技巧。 1. **...
本篇我们将深入探讨如何利用CSS生成精美细线Table表格，以提升网页内容的可读性和美观度。 首先，我们需要了解HTML表格的基本结构。一个基本的HTML表格由`<table>`元素开始，内部包含`<tr>`（行）元素，每行中又有`...
首先，要创建细线表格，我们需要引入一个预定义了表格样式的CSS文件，例如名为`table.css`的文件。在HTML文档的`<head>`部分，添加以下代码来引入这个CSS文件： ```html <link rel="stylesheet" type="text/css" ...
在第一种方法中，我们使用table标签的border、cellpadding和cellspacing属性来实现细线表格。下面是相关的代码： ```html <table width="600" border="0" cellpadding="0" cellspacing="1" bgcolor="#0000FF"> ...
通过对“table细线样式”的深入探讨，我们了解到通过合理的CSS属性设置，可以有效地提升表格的视觉效果。无论是通过`border-collapse`合并边框，还是利用单元格背景色差来模拟边框，都可以实现优雅而简洁的细线效果...
本教程将详细介绍如何使用CSS来创建符合Web标准的细线表格，使表格既美观又符合现代网页设计的要求。 首先，我们需要了解CSS中的几个关键属性来实现细线表格的效果。`border`属性用于设置元素的边框，`border-width...
4. 细线表格的制作步骤：细线表格的制作通常包括以下步骤：首先，设置table的背景色；然后，给各个单元格td设置背景色，这通常是表格整体的背景色；最后，设置table的border为"0"以及cellspacing为"1"，利用CSS的...
css创意ul+li实现的细线表格效果，不用table，是一种非常有创意的网页设计方法。通过使用ul和li标签，可以创建一个细线表格的效果，而不需要使用传统的table标签。 ul和li标签 在HTML中，ul标签用于定义无序列表...
本篇文章将深入探讨如何使用CSS来创建兼容浏览器的细线表格设计。 首先，要理解表格边框的兼容性挑战。在不同浏览器中，表格边框的渲染可能会有所不同，这主要是因为不同的浏览器对CSS标准的实现可能有轻微的差异。...
在本文中，我们将深入探讨如何使用Web标准中的CSS来实现细线表格。 首先，我们要了解`border-collapse`属性，这是实现细线表格的关键。`border-collapse`用于控制表格单元格边框的合并方式。当设置为`collapse`时，...
现在在所谓“div css”的风气下，很多人放弃了表格，其实应该让每个标签物尽其用，在表现数据的地方，我们还是应该使用table。但是，我们在建立table的时候，会发现它会具有一些默认的样式，比如单元格td之间会有...
6. **Flexbox与Grid布局**：虽然表格自身使用`<table>`元素，但可以结合Flexbox或CSS Grid来布局辅助元素，如表头的排序指示符或页脚的分页控件。 7. **响应式设计**：使用媒体查询`@media`，可以实现表格在不同...
这样，看似没有边框的表格实际上通过背景色的差异显示出了1像素的细线，形成边框效果。 第二种方法更依赖于CSS，它建议将表格的 `border` 设置为0，然后通过CSS分别给表格添加 `border-top` 和 `border-left`，以及...
本篇文章将详细介绍如何在Dreamweaver中不用CSS样式为表格添加细线边框。 首先，我们需要理解HTML表格的基本结构。表格由`<table>`元素定义，`<tr>`元素表示表格行，`<td>`元素表示单元格。要设置表格的边框，我们...
2. 通过调整CSS样式实现细线表格效果。 3. 使用`page-break-after`属性控制页面分隔。 4. 在`<thead>`中设置`display: table-header-group`以保证每页都有表头。 遵循这些步骤，你可以创建一个既美观又实用的分页...