对于很多初学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. keil C51绝对地址访问

    在利用keil进行8051单片机编程的时,常常需要进行绝对地址进行访问.特别是对硬件操作,如DA AD 采样 ,LCD 液晶操作,打印操作.等等.C51提供了三种访问绝对地址的方法: 1. 绝对宏 在 ...

  2. Android基础知识、四大组件(转)

    Android应用程序使用java语言编写的.Android SDK工具将所有的数据和资源文件以及代码进行编译,打包称为一个apk文件.一个apk文件中的所有代码被认为是一个应用,android系统的 ...

  3. 研究了下apache的漏洞CVE-2012-0053

    发一个大cookie过去,最新版本的,竟然显示了个\n 嘛意思 干嘛不直接删掉 Your browser sent a request that this server could not under ...

  4. Linux&shell之结构化命令进阶

    写在前面:案例.常用.归类.解释说明.(By Jim) for命令重复一系列的命令是一种常见的编程实践. #!/bin/bash # basic for command for test in A B ...

  5. BZOJ 1034 [ZJOI2008]泡泡堂BNB

    1034: [ZJOI2008]泡泡堂BNB Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1757  Solved: 928[Submit][Sta ...

  6. 【转】(DT系列二)device tree的书写规范

    原文网址:http://www.cnblogs.com/biglucky/p/4057478.html devicetree的书写规范 下面从节点,属性,reg,ranges,中断控制器等几个方面叙述 ...

  7. 如何使用SecureCRT连接vmware下ubuntu

    配置SecureCrt 和 ubuntu1. 首先要明白什么是ssh?可以把ssh看做是telnet的加强版,telnet的密码和信息都是不加密的,而ssh则加密.2. 开启ubuntu上的ssh功能 ...

  8. js接收后台时间数据变成秒处理为正常格式

    在做项目时,后台数据json传到前台ajax,数据中包含DateTime格式的数据,前台js操作时间数据的时候却发现日期变成了秒格式 js能对日期操作的那些方法均不能使用了,例如getDay()等等, ...

  9. HDU_2147——组合博弈,转换为P/N图,然后找规律

    Problem Description Recently kiki has nothing to do. While she is bored, an idea appears in his mind ...

  10. [LeetCode]Container With Most Water, 解题报告

    前言 难怪LeetCode OJ在找工作时被很多人推荐,发现了这道最大蓄水题目就是美团的笔试最后一道题,当时我霸笔只有着一道题目没有答出来,因此也就没有获得面试机会,可惜了 题目 Given n no ...