表格制作全攻略

一、基本概念：

1.代码属性：

（1）起始

<TABLE>表示属性是表格

<TR>表示列或者是另一行

<TD>表示一栏（行或者一个单元格）

（2）终结【起始和终结控制代码是成对的】

</TD></TR></TABLE>，共三对代码：

（3）<border=1>表示框线的粗细，值越大框线越粗

一个单元格的制作代码：

内容

<TR>和</TR>，这一组表示设定一行表格的开始，<TD>和</TD>，这一组表示

是一个格子，

如果在<TR>和</TR>中间加几组<TD>和</TD>，就表示设置了结果单元格。

如设置三个，效果代码：

<TABLE border=1><TR><TD>内容</TD><TD>内容</TD><TD>内容

</TD></TR></TABLE>

内容内容内容

增加一组<TR>和</TR>，表示增加一排表格

如要设置两行表格的效果代码：

<TABLE border=1><TR><TD>内容</TD><TD>内容</TD><TD>内容

</TD></TR><TR><TD>内容</TD><TD>内容</TD><TD>内容

</TD></TR></TABLE>

内容内容内容

二、大小对齐：

1.表格大小控制代码：

宽度：WIDTH 高度：HEIGHT 值越大则表格越大

如设置宽300，高80的表格效果代码：

内容</TD></TR></TABLE>

内容

2.表格内容位置控制代码：

内容居左：align=left 内容居右：align=right

内容居中：align=center 内容居上：VALIGN=TOP

内容居下：VALIGN=BOTTOM

如设置内容居中同时居上的效果代码：

内容

三、框线控制代码：

1.框线颜色：BORDERCOLOR="颜色码"

如设置框线是红色的效果代码：

<TABLE BORDER="5" BORDERCOLOR="#ff0000"><TR><TD>内容

</TD></TR></TABLE>

内容

2.框线粗细：BORDER="粗细值"，"粗细值"越大，框线越粗

如设置框线为10个单位的效果代码：

内容

3.表格栏位格线距：CELLSPACING=10 即相邻两个单元格之间的距离

如设置相邻单元格距离为10的效果代码：

<TABLE cellSpacing=10 align=center border=1><TBODY><TR><TD>内容

</TD><TD>内容</TD></TR></TBODY></TABLE>

内容内容

四、单元格合并控制代码：

1.左右单元格合并【同一行单元格合并】：

colspan 就是“左右栏位合并”

如将第一行三个单元格合并为一个单元格的效果代码：

4 5 6

2.同一列单元格合并：

rowspan 就是“上下栏位合并”

如将第一列上下两个单元格合并的效果代码：

1 2 3

5 6

五、表格背景设置：

1.设定全部表格背景底色控制代码：

bgcolor="颜色码"，代码：

如设置表格背景为红色的效果代码：

内容内容

2.设定一列表格背景色的控制代码：

bgcolor="颜色码"

注：此代码必须加在列的控制代码<TR>中，即为

<TR bgcolor="颜色码">，

如设置第一行的表格为红色的效果代码：

<TD>内容</TD><TD>内容</TD></TR><TR><TD>内容</TD><TD>内容

</TD></TR></TBODY></TABLE>

内容内容

3.设定其中一个单元格背景色的控制代码：

将颜色控制代码【bgColor="颜色码"】加在指定的单元格控制代码中<TD>中。

如设置第一行第一列的单元格为红色的效果代码：

<TBODY><TR><TD bgColor=#ff0000>内容</TD><TD>内容

</TD></TR><TR><TD>内容</TD><TD>内容</TD></TR></TBODY></TABLE>

内容内容

4.用图片作表格背景的控制代码：

将图片地址控制代码<BACKGROUND="图片地址">加到表格代码中，

如设置表格背景颜色一样，可以任意设定表格全部或者某一行、

某一列、某个单元格背景图片

（1）图片设置为整个表格背景：把<BACKGROUND="图址">（加在<TABLE>中），

（2）图片设置为指定一行背景，把<BACKGROUND="图址">（加在<TD>中）

（3）图片设置为指定一列背景：把<BACKGROUND="图址">（加在<TR>中）

如设置整个表格的背景图片效果代码：

<TABLE align=center background="图片地址" WIDTH =“宽度”：

HEIGHT="高度" border=1>

幽谷星尘

如设置两列表格的背景图片不同的效果代码：

<TBODY>

</TBODY></TABLE>

内容内容

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