CSS学习笔记(3)--表格边框
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)--表格边框的更多相关文章
- html+css学习笔记 5[表格、表单]
表格 -- 默认样式重置 表格标签: table 表格 thead 表格头 tbody 表格主体 tfoot 表格尾 tr 表格行 th 元素定义表头 ...
- HTML+CSS学习笔记(3)- 认识标签(2)
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
- HTML+CSS学习笔记(1) - Html介绍
HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...
- HTML5学习笔记之表格标签
HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML, CSS学习笔记(完整版)
第一章 div布局 前几课内容 .htm是早期的后缀.由于那时仅仅能支持长度为3的后缀.因此html与htm是一样的. shtml是server先处理然后再交给浏览器处理 #HTML小知识#之#XHT ...
- div+css学习笔记一(转)
div+css学习笔记一 (2011-05-12 07:32:08) 标签: div css 居中 背景图片 ie6 ie7 margin 杂谈 分类: 网页制作 1.IE6中用了float之后导致m ...
- 2022-07-10 第五小组 pan小堂 css学习笔记
css学习笔记 什么是 CSS? CSS 指的是层叠样式表* (Cascading Style Sheets) CSS 描述了如何在屏幕.纸张或其他媒体上显示 HTML 元素 CSS 节省了大量工作. ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
随机推荐
- BrowserSync-多浏览器测试工具
阅读目录 自动刷新 介绍BrowserSync BrowserSync具体使用 BrowserSync配合gulp 自动刷新 自动刷新,顾名思义,就是不用我们去F5刷新.假设有一天我们写代码,只需要c ...
- nyoj42一笔画问题(欧拉图)
这题事实上说不上难度4.仅仅是一个简单的欧拉图推断,给一些点,首先推断连通性.假设不连通.就谈不上是欧拉图. 假设是连通的,在推断度的数目,每一个顶点都是偶数个或者仅仅有两个是奇数个.这样就能够构成欧 ...
- [置顶] (奇迹冬瓜)坦克大战[MFC框架]
经过二次整合 重新放出MFC框架下的坦克大战 采用小窗口 多线程 双缓冲 动画帧化 碰撞检测 接口封装 混音 事件延迟等 力求做到代码与美工的双向化 开场动画 界面一 界面二 游戏界面 结束动画 零积 ...
- Win7是否可以把光盘当作U盘用
光盘当作U盘用 在Windows 7刻录功能中,之前有看到一篇文章<Windows7 新功能 光盘当U盘用>(感兴趣的同学可以百度一下),文章的意思大致是说作者插入了一张空的DVD光盘,然 ...
- Android 如何在关于手机界面添加个图片
前言 欢迎大家我分享和推荐好用的代码段~~ 声明 欢迎转载,但请保留文章原始出处: CSDN:http://www.csdn.net ...
- Win8 Metro中文件读写删除与复制操作
Win8Metro中,我们不能在向以前那样调用WIN32的API函数来进行文件操作,因此,下面就来介绍一下Win8 Metro中文件的读写操作. 1 Windows 8 Metro Style App ...
- iOS工程中的info.plist文件的完整研究
原地址:http://blog.sina.com.cn/s/blog_947c4a9f0100zf41.html 们建立一个工程后,会在Supporting files下面看到一个"工程名- ...
- 关于iOS上使用WWW引起的内存泄漏的临时解决方案
原地址:http://www.unity蛮牛.com/thread-16493-1-1.html 目前,在的4.3.3.和4.3.4版本中存在一个iOS平台上的内存泄漏问题,即当使用WWW来下载和加载 ...
- webDriver API——第10部分Chrome WebDriver
class selenium.webdriver.chrome.webdriver.WebDriver(executable_path='chromedriver', port=0, chrome_o ...
- ubuntu14.04无法连接有线连接问题
在windows系统下关闭有线网卡的关机,自动唤醒功能即可