【引用】博客表格边框的制作及应用

原文地址：博客表格边框的制作及应用原文作者：Good fun

博客表格边框的制作及应用

Good fun编辑

本文是写给初学者看的，高手勿扰！

首先来讲一下，博客本来就携带的表格添加功能

点击日志菜单右上角的全部功能（如下图）：

再点击添加表格按钮（如下图）：

出来如下对话框，按照下面截图设置各参数（本例是一个3行2例的表格设置）

本例设置的表格宽度是400像素，效果如下：

你可以在表格中编辑你的内容（如下效果）：

博客名称博客地址

11111 2222

33333 44444

好了，这是最基本的表格！但你在编辑中汇发现当，这个两列的表格，左右两列的字数不一样的时候，宽度会不均匀了（如下效果）！

123456 123

我要它宽度相等，或者设置宽度的大小比例，那么就的去代码编辑状态更改了！点击全部功能菜单上的这个“<>”符号，去代码编辑状态，代码编辑状态的代码如下：

<TBODY>

<TR>

<TR>

<TR>

下面简单说明一下这个代码：

1、代码中的“cellPadding=1 ”是指单元格边距，可以改变数字“1”来改变表格内内容离边框线的距离！

2、代码“cellSpacing=1”是单元格间距，可以改变数值“1”来改变每个单元格之间的距离！

3、“width=400 ”表格的宽度大小，用像素表示，改变数值“400”改变表格宽度！

4、“border=1”是表格线的粗细，改变数值改变粗细！

5、代码中的每一个“<TR>”是指每一行，有几个“<TR>”就是几行，“<TD>”是列，每个<TR><TD>后面都必须有结束语，即“</TR>”和“</TD>”

了解完基本属性后，继续说怎么设置各列的高度和宽度！

上面说了，每个<TR>是指一行，那么设置行的高度，我们就在它后面添加一个高度属性就可以了，比如：“height=50”,设置列的宽度，我们就在<TD>后面添加宽度属性就可以了，例：“width=300”,我们把三行的高度分别设置为50/30/20像素，两列的宽度设置为300/100像素，看看效果：

设置好后的代码如下：

<TBODY>

效果如下：

你设置宽度后，文字多的那列就不会长了，多的话会自动换行！宽度设置好了，可是这个表格背景是透明的，我想要设置颜色！那么你就的添加背景颜色属性“bgcolor=颜色代码”本例就用白色举例，白色的代码是“#ffffff”，即“bgcolor=#ffffff”,如果你是设置整个表格的背景，你就把它添加到“<TABLE”的后面，如果你是每列都想不同颜色，你就把它添加到“<TD ” 的后面，如下两个我设置的代码，

<TBODY>

效果如下：

请注意看上面的代码，最后的两个<TD>没有设置颜色，所以它显示的是表格的整体背景颜色，就是<TABLE>后面的颜色代码所代表的颜色！

下面说一下，怎么使用图片作为表格的背景呢？

方法很简单，其实就是在表格代码“<TABLE ”后面，添加一个表格背景图片属性代码“background=图片地址”就可以了：

本文最初的表格是三行两列的表格(如下代码)：

<TBODY>

<TR>

<TR>

<TR>

我们给它添加一个表格背景图片属性“background=图片地址”，图片地址，你只要右击博客或者相册的照片，属性就有了！复制黏贴就可以！

就像这张图片，你右击图片，属性后就有如下对话框：

从这个属性对话框，我们知道了这个图片的地址和大小，为了使表格好看，我们把表格的宽度和高度设置为和图片一样，加入图片更改表格宽度和高度后代码如下：

<TABLE cellSpacing=1 cellPadding=1 width=720 height=482 background=http://image32.360doc.com/DownloadImg/2011/07/2018/14485898_4.jpg

border=1>

<TBODY>

<TR>

<TR>

<TR>

效果如下：

我们也可以在表格编辑你的内容，这个代码你也可以作为在图片上写文字用！也可以直接在图片上加图片或者透明flash!如下效果：

11111111 2222222

33333333

这个是三行两列的表格，如果说是一行一列（可以在代码编辑状态对代码通过增删<TR>....</TR>和<TD>......</TD>来增加行和列），边框粗细是“0”，那么效果就只是显示一张图片一样了，但这个图片上面你可以鼠标直接图片，就可以在上面编辑你的文章了！

表格来使图片的拼合没有接缝

新朋友做了音画，图片切割了，可是在博客上传后，图片间有间隙，也可以用表格来使图片的拼合没有接缝，如下图片：

为了音画打开速度快点，把大图切割，本例把上面的图片切割成如下四块：

怎么使这四个图片拼合，没有间隙，那么我们用一个两行两列的表格就可以（这个根据你的实际切割来定义，一般音画只要横着切割就可以了，你可能的切割成好多张小图来拼合，方法一样，你要是只是把音画切割成横长的小图片，你有几张图片，就用多少行一列的表格来定义就可以了），继续我们的话题，两行两列的代码如下（你可以按本文最初添加表格按钮来实现，但这里的表格边框线粗细“border=0"最好设置为0，不然图片拼合处有一条线）：

<TBODY>

<TR>

<TR>

拼合图片的话的加一些单元格图片背景、单元格宽度，单元格高度属性，还的把代码第一行中的三个属性“cellSpacing=1 cellSpacing=1 border=1 ”的值都设置为“0”，本例基本代码如下：

<TBODY>

</TR></TBODY></TABLE></P>

应用到上面的四张图片拼合，更改后代码如下：

<TBODY>

</TR>

</TR></TBODY></TABLE></P>

拼合效果如下：

cript%22%3Bdocument.getElementsByTagName%28%27head%27%29%5B0%5D.appendChild%28s%29%3B%0D%0A">

cript%22%3Bdocument.getElementsByTagName%28%27head%27%29%5B0%5D.appendChild%28s%29%3B%0D%0A">表格在日志边框中的应用：

我们先看一段一行一列的表格基本代码如下：

<TBODY>

<TR>

<TD>

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

</P>

效果如下：

这个最简单的日志边框，你可以在里面直接写文章了，你可以按本文最初的说法，给背景加颜色，但好像太单调，那么我们就在表格内再添加这样一个或者多个表格，使表格多层，看上去更漂亮！

上面这个表格的代码中只有一组“

<TBODY>

<TR>

<TD>

。。。。。。

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

我们把他变成两组（就是两层），代码如下：

<TBODY>

<TR>

<TD>

<TBODY>

<TR>

<TD>

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

</P>

效果如下：

这个是透明背景的，我们给这两层边框分别添加个背景颜色，即添加属性“bgcolor=背景颜色代码”，添加后代码如下：

<TBODY>

<TR>

<TD>

<TBODY>

<TR>

<TD>

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

</P>

效果如下：

本效果的边框线没有设置颜色，是本博客默认的灰色，那么你想设置边框线的颜色，可以添加属性“bordercolor=颜色码”来设置，设置后代码如下(为了更看得清楚，我把边框线粗细设置为4)：

<TBODY>

<TR>

<TD>

<TBODY>

<TR>

效果如下：

也可以分别设置左上边框和右下边框线颜色，使其有个立体投影效果，添加代码属性：（bordercolorlight=颜色码亮边框线 bordercolordark=颜色码暗边框线），本例更改设置后代码如下：

<TBODY>

<TR>

<TD>

<TBODY>

<TR>

也可以按本文最初说的，给表格添加背景图片，边框线大小可以设置为0，当然你不嫌麻烦可以设置大小和颜色，这样更好看！边框层次越多，效果更美观！一般日志边框在9层左右！你可以通过添加几组这个“<TABLE cellSpacing=单元格间距 cellPadding=单元格边距 height=边框高度 width=边框宽度 bgcolor=背景颜色代码（也可以替换成“background=背景图片地址”） bordercolor=边框线颜色代码 border=边框线粗细>

<TBODY>

<TR>

<TD>

（里面的表格代码。。。。）

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

代码来添加层次，然而每一层代码中的代码“cellSpacing=15 cellPadding=1 ”的数字分别可以自己设置，这关系到每一层背景图片露出的边的宽度大小！

下面来看一个8层日志边框的实例：

从外到内素材图片如下：

代码如下：

<TBODY>

<TR>

<TD>

<TBODY>

<TR>

<TD>

<TBODY>

<TR>

<TD>

<TBODY>

<TR>

<TD>

<TBODY>

<TR>

<TD>

<TBODY>

<TR>

<TD>

<TBODY>

<TR>

<TD>

<TBODY>

<TR>

<TD>

效果如下：

这篇文章写了这么多，希望你看明白了，祝你制作愉快！分享请点击引用，引用不得删除此处链接和删改！

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