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

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

ID NAME GENDER
1001 mike male

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

ID NAME GENDER
1001 mike male

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

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

ID NAME GENDER
1001 mike male

再给表格加个颜色,<table border="1px" bordercolor="#000000" cellspacing="0px" style="border-collapse:collapse">

ID NAME GENDER
1001 mike male

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

  1. HTML表格边框的设置小技巧

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

  2. (转)HTML表格边框的设置小技巧

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

  3. HTML表格边框的设置小技巧-表格

    对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解. 一般我们用表格的时候总会给它个border属性,比如:<table b ...

  4. [转]CSS如何设置html table表格边框样式

    原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...

  5. Android表格布局之设置边框

    Android表格布局本身没有边框,不过可以通过背景色的设置可以实现表格边框的显示. 首先可以设置TableRow的背景色,然后设置内容的背景色.根据它们的颜色差就出现了边框.只要微调Content与 ...

  6. css中的border-collapse属性如何设置表格边框线?(代码示例)

    css中的border-collapse属性如何设置表格边框线?本篇文章就给大家介绍css中的border-collapse属性是什么? border-collapse属性设置表格边框线的方法.有一定 ...

  7. CSS之表格边框合并、兄弟标签外边距合并、父子标签的外边距合并

    本文内容: 表格边框合并 兄弟标签外边距合并 父子标签的外边距合并 首发日期:2018-05-01 表格边框合并: 发生情况: 当设置了cellpadding="0" cellsp ...

  8. html的表格边框为什么会这么粗?

    因为默认情况下,cellspacing = 2px. 当表格的 border 不为 0 的时候,单元格(cell)的 border 为 1. 只有当表格的 border 设置为 0 的时候,单元格的 ...

  9. JavaScript变换表格边框颜色

    效果查看:http://hovertree.com/texiao/js/2.htm 代码如下,保存到HTML文件也可以查看效果: <html> <head> <meta ...

随机推荐

  1. <转> django模板语言filter方法

    Django的模板是一个简单的文本文件,它可以生成任何文本格式(HTML.XML.CSV等),在本文开始之前先看一个Django模板的例子: 从这个例子中可以看到,模板标签可以是单独出现的,如exte ...

  2. IntersectionObserver

    创建对象 var io = new IntersectionObserver(callback, option); IntersectionObserver是浏览器原生提供的构造函数,接受两个参数:c ...

  3. [WC2008]游览计划(斯坦纳树)

    [Luogu4294] 题解 : 斯坦纳树 \(dp[i][j]\) 表示以\(i\)号节点为根,当前状态为\(j\)(与\(i\)连通的点为\(1\)) 当根\(i\)不改变时状态转移方程是: \( ...

  4. A. Right-Left Cipher Round #528 (Div. 2)【字符串】

    一.题面 题目链接 二.分析 该题就是一个字符串的还原.长度为奇数时从左边开始,长度为偶数时从右边开始. 三.AC代码 #include <bits/stdc++.h> using nam ...

  5. 【贪心】洛谷P1607 [USACO09FEB]庙会班车Fair Shuttle 题解

        不是很容易写出正解的贪心问题. 题目描述 Although Farmer John has no problems walking around the fair to collect pri ...

  6. ElementUI 时间控件

    <template> <div class="block"> <span class="demonstration">默认& ...

  7. CodeChef - RIN 最小割应用 规划问题

    题意:给定\(n\)门课和\(m\)个学期,每门课在每个学期有不同的得分,需要选定一个学期去完成,但存在约束条件,共有\(k\)对课程需要\(a\)在\(b\)开始学前学会,求最大得分(原问题是求最高 ...

  8. [转] Java 使用Try-with-resources自动关闭资源

    [From] https://blog.csdn.net/wtopps/article/details/71108342 Try-with-resources Try-with-resources是J ...

  9. [转] Spring Boot中Web应用的统一异常处理

    [From] http://blog.didispace.com/springbootexception/ 我们在做Web应用的时候,请求处理过程中发生错误是非常常见的情况.Spring Boot提供 ...

  10. Json 序列化为Dictionary

    如下所示的json字符串中包含中文属性转换成英文属性 ["sid":"dd1312","success":true,"data&q ...