在html5中不支持<table>的cellpadding 和 cellspacing ; 2) 如何用css实现 cellpadding, cellspacing ; 3) tr , th 是 有 border, 没有 padding 的.
1.初始:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cellspacing的css实现</title>
<style type="text/css"> table {
border: 1px solid red;
}
td {
border: 1px solid red;
}
</style>
</head>
<body>
<h1>HTML5 不支持 <table> cellspacing 属性。</h1> <table>
<tr>
<td>单元格1-1</td>
<td>单元格1-2</td>
</tr>
<tr>
<td>单元格2-2</td>
<td>单元格2-2</td>
</tr>
<tr>
<td>单元格3-1</td>
<td>单元格3-2</td>
</tr>
</table> </body>
</html>
效果:
2. 通过css实现: cellspacing = 0;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cellspacing的css实现</title>
<style type="text/css"> table {
border: 1px solid red;
border-collapse: collapse;
}
td {
border: 1px solid red;
}
</style>
</head>
<body>
<h1>HTML5 不支持 <table> cellspacing 属性。</h1> <table>
<tr>
<td>单元格1-1</td>
<td>单元格1-2</td>
</tr>
<tr>
<td>单元格2-2</td>
<td>单元格2-2</td>
</tr>
<tr>
<td>单元格3-1</td>
<td>单元格3-2</td>
</tr>
</table> </body>
</html>
border-collapse: collapse; 是针对 <table>元素的.
效果:
3. css实现 cellspacing = xx;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cellspacing的css实现</title>
<style type="text/css"> table {
border: 1px solid red;
border-collapse: separate;
border-spacing: 20px;
}
td {
border: 1px solid red;
}
</style>
</head>
<body>
<h1>HTML5 不支持 <table> cellspacing 属性。</h1> <table>
<tr>
<td>单元格1-1</td>
<td>单元格1-2</td>
</tr>
<tr>
<td>单元格2-2</td>
<td>单元格2-2</td>
</tr>
<tr>
<td>单元格3-1</td>
<td>单元格3-2</td>
</tr>
</table> </body>
</html>
10 border-collapse: separate;
11 border-spacing: 20px; 1-- border-spacing 只有在 border-collapse : separate 时 才会起作用.
2-- border-collapse, border-spacing 都是 针对 <table>元素的.
4. css实现 cellpadding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cellspacing的css实现</title>
<style type="text/css"> table {
border: 1px solid red;
border-collapse: collapse; }
td {
border: 1px solid red;
padding: 20px;
}
</style>
</head>
<body>
<h1>HTML5 不支持 <table> cellspacing 属性。</h1> <table>
<tr>
<td>单元格1-1</td>
<td>单元格1-2</td>
</tr>
<tr>
<td>单元格2-2</td>
<td>单元格2-2</td>
</tr>
<tr>
<td>单元格3-1</td>
<td>单元格3-2</td>
</tr>
</table> </body>
</html>
1-- border-collapse 是针对 <table>元素的. padding 是针对 td 元素的.
-----------------------------------------------------------------------------------------------------
5. tr, th 有border . 没有 padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cellspacing的css实现</title>
<style type="text/css"> table {
border: 1px solid red;
border-collapse: collapse; }
tr {
border: 1px solid black;
padding: 20px;
}
</style>
</head>
<body>
<h1>HTML5 不支持 <table> cellspacing 属性。</h1> <table>
<tr>
<td>单元格1-1</td>
<td>单元格1-2</td>
</tr>
<tr>
<td>单元格2-2</td>
<td>单元格2-2</td>
</tr>
<tr>
<td>单元格3-1</td>
<td>单元格3-2</td>
</tr>
</table> </body>
</html>
效果:
参考链接:
CSS中cellspacing和cellpadding属性用法揭秘
在html5中不支持<table>的cellpadding 和 cellspacing ; 2) 如何用css实现 cellpadding, cellspacing ; 3) tr , th 是 有 border, 没有 padding 的.的更多相关文章
- html5中不再支持的元素
html5中不再支持的元素:1.acronym(建议abbr) : 定义首字母缩写2.applet(建议object): 定义 applet3.basefont(使用css控制)4.big(使用css ...
- HTML5 中canvas支持触摸屏的签名面板
1.前言 最近实在是太忙了,从国庆之后的辞职,在慢慢的找工作,到今天在现在的这家公司上班大半个月了,太多的心酸泪无以言表,面试过程中,见到的坑货公司是一家又一家,好几家公司自己都只是上一天班就走了,其 ...
- html5中audio支持音频格式
HTML5 Audio标签能够支持wav, mp3, ogg, acc, webm等格式,但有个很重要的音乐文件格式midi(扩展名mid)却在各大浏览器中都没有内置的支持.不是所有的浏览器都支持MP ...
- HTML5中常用的标签(及标签的属性和作用)
1.标签:<!DOCTYPE>作用:声明是文档中的第一成分,位于<html>标签之前. 2.标签:<html>作用:此元素可告知浏览器其自身是一个HTML文档.属性 ...
- IE9对HTML5中一部分属性不提供支持的原因
为什么在IE9中对于HTML5标准中的离线应用程序以及CSS3中的一部分不提供支持?笔者间接了解到了这个原因. 微软日前已经发布了Internet Explorer 9(以下简称IE9)正式版.在该版 ...
- HTML5中已经不支持元素汇总，持续更新
HTML5中已经不支持以下的元素,不建议在进行开发时再使用以下的元素. 1.acronym(建议abbr) : 定义首字母缩写 2.applet(建议object): 定义 applet 3.bas ...
- 检测是否支持HTML5中的Video标签
//检测是否支持HTML5 function checkVideo() { if (!!document.createElement('video').canPlayType) { var vidTe ...
- 让IE8支持html5中的video标签
这是一篇综合几个前辈的解决方案. 使用video的时候,要遇到的问题. ①不兼容ie9及其以下版本 在<head>里添加两行, 参考张鑫旭前辈的博客,但是在ie8中薄播放. <!-- ...
- HTML5中支持新的媒体元素有这些
HTML5对媒体的支持性很强,支持以下媒体元素: · audio 定义音频 · video 定义视频 · embed 作为外部应用的容器 · source 多种媒体源的支持 · track ...
随机推荐
- Merge K Sorted List（含Merge Two Sorted LIst） leetcode java
问题描述: Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complex ...
- spring boot(十一)MongoDB的使用
mongodb是最早热门非关系数据库的之一,使用也比较普遍,一般会用做离线数据分析来使用,放到内网的居多.由于很多公司使用了云服务,服务器默认都开放了外网地址,导致前一阵子大批 MongoDB 因配置 ...
- （三）使用链式数据实现包(java)
目标: 1) 描述数据的链式组织方式 2) 描述如何在链式节点链的开头添加新节点 3) 描述如何删除链式节点链的首节点 4) 描述如何在链式节点链中找到某个数据 5) 使用链式节点链实现ADT包 6) ...
- leetcode-algorithms-25 Reverse Nodes in k-Group
leetcode-algorithms-25 Reverse Nodes in k-Group Given a linked list, reverse the nodes of a linked l ...
- CF-503div2-A/B/C
A. New Building for SIS time limit per test 1 second memory limit per test 256 megabytes input stand ...
- python的数据类型--list和tuple
list是Python的一种数据类型,是一个有序的集合,可以随时添加和删除.写法为list名称+[] list[]内的元素不仅仅为str,可以是数字,布尔值. 访问方法为变量名或者变量[索引],和C的 ...
- #pragma 处理警告 clang diagnostic 的使用
首先#pragma在本质上是声明,常用的功能就是注释,尤其是给Code分段注释:而且它还有另一个强大的功能是处理编译器警告,但却没有上一个功能用的那么多. clang diagnostic 是#pra ...
- redis 缓存策略
redis 缓存策略配置项:maxmemory <bytes>maxmemory-policy noeviction 触发时机:每次执行命令(processCommand)的时候会检测 w ...
- android 数据库添加字符串 添加失败 解决方案
这两天遇到一个棘手的问题,在往sqlite数据库中添加数据时,总是添加失败,但是添加数字却可以.原来是添加时,忘记添加''号修饰. 修改前: 修改后: 这样就完美解决.
- ssh免输入密码登录
ssh免输入密码登录 ubuntu下生成ssh密钥参见. https://confluence.atlassian.com/display/BITBUCKET/Use+the+SSH+prot ...