HTML TABLE cellpadding cellspacing 及nowrap属性

 

• 巢(cell ) -- 表格的内容
• 巢补白(表格填充)(cellpadding ) -- 代表巢外面的一个距离,用于隔开巢与巢空间
• 巢空间(表格间距)(cellspacing ) -- 代表表格边框与巢补白的距离,也是巢补白之间的距离
• 引用网址:http://www.dreamdu.com/xhtml/attribute_cellpadding_cellspacing/

通过视频教程学习HTML表格的填充与间距

上图说明了表格的几个属性,其中黑色部分就是巢(cell)，白色的区域是巢补白(表格填充)，灰色的区域是巢空间(表格间距)。

示例

<table
 width
=
"80%" 
border
=
"1" 
cellspacing
=
"50%" 
cellpadding
=
"80"
>


	<tr>
 

		<th>
www.dreamdu.com</th>


		<th>
.com域名的数量</th>


		<th>
.cn域名的数量</th>


		<th>
.net域名的数量</th>


	</tr>


	<tr>


		<td>
2003年</td>


		<td>
1000</td>


		<td>
2000</td>


		<td>
3000</td>


	</tr>


	<tr>


		<td>
2004年</td>


		<td>
4000</td>


		<td>
5000</td>


		<td>
6000</td>


	</tr>


	<tr>


		<td>
2005年</td>


		<td>
7000</td>


		<td>
8000</td>


		<td>
9000</td>


	</tr>


</table>






TD的noWrap属性使用注意事项


<td width="28%" align="right" nowrap
 >

我设置nowrap和不设置nowrap效果都一样。就是表格随着文字自动伸展，为什么？



TD元素noWrap属性的行为与TD元素的width属性有关。



◆如果未设置TD宽度，则noWrap属性是起作用的。

◆如果设置了TD宽度，则noWrap属性是不起作用的。



下面是测试的结果：

测试字符串：

我终于明白，我其实有一条韧性十足的命，它远比我想象中的那条命结实得多、耐磨的多……

单元格未设置nowrap属性的空表：

加入测试字符串：

我终于明白，我其实有一条韧性十足的命，它远比我想象中的那条命结实得多、耐磨的多……

单元格设置了nowrap属性，未设置width属性：

我终于明白，我其实有一条韧性十足的命，它远比我想象中的那条命结实得多、耐磨的多……

单元格设置了nowrap属性，也设置了width属性：

我终于明白，我其实有一条韧性十足的命，它远比我想象中的那条命结实得多、耐磨的多……