表格绘制全功略

2007-11-30 15:52:39| 分类：表格素材 |举报 |字号订阅

素材:引用博导-snail 的表格绘制全功略

从最基本代码开始；解剖表格代码；从简单到复杂的表格制作功略；

1、基本表格的制作

a、基本表格代码

</TABLE>

效果：

添加文字

BORDER=1 这参数是设定此表格的框线粗细为 1；更改数字可以改变表格线条粗细；<TR></TR>是设定一横列的开始。一组<TD></TD>则是设定一个栏位；

b、分列效果

</TABLE>

效果：

文字文字文字

注意看：<TR></TR>没有增加，<TD></TD>却增加了二组

c、分裂在分行：

</TABLE>

结果：

文字文字文字

注意看多了什么

2、合并表格的操作

1、左右栏位合并:如何将 1、2、3 格通通合并变成一大格

代码：

</TABLE>

效果：

添加文字

添加文字添加文字添加文字

该栏的<TD>标签还多了一个陌生的脸孔COLSPAN="3"，这就是“左右栏位合并”的属性，COLSPAN="3"的意思就是“这个栏位左右横跨了3个栏位”，本来的两个<TD>都可以省掉了，因为都被并掉了嘛！

代码绘制表格就是这样的；一个一个接着画；不象word里的操作；建议大家在word里做好；再传到这边；相关资料入门篇里有；

2、合并行的操作；文字添加处用数字代替了哈！

代码：

</TABLE>

效果：

123

将1与4合并成一个栏位，那么被牺牲的是哪一个栏位呢？没错就是下面那一个倒楣的4，我们看看上图，果然4已经删掉了，而在1的<TD>标签中则多了个生面孔ROWSPAN，这就是“上下栏位合并”的属性，ROWSPAN=2的意思就是“这个栏位上下连跨了2个栏位”。

（3）、表格属性的设置

1、高和宽

基本设置代码：

</TABLE>

效果：

文字

2、文字的位置设置；

代码：

</TABLE>

效果：

文字

align表示对齐，可以是：left 左边，right右边；效果自己试哈！

3、表格靠上靠下居中设置：

</TABLE>

效果：

添加文字

注意：利用 VALIGN=TOP 这种属性即可让表格内物件靠上方对齐。VALIGN=MIDDLE可以让表格中物件垂直置中（预设值），VALIGN=BOTTOM可以H让表格中物件靠下方。

4、表格的背景设置

代码：

</TABLE>

效果：

文字文字

将BGCOLOR="颜色码"加在<TR>中，可以指定“一列”的背景颜色

代码：

</TABLE>

效果：

添加文字添加文字

大家记得一条；把各种属性往里面套就是了；但要注意位置和规则；

将BGCOLOR="颜色码"加在<TD>中，可以指定“一栏”的背景颜色：

如果制定某格加背景的话；

代码：

</TABLE>

效果：

添加文字添加文字

博导有个疑问，就是可以不可以以图片作为表格背景；

5、表格颜色设置：

代码：

</TABLE>

效果：

文字

利用BORDERCOLOR="颜色码"就行了

6、另外，我们也可以设定表格的阴影、亮面颜色，让表格看起来更有立体感喔！只要利用 BORDERCOLORLIGHT="#颜色码"（亮面设定） BORDERCOLORDARK="颜色码"（暗面设定）就行了。

代码：

<TR><TD>输入你要加入的文字</TD></TR>

</TABLE>

效果：

输入你要加入的文字

6、设置距离

利用CELLPADDING属性自由设定表格内文距离格线的距离，一般而言内定值为2，不过我建议设定为4比较漂亮。

代码：

</TABLE>

效果：

添加文字添加文字

利用CELLSPACING属性设定表格栏位格线之间的距离。一般而言内定值为2，不过我通常习惯设为 0 。

代码：

<TR><TD>文字添加处</TD><TD>文字添加处</TD></TR>

</TABLE>

效果：

文字添加处文字添加处

把以上的代码做一次大规模的联合兵团大战；博导认为是可以做一个自己满意的表格的；资料来源以各个前辈的

教材；博导进行了一点整理完善；希望对大家有用；以上所使用代码是博导验证的；没有任何错误；大家注意了解基本代码哈；

博导并不懂这些代码；让我写的话；说实话；写不出来；但我知道；这个代码可以做什么；就好比用人一；

只要知道他能做没；就好安排工作了；

我们提出：做博客做学习不懂开始；就是这个道理；

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。