HTML table使用详解

 

        对于table来说，在一些小的模块中进行表格布局是非常好用的。我们可以这样来理解table，主要分成table部分和td部分。

 

table部分：

主要是来控制外边框的（就是最外面一层边框，不包括里面部分），它拥有的属性为：margin属性，border属性，cellspacing属性，规定单元格之间的空白cellpadding属性，规定单元边沿与其内容之间的空白。

tr部分：

主要来分割有几行，一般只需要用来设定heigth。

td部分：

用来控制每个单元格的属性，可是分别控制每个单元格的上下左右边框，其中也包含padding属性。

th部分：

用法和td相同，只是用来区分表头的。

注意：

用百分比和用像素点是相同的。在table中，width指的是整个表格的宽度，而td的width值得指内部不包括内容content的宽度，这个同盒子模型。

以下用实例来说明table的一些常用布局手法：

用来colgroup控制表格中各个框的宽度：（这样可以降低table中代码的耦合度）

<colgroup>
	<col width="80" />
	<col width="230" />
	<col width="100" />
	<col width="230" />
	<col width="100" />
	<col>
</colgroup>

 

【table代码】

 

<table cellspacing="0" cellpadding="0" class="table_3">
		<tr>
			<td>11111111111111</td>
			<td>2</td>
			<td>3</td>
		</tr>
		<tr>
			<td>4</td>
			<td>5</td>
			<td>6</td>
		</tr>
		<tr>
			<td>7</td>
			<td>8</td>
			<td>9</td>
		</tr>
		<tr>
			<td>10</td>
			<td>11</td>
			<td>12</td>
		</tr>
	</table>

【table_1】

 

 

 

.table_1{
	width:300px;
	height:300px;
	border:3px solid #000;
}
.table_1 td{
	border:1px solid red;
}

说明：

 

 

table_1这种情况下，给tr加上border属性是没有作用的，所有的border样式都由最外层的table和最内层的td来控制，我们
可以清楚的看到，最外层是4个像素，来源为table的3个像素和td边框的一个像素，而内部都是两个像素，是相邻的两个td组成的。

图片：

【table_2】

 

.table_2{
	width:300px;
	height:300px;
	border:2px solid #000;
	border-collapse: collapse;
}
.table_2 tr{
	border:1px solid red;
}

说明：

 

 

table_2这种情况下，给tr加上border是有作用的，td没有border，而只给tr加上border会出现没有竖线的效果，这里面有一个
关键的样式：border-collapse: collapse;这个属性的另一个取值为separate，是缺省值。并且这个属性使得所有的边框全都
合并，border的宽度已最宽的为主，加上这个属性可以写出边框处处1的效果。

图片：

【table_3】

 

.table_3{
	width:300px;
	height:300px;
	border:2px solid #000;
	border-collapse: collapse;
	text-align:center;
	table-layout: fixed
	<!--  text-align和table-layout的位置不能交换，一个在前一个在后，交换了就起不到应有的效果了。 -->
}
.table_3 td{
	border:1px solid red;
}

说明：

 

 

table-layout: fixed,这个属性的作用：
在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。
也就是说，没有这个属性的时候，表格的水平布局是和内部内容有关的，就算是将表格中一个单元格的宽度设置为30盘px，
如果内容的宽度大于30px，那么宽度还是拉伸的。在这个属性的下，如果每个单元格都不设置宽度，那么所有的单元格平分table
的总宽度，就算是单元格的内容宽度超出的现有的宽度，单元格也不会拉伸。
这个属性的取值还有一个：automatic，当然这个属性也是缺省的。

图片：