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，当然这个属性也是缺省的。

图片：