在从事web网页程序开发时,table是我们常用的html标签,为了页面美观,细线表格是web开发中基础的要求,也不知道当初制定html标准时是怎么想的,明明设置了table的border="1",非要将表格边框实际大小变成了2px,搞得每次用时还得重新写css进行控制.下边就总结两种在网上搜集的方法,以备随时查阅:
一、通过表格背景颜色和单元格背景颜色结合，将表格边框设置为1px
<table width="95%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#000000">
<tr>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
</table>
二、完全通过css进行控制
css代码：
<style type="text/css">
<!--
.table01{
border-collapse:collapse;
}
.td01{
background:#FFF;
border:solid 1px #f90;
height:22px;
}
-->
</style>
html代码：
<table width="95%" align="center" class="table01">
<tr>
<td class="td01"> </td>
<td class="td01"> </td>
<td class="td01"> </td>
</tr>
<tr>
<td class="td01"> </td>
<td class="td01"> </td>
<td class="td01"> </td>
</tr>
<tr>
<td class="td01"> </td>
<td class="td01"> </td>
<td class="td01"> </td>
</tr>
</table>
这种方法我采用的是类选择器，使用标签选择器也可实现同样效果
两种方法的优劣自己评估去吧，自由选用~~
参考文章：http://leotheme.cn/javascript/thin-table.html
http://www.mangguo.org/thin-border-table-browser-compatible-writing-method/
分享到：
相关推荐
以下是对细线表格制作原理的详细解释。 首先，我们要了解HTML表格的基本结构。一个表格由`<table>`标签定义，其中包含`<tr>`（行）标签，`<tr>`标签内包含`<td>`（单元格）或`<th>`（表头单元格）标签。表格的样式...
在CSS中，制作细线表格是一项常见的任务，它可以使数据展示更加清晰且美观。下面将详细介绍如何使用CSS来优化和创建细线表格，以及其中涉及的关键属性。 首先，要实现细线表格，一个非常关键的属性是`border-...
本教程将详细介绍如何使用CSS来创建符合Web标准的细线表格，使表格既美观又符合现代网页设计的要求。 首先，我们需要了解CSS中的几个关键属性来实现细线表格的效果。`border`属性用于设置元素的边框，`border-width...
HTML小技巧：将table边框改为细线 HTML制作新手在用TABLE表格时，会碰到如何改变边线粗线
- **细线表格**：通过插入1×1表格，设置边框、间距、边距为0，背景色为细线颜色，然后在代码视图中移除<td></td>中的 。 - **隔距表格**：插入1×4表格，设置间距、边距和边框，再在每个单元格内插入1×1...
- **细线表格制作**: - 要创建具有细边框的表格，可以将`cellspacing`设置为`1`，`cellpadding`和`border`设置为`0`，并通过调整背景颜色来达到美观的效果。 - **数据库操作权限问题**: - 在进行数据库添加、修改...
5. **细线表格制作技巧**：通过设置`cellspacing`、`cellpadding`和`border`属性，结合不同的背景颜色来实现细线表格效果。 6. **数据库操作权限问题**：在进行数据库中的添加、修改、删除操作时遇到权限不足的问题...
在日常工作中，细线表格以其清晰的线条划分和精细的布局，帮助用户高效地展示和处理数据。本教程将指导用户如何在Excel等表格软件中调整线条属性，精确设置边框样式，以及通过巧妙的单元格间距调整，打造专业且整洁...
3. 另类圆角表格制作 圆角表格通常需要利用HTML表格的嵌套和单元格合并特性来实现。以下代码展示了如何创建一个具有圆角效果的表格，通过调整单元格的高度和宽度以及背景颜色，模拟出圆角的视觉效果： ``` <!-- 在...
本文档主要介绍了 Dreamweaver 中改变表格边框颜色的方法，涉及到表格的边框颜色、背景颜色、边距、间距等属性的设置，并提供了多种方法来实现细线表格的制作。 在 Dreamweaver 中插入一个表格，若设置其“边框”为...
课堂练习部分提供了实际操作的机会，如使用表格构建“火百合”主页布局，通过设置间距和背景颜色制作细线表格，以及合并和拆分单元格，这些都是创建复杂网页布局的关键技巧。合并单元格能将多个单元格合并为一个，而...
5. 在表格的第二行从左至右绘制一条细线。这条线的宽度可以根据个人需求调整。 ##### 步骤4：完成三线表 1. 完成以上步骤后，点击表格外的任意空白处或按ESC键退出编辑模式。 2. 这样就完成了三线表的制作。 ####...
2. **制作细线表格**：通过设置表格的间距和背景颜色来实现细线效果。 3. **制作嵌套表格**：在一个大表格的某个单元格里插入一个新的表格，以实现复杂的布局需求。 4. **制作圆角表格**：使网页看起来更加柔和、...
大家都知道，所谓细线边框，大体外观上就是一个简单的 1 行 1 列表格，那么我们直接把表格对象的 border 值设定为 1 不就可以了吗？ 不可以，因为简单的边框置 1 达不到效果。我们需要通过对表格的“巧妙”设置来...
1. 制作细线表格：在常规方法中，细线表格可以通过设置表格的间距和背景颜色实现。然而，当背景需要使用图片时，这种方法受限。通过设置表格边框为1px，间距为0，并在CSS中添加“border-collapse: collapse;”属性，...