如何制作一个非1x1的表格的1px

不过制作非1x1的表格（比如2x2）就麻烦一点，因为如果直接定义td样式： teal，显示效果如下：

你会发现表格的外框是1px，但是内框变成了2px。 这是由于叠加造成的。 为了解决这个问题我们可以这样做：

首先定义td的样式： :#solid;-width:0 1 1 0，使表格显示为：

然后为表格定义样式::#solid;-width:1 0 0 1，这样就可以做成一个完整的1px表格了。

示例 2：带有粗边框的 1px 表格

这个表格的内网格是1px，外边框是3px。 有了例1的基础，做起来并不难。 只需修改-width 值即可。

表格使用的样式代码为： :;-width:3 2 2 3

用于 td 的样式代码为： :;-width:0 1 1 0

示例 3：虚线框表

方法与例1类似，但-style由solid改为。

用于表格的样式代码为： :black ;-width:1 0 0 1

用于 td 的样式代码为： :black ;-width:0 1 1 0

示例 4：虚线边框表格

请注意，虚线 ( ) 的最小像素大小为 2。

用于表格的样式的代码是： :green ;-width:2 0 0 2

用于 td 的样式代码为： :green ;-width:0 2 2 0

示例5：双线边框表

请注意，双线 () 的最小像素大小为 3。

用于表格的样式的代码是： :teal 4

用于 td 的样式代码是： :teal 1 Solid

例6：外框表

表格所用样式的代码为:: 3

td使用的样式的代码是::

例7：内嵌外框表

表格所用样式的代码为:: 3 inset

td使用的样式的代码是::

例8：脊架桌子

表格所用样式的代码是： :# 3 ridge

td使用的样式的代码是::

例9：综合利用一

该表格的外框使用脊线，内单元边框使用凹槽线。 注意插入表时设置为1。

表格所用样式的代码为:: 4 ridge

用于 td 的样式代码是： :navy 1

实施例10：综合利用2

别以为这是九张桌子。 事实上，它们是表格中的九个单元格。 由于表格的外边框为0，所以你看不到它。

只需对 td 使用 style::3，并且不要忘记将 table 设置为 1。

例11：三者综合运用

该表格的上、下、左、右边框采用不同的样式，您可以根据自己的喜好进行更改。

表格所用样式的代码为::4;-style:

用于 td 的样式代码是： :1 Solid

例12：四项综合运用

这是一个 1px 的双边框表格。 与例5相比，看起来更加精致。 具体方法如下：

1、首先制作一个1x1 1px的表格，并将其设置为1；

2、再制作一个3x3 1px的表格，将宽度和宽度都设置为100%；

3、只需将后面制作的表格插入到之前制作的表格中即可。

示例 13：背景边框一：

通过改变该值可以将背景做成边框。 上表制作如下：

1.首先制作一个1x1的表格，设置背景，并将值设置为3；

2、再制作一个3x3 1px的表格，宽度和宽度都设置为100%；

3、只需将后面制作的表格插入到之前制作的表格中即可。

如果使用变色gif动画，表格的边框会自动连续变色。

示例 14：背景边框二

这个表格的制作方法和上一个类似，你一定能猜出来！

示例 15：3D 边框表

这是一个带有3D边框效果的表格，制作起来有点棘手。

我们先来学习一下1x1：

第一步：

创建两个样式如下：

.out{-width:1px;-style:solid;-color:# # # #}

.in{-宽度:1px;-样式:实心;-颜色:# # # #;:#}

第二步：

创建一个1x1的表格，高和宽均为100，设置为1，如下图：

第三步：

整个表格（即表格标签）使用 out 样式，单元格（即 td 标签）使用 in 样式。 现在保存并查看效果。 和下面的一样吗？

一旦您学会了如何创建 1x1 3D 边框表，创建此示例的效果并不困难。 读者不妨自行探索。

概括

前面我们举了一些如何使用CSS来美化表格边框的例子。 你可以尝试不同的组合，做出更漂亮的桌子！