在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 ...
随机推荐
- pytorch backward问题
pytorch中关于backward的很有意思的一个问题 <https://blog.csdn.net/shiheyingzhe/article/details/83054238> 但是我 ...
- CentOS7.3将网卡命名方式设置为传统方式
CentOS7.3将网卡命名方式设置为传统方式 生产环境可能拥有不同系列的操作系统,比如,既有CentOS6系列,也有CentOS7系列的系统,而CentOS6和CentOS7在网卡命名方面有着较大区 ...
- 『TensotFlow』RNN中文文本_下_暨研究生开学感想
承前 接上节代码『TensotFlow』RNN中文文本_上, import numpy as np import tensorflow as tf from collections import Co ...
- loj#6062. 「2017 山东一轮集训 Day2」Pair hall定理+线段树
题意:给出一个长度为 n的数列 a和一个长度为 m 的数列 b,求 a有多少个长度为 m的连续子数列能与 b匹配.两个数列可以匹配,当且仅当存在一种方案,使两个数列中的数可以两两配对,两个数可以配对当 ...
- 78. Subsets C++回溯法
本题还是基本的回溯法.就是回溯函数的参数选择上要花点心思! class Solution { public: void backTrack(vector<int> ans, vector& ...
- ES6 开发常用新特性以及简述ES7
一.关于变量 ES6新增:块级作用域变量 1.let定义块级作用域变量 没有变量的提升,必须先声明后使用 let声明的变量,不能与前面的let,var,conset声明的变量重名 { { consol ...
- x=x+1, x += 1, x++ 效率分析
x = x + 1 效率最低 具体如下: 1. 读取右x的地址 2. x + 1 3. 读取左x的地址 4. 将右值传给左边的x(编译器不认为左x和右x是同一个地址) x += 1 其次 1. 读取右 ...
- shell test判断命令
判断命令test 使用test命令可以对文件,字符串等进行测试,一般配合控制语句使用,如while,if,case "字符串测试" test str1==str2 测试字符串是 ...
- Java单例模式《一》饿汉式
package com.study.mode; /** * 单例模式:饿汉式. 线程安全. * @ClassName: SingleBean * @author BlueLake * @date 20 ...
- Java并发编程_volatile关键字的用法（二）
被volatile修饰的变量能够保证每个线程能够获取该变量的最新值,从而避免出现数据脏读的现象. 根据下面实例理解: package sync; public class VolatileTest e ...