HTML表格代码如何改变边框粗细

HTML表格代码如何改变边框粗细,第1张

1、事先定义

<table border="2">

<table style="border:2px solid red">

<table style="border-bottom:2px solid red">

2、通过javascript动态设置

<table id="tab1">

<script language="javascript" type="text/javascript">

var obj

obj=document.getElementById("tab1")

obj.style.border="2px solid red"

</script>

可能很多除使用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

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

一般用表格的时候总会给它个border属性,比如:<table border="1">,其效果如下:

可以发现表格的边框好像很宽,当然这里的“很宽”绝对不是表格border的宽,会看到的宽应该是<td>之间有间隙所致。因此只需 要修改表格的cellspacing属性即可,即:<table border="1px" cellspacing="0px">,效果如下:

但是,这个宽度只有一个像素的宽,其实,上图看到的其实是两个像素的宽,为什么呢,这是因为<td>之间的边框没有重合所致。修改表格的border-collapse属性即可,

即<table border="1px" cellspacing="0px" style="border-collapse:collapse">

再给表格加个颜色:

<table border="1px" bordercolor="#000000" cellspacing="0px" style="border-collapse:collapse">


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6142673.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-16
下一篇 2023-03-16

发表评论

登录后才能评论

评论列表(0条)

保存