如何通过CSS样式设置单元格显示内容的长度

html-css010

如何通过CSS样式设置单元格显示内容的长度,第1张

在table

中控制单元格之间的间距要用到cellspacing、cellpadding,默认情况cellspacing、cellpadding均不为0,但经

常的状况为了不让table单元格之间的间距影响到美观,我们经常会把cellspacing、cellpadding设置为0,因此经常看到“<

table

cellspacing=0

cellpadding=0>”这样的代码。这样做无形中增加了代码的体积,而且也极其不符合样式与内容分离的web标准,对于我本人来说也是极其

厌恶这样的形式的,因此使用css控制cellspacing/cellpadding显的意义重大了!以下是控制方法:

table{border:0margin:0border-collapse:collapse}

table

td{padding:0}

第一行控制cellspacing,关键是“border-collapse:collapse”这一句;第二行控制cellpadding

cellpadding

对应

td

padding

cellspacing

对应

td

margin

说的还不够清楚吗?

cellpadding,cellspacing都是废弃的属性了,早已不推荐使用,最新的html5里已经彻底去掉了这些表现型的属性。正确的做法是,合并表格边框,然后用th,td的padding设置内容和边框之间的空隙。

你想有间隔,就table

td{

padding:15px

},就可以了啊

1、新建一个html文件,命名为test.html,用于讲解css如何定义表格内外边框颜色各不相同。

2、在test.html文件内,使用table标签创建一个表格,用于测试。

3、在test.html文件内,设置table标签的class属性为otwo。

4、在css标签内,通过class定义表格的外边框的颜色,例如,这里使用border属性设置外边框颜色为红色。

5、在css标签内,再通过class定义表格内边框的颜色,即td单元格的颜色,例如,这里设置为蓝色。

在css中设置整个网页中的单元格内容居中显示,首先,要将一个CSS样式给一个元素,就需要获取到这个元素,一般是通过给id或者是class这里因为已经确定了元素单元格,所以直接使用td就行,通过具体的代码来理解:

<html>

<head>

<style>

table{

width:300px

height:200px

}

td{

text-align:center

}

</style>

</head>

<body>

<table>

<tr>

<td>我是测试文字</td>

</tr>

</table>

</body>

</html>