欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
> CSS如何设置table表格边框样式
对table设置边框，分为几种情况：
1、只对table设置边框
2、对td设置边框
3、对table和td技巧性设置表格边框
4、对table和td设置背景，实现完美表格边框
以下对以上几种实现html 表格进行讲解与案例演示。为了便于观察，divcss5均设置所有案例表格为1px实线红色为例；为400表格为三列三行，对以上四种情况表格外层加个，分别为&.table-a&、&.table-b&、&.table-c&、&.table-d&。
一、只对表格table标签设置边框
只对table标签设置（边框）样式，将让此表格最外层table一个边框，而表格内部不产生边框样式。
案例详细如下：
&.table-a&table{border:1px&solid&#F00}&/*&：只对table标签设置红色边框样式&*/&&
2、对应片段
&class=&table-a&&&width=&400&&border=&0&&cellspacing=&0&&cellpadding=&0&&&&width=&105&站名&&width=&181&网址&&width=&112&说明&&&DIVCSS5&&CSS学习&&&CSS5&.cn&CSS切图&&&&
3、案例截图
对table设置边框案例截图-仅对设置边框
4、在线演示
二、对td设置边框
对table表格td设置边框样式，表格对象内td将实现边框样式，但中间部分td会导致出现双边框。
详细案例教程如下：
1、对应css代码
&.table-b&table&td{border:1px&solid&#F00}&/*&css注释：只对table&td标签设置红色边框样式&*/&&
2、对应片段
&class=&table-b&&&width=&400&&border=&0&&cellspacing=&0&&cellpadding=&0&&&&width=&105&站名&&width=&181&网址&&width=&112&说明&&&DIVCSS5&&CSS学习&&&CSS5&.cn&CSS切图&&&
3、案例截图
对td设置边框后，中间出现双边框样式 案例截图
4、在线演示
三、对table和td技巧性设置表格边框
如上第二点，只对表格对象td设置单一边框样式，中间部分td与td标签之间就会出现双边框现象。
解决方法：对td只设置两个边的边框，对table也设置两个边的边框样式。
解释：对td设置左与上边框，这样td与td相邻就会只出现单一边框样式，这样就会出现表格右侧和下部没有边框，这个时候我们设置table右和下 边框解决显示右侧和下侧td剩下未显示边框。
1、对应css代码：
&.table-c&table{border-right:1px&solid&#F00;border-bottom:1px&solid&#F00}&.table-c&table&td{border-left:1px&solid&#F00;border-top:1px&solid&#F00}&/*&：&只对table&td设置左与上边框；&对table设置右与下边框；&为了便于截图，我们将css&注释说明换行排版&*/&&
2、对应html源代码片段：
&class=&table-c&&&width=&400&&border=&0&&cellspacing=&0&&cellpadding=&0&&&&width=&105&站名&&width=&181&网址&&width=&112&说明&&&DIVCSS5&&CSS学习&&&CSS5&.cn&CSS切图&&&
3、表格边框实现案例截图
CSS完美实现表格边框样式截图
4、在线演示
推荐此方法设置table表格边框样式。
四、对table和td设置背景，实现完美表格边框
1、基础设置
1）、先设置table 为红色
2）、设置table单元之间间距为1
使用DW软件辅助设置table表格单元间距为1，具体DW软件可视化操作步骤简要说明，首先（视图模式）选中表格后，对应DW软件编辑窗口底部会&属性&面板会出现对应table表格属性设置地方，我们将&间隔&填写为&1&。这个时候我们会看到table表格标签里cellspacing值为&1&（cellspacing=&1&）。
借助DW软件设置表格单元之间间距
直接对&table&标签内cellspacing=&1&即可，得到：
&width=&400&&border=&0&&cellspacing=&1&&cellpadding=&0&&
3）、设置table td背景为白色
2、css代码：
&.table-d&table{&background:#F00}&.table-d&table&td{&background:#FFF}&/*&css注释：设置table背景为红色，td背景为白色&*/&&
3、对应html源代码：
&class=&table-d&&&width=&400&&border=&0&&cellspacing=&1&&cellpadding=&0&&&&width=&105&站名&&width=&181&网址&&width=&112&说明&&&DIVCSS5&&CSS学习&&&CSS5&.cn&CSS切图&&&&
4、表格边框案例截图
设置表格背景颜色实现边框样式截图
五、css table表格边框实现总结
以上四种方式实现table表格边框样式方法，推荐使用第三和第四种方法来解决表格边框样式。希望DIVCSS5整理总结html table边框布局方法对大家有帮助并能掌握，平时需要时灵活运用。
所有方式在线演示：
扩展相关CSS教程阅读：
6、&如需转载，请注明文章出处和来源网址：我要分享到：上一篇： 下一篇： 必备CSS教程 Essential CSS Tutorials• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • ()• • ()• ()• • • • • • • • • • • • • • • • 必备HTML基础教程 Essential HTML Tutorials •
• () • () • () •
• () •
• () •
• 如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期： 15:29
原创：本文 DIVCSS5版权所有。最新文章NEWS• • • • • • • • • • CSS EFFECTS相关文章RELATED• • • • • • • • • • 热点文章HOT
学习与资源分享平台DW如何在表格的背景图片的任意位置加入导航字？_百度知道
DW如何在表格的背景图片的任意位置加入导航字？
如何在表格的背景图片的任意位置加入导航字：DW中。所以问下大家，背景图片就跟着拆分成了一片一片的了，可是拆分表格后。我试着做了，如何在一张图片的任意位置加入导航字，用移动行列调整字的问题，然后打字，可以把表格分为多行多列？我问了别人说我做博客模版DW中？我是超新手
或者提供DW相关的论坛也行。
提问者采纳
&lt在表格中加一个&#47：&/&tr&tr&也可以把样式单独来写，如;这里是导航文字&/&td&&td&&gt:30这里是导航文字&/div&gt，把图片放入div中;//table&gt、左比如;td&&&&gt，然后给div设置上下左右的边距就好了;&&quot:30 margin-div&margin-top:30px 30px 20px 30div style=&div style=&&td&&&lt。样式的边距的顺序是 上;&&tr&gt、下、右：&&/tr&/table&table&table&gt
提问者评价
其他类似问题
为您推荐：
您可能关注的推广回答者：
背景图片的相关知识
其他1条回答
可以添加图片地图
相当于热区 不过相对位置要设置好你的问题需要在嵌套一个表格
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁DW中怎么在图片上写文字啊?一写就直接把整个布局弄乱了，怎么把图片弄成背景啊?_百度知道
DW中怎么在图片上写文字啊?一写就直接把整个布局弄乱了，怎么把图片弄成背景啊?
提问者采纳
td&gt:300table width=&
&&banner1;0&quot:url(images/tr&或者&&/ cellspacing=&td style=&quot.jpg) no-div&div style=&/ height=&
&lt:500sdgagsadgsad&&0&table&gt.jpg) no-0&dsgsdgs&&banner1;/500&300& cellpadding=&&#47&tr& border=&quot:url(images/&&
其他类似问题
为您推荐：
其他1条回答
background在写文字的标签中加上下面这样的代码;&height：&height:200px:url(picture：style=&&quot:200弄成背景；height.gif) no-repeat.gif)括号中写上图片的路径;div style=&quot.gif) no-width。例;其中width,在图片上写文字&lt:200background:200div&可设为图片的高度:url(picture:200可设为你的图片的宽度;&#47:200px；url(&width
您可能关注的推广回答者：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁PS切片出来的图片导入DW后，有几张图片需要换成背景图片，并且位置和大小固定，能输入文字，如何操作呢？_百度知道
PS切片出来的图片导入DW后，有几张图片需要换成背景图片，并且位置和大小固定，能输入文字，如何操作呢？
有朋友和我说用CSS来做，也有朋友说用表格来做缉笭光蝗叱豪癸通含坤，还有朋友发了代码给我，但是我需要详细过程的，我在网上找了很多教程，但是都是零碎的一些知识，而且很难懂，有哪位朋友可以指点一下吗？万分感谢！
提问者采纳
其实无论用表格或者css来做都可以，不过现在一般不提倡使用表格进行布局，个人还是建议使用css。方法也很简单：1.定义一个css类，设置宽度（width）、高度（height）以及背景（background）；这里注意设置一下背景位置（background-position）及重复（background-repeat）的问题，虽然一般默认也不会出现太大问题，不过还是值得注意的；2.在需要使用背景图的标签里引用刚才定义的那个css类（class=&XXX&），这样就可以了。话说楼主是页面的新手？这是最基础的说……如果还有什么问题的话，虽然某并不是什么缉笭光蝗叱豪癸通含坤高手，但也随时欢迎交流，QQ：
提问者评价
感谢楼主的热心回答，对我的帮助很大！
其他类似问题
为您推荐：
其他3条回答
PS切片后，保存为网页文件，其实这个网页文件中的图片就是以表格的形式显示，一张图片就是一个单元格。选中你要换成背景的图片，删除，然后设置该单元格的大小（长与宽）注意：大小与图片大小一致。然后选中该单元格，右缉笭光蝗叱豪癸通含坤键→编辑标签→浏览器特定的→背景图像→然后你就懂了。
先插入一个表格，设置好单元格的大小跟图片大小一样，在表格的属性栏中选中背景图片，之后在单元格中写入文字就好了
好像很复杂···········
您可能关注的推广
背景图片的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁