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

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

  3. css学习の第六弹—样式设置小技巧

    一.css样式设置小技巧>>1.行内元素水平居中是通过给父元素设置 text-align:center 来实现的.html代码:<body> <div class=&qu ...

  4. Xshell远程连接的具体操作和Xshell多会话设置小技巧

    前几天给大家分享了Xshell的安装教程,今天给大家分享如何在Xshell中进行远程连接,并且分享一下如何设置一条命令可以发送多个终端,这里以Xshell6为例进行说明,具体的教程如下. 1.依次点击 ...

  5. html 表格边框的设置

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

  6. 从零开始学习html(十五)css样式设置小技巧——下

    六.垂直居中-父元素高度确定的单行文本 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8&quo ...

  7. 超 Nice 的表格响应式布局小技巧

    今天,遇到了一个很有意思的问题,一名群友问我,仅仅使用 CSS,能否实现这样一种响应式的布局效果: 简单解析一下效果: 在屏幕视口较为宽时,表现为一个整体 Table 的样式 而当屏幕视口宽度较小时, ...

  8. CSS设置小技巧

    水平居中 对于元素的水平居中,有三种情况: 行内元素(文字.图片等):text-align: center; 定宽块状元素(有设置宽度的block元素):margin: 0 auto; 不定宽块状元素 ...

  9. CSS样式设置小技巧

    1.水平居中设置 行内元素居中设置:如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的.代码示例如下: HTML代码 <body&g ...

随机推荐

  1. 【Maven】解决maven打jar包报错 source 1.3 中不支持注释 (请使用 -sour

    问题:maven在进行打包时,报 '请使用-source 5 或者更高版本以启用XX'的信息并导致打包失败. 原因:maven默认的编译插件的java版本较低,导致其不支持例如泛型,注解等用法. 解决 ...

  2. Codeforces 161D

    树形DP: 要求找出树上距离为k的点的对数: 对于每个节点,经过这个节点的符合条件的的点有两种: 第一种:距离他为i的儿子和他爸爸中距离他爸爸为k-i-1:(不是符合的点对中的一个) 第二种:他儿子中 ...

  3. 用JQUERY为INPUT的TXT类型赋值及取值操作

    注意和纯JS操作的区别,一个是对象,一个是字串,如下说明: 在Jquery中,用$("#id")来获得页面的input元素,其相当于document.getElementById( ...

  4. 【POJ2417】baby step giant step

    最近在学习数论,然而发现之前学的baby step giant step又忘了,于是去翻了翻以前的代码,又复习了一下. 觉得总是忘记是因为没有彻底理解啊. 注意baby step giant step ...

  5. linux No manual entry for

    我的博客:www.while0.com 原来除了安装man,还要安装man-pages. yum install man -y yum install man-pages -y

  6. JQuery中如何click中传递参数

    代码如下: click(data,fn)中的data其实是json对象,取的时候,只能通过当前的事件源来取,data是默认放在event中的,所以这里的data是eventdata,引用的时候也使用e ...

  7. 在C#中使用WIA获取扫描仪数据(利用Filter处理图片)

    WIA Automation Layer不仅能从设备中捕获照片,还能进行简单的处理.当WIA Automation Layer从设备中捕获照片,保存为一个ImageFile对象,我们可以通过访问该Im ...

  8. Connection 和Dispose的学习日志

  9. 在Ant Build文件中使用正则表达式替换文件内容

    这需要在build文件中使用<replaceregexp>标签, 这个标签的使用大概是这个样子的: <replaceregexp file="${src}/build.pr ...

  10. [LeetCode] Longest Valid Parentheses 解题思路

    Given a string containing just the characters '(' and ')', find the length of the longest valid (wel ...