[翻译][HTML]CELLPADDING and CELLSPACING

w3school手册:http://www.w3schools.com/tags/att_table_cellspacing.asp

一直以来都发现自己对cellpadding&cellspacing的定义是不够清楚,所以很自然对padding&margin的定义也不是那么的清楚。可是,我对于padding&margin的理解还是比cellpadding&cellspacing深入一点的,毕竟,padding&margin只不是用来对同一个物体自己本身的描述,padding(一个块元素的内边距,就是该元素中的内容到该元素内侧边框的距离),margin(一个块元素的外边距,就是该元素自己本身的边框到父元素边框的距离)。

默认情况下,表格中的单元格是相互挤在在一起的。为了在你表格中的单元格添加一些空间的话,可以使用cellpadding&cellspacing。

cellspacing —— 控制着两个单元格之间的距离,尽管是没有官方默认值的,浏览器通常却会使用一个默认值为2,即在浏览器中,cellspacing的值就是会默认为2。

cellpadding —— 控制单元格中内容与单元格内四周之间的距离,默认值是1。通常情况下,cellpadding比cellspacing可以更加的有效扩大表格内容。

原文链接:http://www.htmlcodetutorial.com/tables/index_famsupp_29.html

How to set cellspacing and cellpadding in css ?

http://stackoverflow.com/questions/339923/how-to-set-cellpadding-and-cellspacing-in-css

For controlling "cellpadding" in CSS, you can simply use padding on table cells. E.g. for 10px of "cellpadding":

td {
    padding: 10px;
}

For "cellspacing", you can apply the border-spacing CSS property to your table. E.g. for 10px of "cellspacing":

table {
    border-spacing: 10px;
    border-collapse: separate;
}

This property will even allow separate horizontal and vertical spacing, something you couldn‘t do with old-school "cellspacing".

Issues in IE <= 7

This will work in almost all popular browsers except for Internet Explorer up through Internet Explorer 7, where you‘re almost out of luck. I say "almost" because these browsers still support the border-collapseproperty, which merges the borders of adjoining table cells. If you‘re trying to eliminate cellspacing (that is, cellspacing="0") then border-collapse:collapse should have the same effect: no space between table cells. This support is buggy, though, as it does not override an existing cellspacing HTML attribute on the table element.

In short: for non-Internet Explorer 5-7 browsers, border-spacing handles you. For Internet Explorer, if your situation is just right (you want 0 cellspacing and your table doesn‘t have it defined already), you can use border-collapse:collapse.

table {
    border-spacing: 0;
    border-collapse: collapse;
}
时间: 2024-10-11 10:54:38

[翻译][HTML]CELLPADDING and CELLSPACING的相关文章

Cellpadding 和 Cellspacing 属性来控制表格边框间距

原文:大专栏  Cellpadding 和 Cellspacing 属性来控制表格边框间距 原文地址:https://www.cnblogs.com/chinatrump/p/11518139.html

在html5中不支持&lt;table&gt;的cellpadding 和 cellspacing ; 2) 如何用css实现 cellpadding, cellspacing ; 3) tr , th 是 有 border, 没有 padding 的.

1.初始: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>cellspacing的css实现</title> 6 <style type="text/css"> 7 8 table { 9 border: 1px solid red; 10 } 11

CSS中表示cellpadding和cellspacing的方法

table{ border-collapse:collapse; }

cellspacing和cellpadding的用法

cellspacing和cellpadding的用法:这两个是table表格中的两个重要属性,并且在制作细线表格的时候会用到,当然制作细线表格的方法并非只有一种,下面就来简单介绍一下这两个属性的用法,先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www

cellspacing与cellpadding

此文引用自cellpadding和cellspacing属性来控制表格边框的间距. 作者:nestea 巢(cell) -- 表格的内容 巢补白(表格填充)(cellpadding) -- 代表巢外面的一个距离,用于隔开巢与巢空间 巢空间(表格间距)(cellspacing) -- 代表表格边框与巢补白的距离,也是巢补白之间的距离 上图说明了表格的几个属性,其中黑色部分就是巢(cell),白色的区域是巢补白(表格填充),灰色的区域是巢空间(表格间距). cellpadding和cellspaci

python动态网页爬取——四六级成绩爬取

需求: 四六级成绩查询网站我所知道的有两个:学信网(http://www.chsi.com.cn/cet/)和99宿舍(http://cet.99sushe.com/),这两个网站采用的都是动态网页.我使用的是学信网,好了,网站截图如下: 网站的代码如下: 1 <form method="get" name="form1" id="form1" action="/cet/query"> 2 3 <table

datatables增删改查的实现

学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/2006942 分别导入css和js文件 <link href="~/Content/bootstrap.css" rel="stylesheet" /> <link href="~/Content/datatables/css/dataTables.

HTML学习笔记--实例-创建一个注册页面--select两个option出来结果却是四个选项,其中两个空白选项的原因?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

java.lang.String类

复制下来的java.lang.String源码.在此基础上添加自己的注释,偷懒了,用来加深印象吧.英语不好,没有翻译,不理解的方法直接百度的.然后按照自己的理解描述. /* * @(#)String.java 1.205 09/02/26 * * Copyright 2006 Sun Microsystems, Inc. All rights reserved. * SUN PROPRIETARY/CONFIDENTIAL. Use is subject to license terms. */