巧用背景颜色和间距快速制作出细边线表格

    在中插入一个表格,若设置其“边框(Border)”为1,预览时其边框线较粗。对于不熟悉HTML语言的网页制作者,如何快速制作出细边线的表格呢?下面,我给大家介绍一个小技巧——巧用背景颜色和间距制作细边线表格。

    以制作一个4行3列、边框线为红色细线的表格为例:

    Step 1 在Dreamweaver的设计视图中插入一个4行3列的表格。

    Step 2 在“属性”面板中设置此表格的属性如下:边距(CellPad)根据需要自行设置值(例如10);间距(CellSpace)为1;边框(Border)为0;背景颜色(Bg Color)为红色。

    Step 3 选中此表格的所有单元格,在“属性”面板中设置所有单元格的属性如下:背景颜色(Bg)为白色或红色以外的颜色。

    最后,保存网页,按F12预览。怎么样,一个4行3列的红色细线表格是不是呈现在你面前?

    另外,如果我们照常想用表格来布局定位,但只要外边框线显示为细线,而内部单元格的分隔线不显示的效果,则可以配合使用嵌套表格。下面以表格外边框线为红色细线为例来说明操作方法:

    Step 1 在Dreamweaver的设计视图插入一个1行1列的表格。

    Step 2 在“属性”面板设置此表格的属性如下:“边距”根据需要自行设置(例如5):“间距”为1:“边框”为0:“背景颜色”为红色。

    Step 3 选中此表格唯一的单元格,在“属性”面板设置此单元格的“背景颜色”为白色或红色以外的其他颜色。

    Step 4 将光标定位在此1行1列的表格中,根据需要插入一个几行几列的嵌套表格,此嵌套表格的“边框”一定设置为0,“边距”和“间距”可以根据需要设置或不设置,其他属性可不进行设置。

    这样,我们就可以在嵌套表格的不同单元格内插入文字、图片等其他网页元素了。

    是否有点动心了?赶快试试吧!

时间: 2024-10-10 10:41:32

巧用背景颜色和间距快速制作出细边线表格的相关文章

巧用背景颜色和间距制细边表格

在Dreamweaver中插入一个表格,若设置其"边框(Border)"为1,预览时其边框线较粗.对于不熟悉HTML语言的网页制作者,如何快速制作出细边线的表格呢?下面,我给大家介绍一个小技巧--巧用背景颜色和间距制作细边线表格. 以制作一个4行3列.边框线为红色细线的表格为例: Step 1 在Dreamweaver的设计视图中插入一个4行3列的表格. Step 2 在"属性"面板中设置此表格的属性如下:边距(cellpadding)根据需要自行设置值(例如10)

Dreamweaver快速制作细边线表格

dreamweaver 在Dreamweaver中插入一个表格,若设置其"边框(Border)"为1,预览时其边框线较粗.对于不熟悉HTML语言的网页制作者,如何快速制作出细边线的表格呢?下面,我给大家介绍一个小技巧--巧用背景颜色和间距制作细边线表格.  以制作一个4行3列.边框线为红色细线的表格为例: Step 1 在Dreamweaver的设计视图中插入一个4行3列的表格. Step 2 在"属性"面板中设置此表格的属性如下:边距(CellPad)根据需要自行

Dreamweaver快速制作细边线表格技巧

在Dreamweaver中插入一个表格,若设置其"边框(Border)"为1,预览时其边框线较粗.对于不熟悉HTML语言的网页制作者,如何快速制作出细边线的表格呢?下面,我给大家介绍一个小技巧--巧用背景颜色和间距制作细边线表格. 以制作一个4行3列.边框线为红色细线的表格为例: Step 1 在Dreamweaver的设计视图中插入一个4行3列的表格. Step 2 在"属性"面板中设置此表格的属性如下:边距(CellPad)根据需要自行设置值(例如10);间距(

Dreamweaver利用背景颜色与间距制作细边的表格

通过利用背景颜色与间距制作细边的表格教程的介绍,大家在Dreamweaver中插入一个表格,若设置其"边框(Border)"为1,预览时其边框线较粗. 以制作一个4行3列.边框线为红色 细线的表格为例: Step 1 在Dreamweaver的设计视图中插入一个4行3列的表格. Step 2 在"属性"面板中设置此表格的属性如下:边距(CellPad)根据需要自行设置值(例如10);间距(CellSpace)为1;边框(Border) 为0;背景颜色(Bg Colo

PS快速制作出超级大片的天空效果图

  这篇教程是向大家介绍PS快速制作出超级大片的天空效果图方法,教程调出来的效果非常漂亮,难道也不是很难,对于喜欢摄影的朋友真的很值得学习,好了,下面我们一起来欣赏下吧! 我们看了很多摄影高手拍摄的风景照片,有一个共同点就是天空给人的感觉非常的梦幻,非常漂亮.那么对于我们普通的摄影爱好者来说,拍出这样的天空首先是时间上可遇不可求,另一个就需要我们掌握更多的还是各种复杂的摄影技术. 那么手机拍摄的天空有没有可能如此层次分明呢? 不行. 哈哈. 用手机拍风景,虽然很难表现出我们想要表达的"震撼&qu

Illustrator快速制作出斜面浮雕效果的小图标教程

给各位Illustrator软件的使用者们来详细的解析分享一下快速制作出斜面浮雕效果的小图标的教程. 教程分享: 1.塑造一个立方体:使用圆角矩形工具绘制一个圆角矩形.一定要按住shift键以约束限制.在你松开鼠标之前,按向上或向下箭头键改变圆角的半径.给这个形状填充30%黑(在颜色面板中,k=30)到60%黑的渐变,在工具箱里使用渐变工具(g)从上向下拉渐变. 设置1px黑色描边.选择这个漂亮的新形状,复制(ctrl+c),贴在前面(ctrl+f),然后这个副本仍然是选中状态,执行"对象&qu

photoshop快速制作出卡通人像效果教程分享

给各位photoshop软件的使用者们来详细的解析分享一下快速制作出卡通人像效果的教程. 教程分享: 原图:   1.先打开原图,然后快速找出边缘线(滤镜-滤镜库-选择艺术效果-选择海报边缘,这步比较重要,影响以后的效果,大家多试试数值) 此处注意,部分MAC用户将遇到打不开滤镜库的,请将cs6/locales/zh_CN/Support Files下的w1o428.dat文件备份后,删除,重启PS变成英文版本即可使用滤镜库了.   2.用黑白两色抽取出人物形象图案(图像-调整-阈值)   3.

photoshop快速制作出闪电效果教程

给各位photoshop软件的使用者们来详细的解析分享一下快速制作出闪电效果的教程. 教程分享: 好了,以上的信息就是小编给各位photoshop的这一款软件的使用者们带来的详细的快速制作出闪电效果的教程解析分享的全部内容了,各位看到这里的使用者们,小编相信你们现在是非常的清楚制作方法了吧,那么各位就快去按照教程自己制作下吧.

用WPS快速制作试卷密封线

  有时为了做一些测试,往往要制作一些试卷,当然,在学校里这种情况是非常常见的.因此,对于老师们来说,制作试卷密封线则是必须要熟练掌握的.具体的操作步骤如下: 第1步:输入文字 从"视图→工具栏"下激活"图形"工具,然后调用单行文字工具,按住鼠标左键在页面上进行拖动出矩形框,输入文字,内容一般是"考生答题不得超过此密封线",然后设置好所需要的字体.字号等格式. 第2步:绘制密封线 密封线可以使用图形工具中的直线工具来完成,注意绘制直线时应该按住S