Dreamweaver html表格边框细线效果设置方法

html-css09

Dreamweaver html表格边框细线效果设置方法,第1张

可能很多除使用Dreamweaver的网友对其中的表格属性的设置还不是很了解,想要让html

表格边框有细线的效果,首先我们得要让边框像素为最小,其次它的内边距等都得为零,一起看看具体的设置方法吧。

Dreamweaver

html

表格边框细线效果怎么实现?

方法一:

1、按图所示,最重要的一点,我没有点实际视图,是方面给大家演示出来的效果。

2、然后可以根据大家的需求来选择。我们直接来看效果吧!

方法二:

1、首先打开Dreamweaver

CS6创建一个表格

2、边框粗细为1像素,单元格边距和间距为零。(默认状态即可)

方法三:

1、我们点实时视图看预览的表格边框比较粗,实际上在浏览器观看也是一样的,我就不贴图了。

2、在table标签里面添加一个style内嵌样式,复制下面的代码。

复制内容到剪贴板

style="

border-collapse:collapse

border-width:thin

border-style:solid"

3、然后让我们开下点下图片里的实际视图。一目了然。按道理说应该完善了。但是如果有需要的话,加点颜色会更好。

总结:以上就是全部的Dreamweaver

html

表格边框细线效果怎么实现相关内容了,不知道大家是否已经了解了呢。

一种细线表格来布局网页使网页布局更加美观呢?今天本人在这就制作一款细线表格形式,现在就把制作的步骤和截图分享给大家,希望对你有所帮助。

工具/原料

dreamweaver cs5

方法/步骤

1/9 分步阅读

启动dreamweaver cs5,执行文件-新建命令,在弹出的新建文档对话框中选择html后点击创建按钮,进入编辑区域。

2/9

执行插入-表格命令,在弹出的表格对话框中设置行数为10,列数为5,表格宽度为80 ,选择百分比,点击确定。

「天猫双11抢先购」怎样做表格在电脑上,抢大额优惠券!

广告

3/9

选中表格,在下面找到属性,设置填充为3,间距为1,对齐方式为居中对齐,边框为0.

电子电表-京东工业品专场,精挑细选赢品质!

广告

4/9

点击代码切换到代码视图,在表格<table>代码中输入bgcolor=“#00ccff”.当然也可以设置自己喜欢的颜色。

用 SpreadJS 表格控件,开发 Excel 共享在线编辑表格怎么弄系统

广告

5/9

点击设计切换到设计视图,就可以看到修改之后的表格背景颜色了,如果想设置其它颜色只要修改代码bgcolor的颜色值就可以了。

6/9

点击代码切换到代码区域,在<tr>中输入代码为 bgcolor="ffffff“,接着对于每一个<tr>都修改过来。

7/9

返回到设计视图,在单元格中输入文字内容即可,并设置文字的对齐方式为居中对齐,或者在<td>中输入代码align="center"。

8/9

接着按f12键进行预览,首先弹出对话框确认是否要进行保存,直接点击是即可,如果不保存的话就无法预览。

9/9

执行文件-另存为命令,在弹出的对话框中输入名称为“细线表格”,找到一个合适的位置进行保存即可。

<table border="1" cellspacing="0" >

<!--border=1设置包括标签table,tr,td的边框粗细,cellspacing合并标签tr,个td的空隙-->

<tr>

<td>1-1</td>

<td>1-2</td>

</tr>

<tr>

<td>2-1</td>

<td>2-2</td>

</tr>

</table>