巧用日志编辑器(二)
-----------之如何巧妙改变表格的大小及表格内的填充颜色
先来看表格的效果和代码,此表格为黑色的边框线条,表格内部填充颜色为透明,即你的网页背景颜色是什么颜色,表格内部的颜色也随之一样。当然,你可以根据自己博客网页的颜色风格来搭配表格边框线条的颜色。具体操作请参照巧用日志编辑器(一)之如何制作表格 有时候我们还需要把表格内部的颜色透明改为不透明,改变表格内部的填充颜色,及表格的大小以适应我们博客的颜色搭配及版式需求。
本节我们就看看如何用日志编辑器来巧妙的改变表格的大小及内部的填充颜色。
表格效果:
上述表格代码:
<TABLE borderColor=#000000 cellSpacing=1 cellPadding=1 width="60%" border=1> <TBODY> <TR> <TD> </TD> <TD> </TD> <TD> </TD></TR> <TR> <TD> </TD> <TD> </TD> <TD> </TD></TR> <TR> <TD> </TD> <TD> </TD> <TD> </TD></TR> <TR> <TD> </TD> <TD> </TD> <TD> </TD></TR></TBODY></TABLE>
改变表格内部的填充颜色,只需在上述代码“ border=1> ”前面加上代码" bgColor=#BFEFFF ”即可。注意代码加入后此代码的前后都要有一个空格。 (bgColor=#BFEFFF是颜色的命令,只需改变“#”后面的
颜色代码“ BFEFFF ” 即可)颜色代码请点击按钮查看 例:我改变了表格的线条颜色及内部填充颜色后代码如下
<TABLE borderColor=#0000cc cellSpacing=1 cellPadding=1 width="60%" bgColor=#bfefff border=1> <TBODY> <TR> <TD> </TD> <TD> </TD> <TD> </TD></TR> <TR> <TD> </TD> <TD> </TD> <TD> </TD></TR> <TR> <TD> </TD> <TD> </TD> <TD> </TD></TR> <TR> <TD> </TD> <TD> </TD> <TD> </TD></TR></TBODY></TABLE>
说明:注意我用特殊颜色做的标记出就是改变表格的线条颜色及内部填充颜色的要点。
borderColor=#0000cc 改变表格线条的颜色
bgColor=#bfefff 这个就是改变表格的内部填充颜色
颜色代码请点击按钮查看 要注意这两个代码在编辑时所要添加的位置,下面看看改变后的实际效果:
原来的黑色线条变成了蓝色,原来的填充颜色为透明,现在有了淡淡的填充颜色。
要改变表格的大小就相对比较简单了,我们在编辑好的表格上面用鼠标单击一下表格的线条,你会发现表格四周对称的多出了几个控制点,你鼠标准确的置于控制点正上面的时候,鼠标的小箭头就变成了一个两端都有的小箭头,点击鼠标左键进行拖动时,你就可以看到表格随之的变化了。
还有的时候我们需要将表格控制在一个限定的尺寸,那我们就还需要添加一个代码:style="WIDTH: 400px; HEIGHT: 200px" 。(两个数值400 和200 分别表示表格的宽和高) 添加位置在表格代码第一行 <TABLE borderColor=#0000cc cellSpacing=1 cellPadding=1 width="60%" bgColor=#bfefff border=1> 的 <TABLE 后面 。
注意添加前后都要有一个空格的距离哦,当然,还有那两个引号“” 一个都不能少。
例如我加入后的代码为:
<TABLE style= "WIDTH: 400px; HEIGHT: 200px" borderColor=#0000cc cellSpacing=1 cellPadding=1 bgColor=#bfefff border=1> <TBODY> <TR> <TD> </TD> <TD> </TD> <TD> </TD></TR> <TR> <TD> </TD> <TD> </TD> <TD> </TD></TR> <TR> <TD> </TD> <TD> </TD> <TD> </TD></TR> <TR> <TD> </TD> <TD> </TD> <TD> </TD></TR></TBODY></TABLE>
实际效果为:
表格的大小是不是有了变化?
会了吗?相信聪明的你一定一看就会了。 |
评论