http://www.alixixi.com/web/a/2009082657736.shtml

对于很多初学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

CSS学习笔记(3)--表格边框的更多相关文章

  1. html+css学习笔记 5[表格、表单]

    表格 -- 默认样式重置 表格标签:     table 表格     thead 表格头     tbody 表格主体     tfoot 表格尾     tr 表格行     th 元素定义表头 ...

  2. HTML+CSS学习笔记(3)- 认识标签(2)

    HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...

  3. HTML+CSS学习笔记(1) - Html介绍

    HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...

  4. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

  5. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  6. HTML, CSS学习笔记(完整版)

    第一章 div布局 前几课内容 .htm是早期的后缀.由于那时仅仅能支持长度为3的后缀.因此html与htm是一样的. shtml是server先处理然后再交给浏览器处理 #HTML小知识#之#XHT ...

  7. div+css学习笔记一(转)

    div+css学习笔记一 (2011-05-12 07:32:08) 标签: div css 居中 背景图片 ie6 ie7 margin 杂谈 分类: 网页制作 1.IE6中用了float之后导致m ...

  8. 2022-07-10 第五小组 pan小堂 css学习笔记

    css学习笔记 什么是 CSS? CSS 指的是层叠样式表* (Cascading Style Sheets) CSS 描述了如何在屏幕.纸张或其他媒体上显示 HTML 元素 CSS 节省了大量工作. ...

  9. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  10. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

随机推荐

  1. ylbtech-LanguageSamples-Pinvoke(平台调用)

    ylbtech-Microsoft-CSharpSamples:ylbtech-LanguageSamples-Pinvoke(平台调用) 1.A,示例(Sample) 返回顶部 “平台调用”示例 本 ...

  2. SQL Server中按照条件随机返回数据

    需求:查询对应关键字的数据,并随机返回一条. 这时,需要一个SQL的那只方法:NEWID(). 用法: [sql]SELECT TOP 1 * FROM Table WHERE TID = 1 ORD ...

  3. docker中的link

    一.查看容器的详细情形 docker inspect 容器id/名称 二.为什么要用link 容器每次重启时,ip都会变动,这不利于前端引用中连接数据库. 三.link docker run -p 8 ...

  4. 利用JMX来监控大部分java应用

    JMX(JavaManagement Extensions,即Java管理扩展)是一个为应用程序.设备.系统等植入管理功能的框架.JMX可以跨越一系列异构操作系统平台.系统体系结构和网络传输协议,灵活 ...

  5. webDriver API——第13部分UI Support

    class selenium.webdriver.support.select.Select(webelement) deselect_all() Clear all selected entries ...

  6. js 创建数组方法以及区别

    示例代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF ...

  7. ES6 对象扩展

    1.属性和变量可以简写 let birth = '2000/01/01'; const Person = { name: '张三', //等同于birth: birth birth, // 等同于he ...

  8. 03-spring学习-属性配置细节

    配置bean的一些细节 字面值 如果包含特殊符号,直接写会报错.可以用这个<![CDATA[]]>包裹起来. 比如这里的配置属性里面的value值包含<>等特殊符号,直接写会报 ...

  9. Python: 去掉字符串中的非数字(或非字母)字符

    >>> crazystring = ‘dade142.;!0142f[.,]ad’ 只保留数字>>> filter(str.isdigit, crazystring ...

  10. asp.net mvc easyui datagrid分页

    提到 asp.net mvc 中的分页,很多是在用aspnetpager,和easyui datagrid结合的分页却不多,本文介绍的是利用easyui 中默认的分页控件,实现asp.net mvc分 ...