在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 ...
随机推荐
- hdu 1542 Atlantis (线段树扫描线)
大意: 求矩形面积并. 枚举$x$坐标, 线段树维护$[y_1,y_2]$内的边是否被覆盖, 线段树维护边时需要将每条边挂在左端点上. #include <iostream> #inclu ...
- python记录_day07
一.基本数据类型补充 1.列表的拼接用join()方法 li = ["hello","world"] s = "_".join(li) pr ...
- 『TensorFlow』生成式网络中的图片预处理
简介 这里的生成式网络是广义的生成式,不仅仅指gan网络,还有风格迁移中的类自编码器网络,以及语义分割中的类自编码器网络,因为遇到次数比较多,所以简单的记录一下. 背景 1.像素和数字 图像处理目标一 ...
- python-day73--django课上项目01
from django.db import models # Create your models here. class Book(models.Model): name=models.CharFi ...
- Spring Boot集成Thymeleaf
Thymeleaf是一个java类库,是一个xml/xhtml/html5的模板引擎,可以作为mvc的web应用的view层.Thymeleaf提供了额外的模块与Spring MVC集成,所以我们可以 ...
- HomeBrew的安装和简单使用
homebrew 官网 https://brew.sh/ 转自:http://blog.csdn.NET/maojudong/article/details/7918291 1. 前言 作为Linu ...
- 数据结构与算法之PHP用邻接表、邻接矩阵实现图的广度优先遍历（BFS）
一.基本思想 1)从图中的某个顶点V出发访问并记录: 2)依次访问V的所有邻接顶点: 3)分别从这些邻接点出发,依次访问它们的未被访问过的邻接点,直到图中所有已被访问过的顶点的邻接点都被访问到. 4) ...
- Django知识点梳理
Django囊括.杂糅了 前端.数据库.Python知识看起来比较复杂! 其实就是由http请求周期为主体,延伸出来的知识 . PythonWeb服务器网关接口(Python Web Server ...
- for循环的字节码
源代码: public class Wizard { private int age; private void forCycle() { for (int i = 0; i < 10; i++ ...
- js 求select option 的值和对应option的内容
<select onChange="aa(this)" name="a"> <option value="a">1& ...