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

来源：百度文库编辑：偶看新闻时间：2024/04/26 05:41:01

原文地址：博客表格边框的制作及应用原文作者：Good fun
博客表格边框的制作及应用
Good fun编辑
本文是写给初学者看的，高手勿扰！
首先来讲一下，博客本来就携带的表格添加功能
点击日志菜单右上角的全部功能（如下图）：

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

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

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

你可以在表格中编辑你的内容（如下效果）：
博客名称博客地址
11111 2222
33333 44444

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

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

下面简单说明一下这个代码：
1、代码中的“cellPadding=1 ”是指单元格边距，可以改变数字“1”来改变表格内内容离边框线的距离！
2、代码“cellSpacing=1”是单元格间距，可以改变数值“1”来改变每个单元格之间的距离！
3、“width=400 ”表格的宽度大小，用像素表示，改变数值“400”改变表格宽度！
4、“border=1”是表格线的粗细，改变数值改变粗细！
5、代码中的每一个“”是指每一行，有几个“”就是几行，“”是列，每个后面都必须有结束语，即“”和“”
了解完基本属性后，继续说怎么设置各列的高度和宽度！
上面说了，每个是指一行，那么设置行的高度，我们就在它后面添加一个高度属性就可以了，比如：“height=50”,设置列的宽度，我们就在后面添加宽度属性就可以了，例：“width=300”,我们把三行的高度分别设置为50/30/20像素，两列的宽度设置为300/100像素，看看效果：
设置好后的代码如下：

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

效果如下：

请注意看上面的代码，最后的两个没有设置颜色，所以它显示的是表格的整体背景颜色，就是后面的颜色代码所代表的颜色！
下面说一下，怎么使用图片作为表格的背景呢？
方法很简单，其实就是在表格代码“

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

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

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

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

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

',1)">

这个是三行两列的表格，如果说是一行一列（可以在代码编辑状态对代码通过增删....和......来增加行和列），边框粗细是“0”，那么效果就只是显示一张图片一样了，但这个图片上面你可以鼠标直接图片，就可以在上面编辑你的文章了！
表格来使图片的拼合没有接缝
新朋友做了音画，图片切割了，可是在博客上传后，图片间有间隙，也可以用表格来使图片的拼合没有接缝，如下图片：

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

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

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

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

拼合效果如下：

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">表格在日志边框中的应用：
我们先看一段一行一列的表格基本代码如下：

效果如下：

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

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

效果如下：

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

效果如下：

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

效果如下：

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

也可以按本文最初说的，给表格添加背景图片，边框线大小可以设置为0，当然你不嫌麻烦可以设置大小和颜色，这样更好看！边框层次越多，效果更美观！一般日志边框在9层左右！你可以通过添加几组这个“

（里面的表格代码。。。。）
”
代码来添加层次，然而每一层代码中的代码“cellSpacing=15 cellPadding=1 ”的数字分别可以自己设置，这关系到每一层背景图片露出的边的宽度大小！
下面来看一个8层日志边框的实例：
从外到内素材图片如下：

代码如下：

效果如下：

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

怎样制作带有边框的表格？？博客的起源及应用! excle 表格边框的概念? Dreamweaver里怎么改表格的边框的颜色及大小?? 采用三种不同的代码方法制作细边框线的表格网页 Excel表格的应用 word 边框与表格的区别怎么样定义表格的细边框如何使表格的边框消失引用表格“0”的问题？？？ EXCEL表格中表格边框线粗细的设定？ excel表格的应用技巧怎样修改博客的边框大小表格制作的技巧仓库表格的制作设置网页表格边框表格动态边框 CSS表格边框问题如何将dreamweaver生成的表格的边框阴影去掉? 在dreamweaver mx 2004中表格的边框如何变细? 如何给表格的边框设置动态效果网页里怎么做一像素的表格边框？ FRONTPAGE中如何设置虚线表格边框的颜色网页的表格边框如何做得比较细一点?