对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解。

一般我们用表格的时候总会给它个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://www.alixixi.com/web/a/2009082657736.shtml

html表格table设置边框的更多相关文章

  1. table 设置边框

    本文引自:https://www.cnblogs.com/leona-d/p/6125896.html 示例代码: <!DOCTYPE html> <html lang=" ...

  2. css如何让表格table的边框为1像素呢

    在Html中使用table是网页制作中必不可缺的一部分,如果直接给css设置table里面的td边框为1像素的话,那么实际我们从网页上看到的效果却不是1像素. 那么我们怎么用css让table的边框为 ...

  3. 关于表格table嵌套,边框合并问题的解决方法,table嵌套(转)

    原文地址:http://www.cnblogs.com/zhangym118/archive/2016/05/16/5496931.html [问题] 外层table与内层table嵌套,内外表格都需 ...

  4. 让表格table呈现边框,不用给tr、td加边框的写法

    <table width="100%" cellspacing="1" cellpadding="1" bgcolor="# ...

  5. 关于element-ui表格table设置header-cell-class-name样式不起作用的原因分析

    在编写表格的时候想给表头添加样式,使用 header-cell-class-name怎么都添加不上样式,检查元素发现连class都没添加上,查了很多资料有人说element之前版本不支持这属性,但我使 ...

  6. 解决百度Ueditor编辑器表格不显示边框问题

    一.主要内容 CMS使用百度Ueditor编辑器中的表格功能,在编辑模式下可以正常显示边框,而文章发布之后表格不能显示边框.本博文经过查阅相关资料,最终解决了该问题. 二.使用平台 1. dedecm ...

  7. css列表list、表格table

    列表list,无序列表ul,有序列表ol 1.列表项样式list-style-type 无列表默认为dist实心圆,有序列表默认为decimal阿拉伯数字(前面不带0) 其他无序列表常用none无样式 ...

  8. 表格table嵌套,边框合并问题

    [问题] 外层table与内层table嵌套,内外表格都需边框时,设置“border=1”,但边框会重复,造成某些地方边框粗,有些地方边框细的问题.   [解决办法]: 外表格样式: <tabl ...

  9. 表格table样式布局设置

    <style> table{ border-collapse:collapse; margin:0 auto;} table tr td{ border:1px solid #000; l ...

随机推荐

  1. LED驅動芯片最大特點

    最大特點是: 1.電源電壓在很寬的範圍內工作時,(約180V-265V)能保證 LED的恒功率輸出,並且 LED可實現無頻閃輸出. 2.實現安全隔離的安全電壓輸出,甚至是安全超低電壓輸出. 3.IC2 ...

  2. KeilMDK4.7a下载地址/中文乱码解决/自动关联设置

    推荐地址1,速度更快(确定为4.7a版本,且含注册机):1.http://www.mcuzone.com/software/keil/MDK470.RAR 2.http://kuai.xunlei.c ...

  3. Spring Assert.notNull

    Exception in thread "main" java.lang.IllegalArgumentException: Source must not be null at ...

  4. 【转】BLE开发的各种坑

    原文网址:http://www.race604.com/android-ble-tips/ 这段时间在做低功耗蓝牙(BLE)应用的开发(并不涉及蓝牙协议栈).总体感觉 Android BLE 还是不太 ...

  5. Ubuntu环境下NFS服务器搭建

    看到鸟哥私房菜对NFS的介绍,就想试试玩一下.看起来步骤也很简单. 1.背景名词. NFS(Network File System) 作用:让所有的Unix-like 机器通过网络共享彼此的文件 局限 ...

  6. CapsLock indicator on Ubuntu for Thinkpad

    http://askubuntu.com/questions/292535/how-to-get-caps-num-scroll-lock-keys-osd-notification sudo add ...

  7. win7安装ruby on rails

    开发机:win7 旗舰版 - 64位 1,安装ruby,下载rubyinstaller-2.0.0-p451.exe 下载地址:http://rubyinstaller.org/downloads/ ...

  8. Sublime text 3 格式化HTML/css/js/json代码 插件

    JsFormat: 这里下载这插件包 https://github.com/jdc0589/JsFormat ,点油下角的zip就能下载 插件包放到sublime安装目录的Data\Packages目 ...

  9. ganglia单播配置

    背景:    有时,由于当前网络不支持组播等种种原因,使用gmond默认的配置gmetad不能获取到各个客户端的全部数据,http://x.x.x.x/ganglia页面一个cluster组只能展示一 ...

  10. 苹果Swift编程语言新手教程【中国版】

    Swift代码语言教程:在刚刚过去的WWDC2014大会上,苹果公司新公布了一种编程语言Swift.据悉.Swift语言继承了C语言以及Objective-C的特性,且克服了C语言的兼容性问题.对于广 ...