Html的表格知多少

前端07班 王

对于table的使用我们会有种先入为主的厌恶。觉得页面中不应该出现表格！其实这只是针对使用HTML表格 来定义网页的布局，表格在方便的排列数据信息行和列方面还是非常完美。
下面我们就一起来学习一下table吧：
对于表格，我们现在已经不推荐使用它的一些自带属性，因为现在我们都在强调要保证结构与样式的分离，所以将想要定义的样式都放到css文件中吧。
table的10个相关标签<table> 定义表格<caption> 定义表格标题<col> 为表格的列定义属性<colgroup> 定义表格列的分组<thead> 定义表格的表头<th>定义表格的表头<tr> 定义表格的行<tfoot> 定义表格的表注(底部)<tbody> 定义表格主体<td> 定义一个单元格

基本的表格结构:标题、头部、主体和底部

下面看具体的html代码：

<table class="colgroup_data">
<tbody>
<tr>
<th>排名</th>
<th>公司</th>
<th>营收(百万美元)</th>
<th>利润(亿美元)</th>
</tr>
<tr>
<td>1</td>
<td>肯德基</td>
<td>323,139.0</td>
<td>15,284.0</td>
</tr>
</tbody>
</table>

我们看到上面定义了4个colgroup标签，他们分别对应下面的每一列，里面分别定义了一个类名，下面看一下css样式的定义：

.colgroup_data .one_col { background:#f2eada; text-align: center; }
.colgroup_data .two_col { background:#C7E291; text-align: center; font-weight:700; }
.colgroup_data .three_col { background: #fff287; text-align: center; }
.colgroup_data .four_col { color: #0051e6!important; background: #FFBFBF; text-align: center; }

四种样式分别定义了四种背景色。当然我们也可以为每列定义宽度，上面的代码中我们看到第四行，我们给color添加了imgportant，以增加他的优先级，但实际上我们在页面中看到的却不是设定的颜色，而是td单元格中定义的属性。（二）、结合js进行隔行变色，这样不仅列的颜色可以不一样，行的颜色也可以不一样，这样我们就可以制作出一个单元格背景色多变的多样化表格

具体html代码：

<table class="col_span">
<col span="2" />
<col />
<tbody>
<tr>
<th>排名</th>
<th>公司</th>
<th>营收(百万美元)</th>
<th>利润(亿美元)</th>
</tr>
<tr>
<td>1</td>
<td>沃尔玛</td>
<td>351,139.0</td>
<td>11,284.0</td>
</tr>
</tbody>
</table>

从上面的代码我们可以看出col可以和clogroup标签一样使用span属性来控制的列数
通过上面图片、代码及文字的说明我们可以很清楚地知道col及colgroup标签的区别及使用方法了。理解不到位的地方，欢迎大家指出与补充:）
表格强制换行（非亚洲语言文本）我们经常会遇到表格的数据太多而，将页面撑破的情况，这时就需要对表格进行控制了。下面我们一起来看如何解决表格强制换行的问题。
表格强制换行，有一个必须的条件就是经要表格定义宽度。一定是表格本身的宽度，而不是td单元格的宽度。
我们依旧图片、代码及文字说明相结合来学习这个问题的解决方法：

IE6 、IE7、IE8、Chrome等浏览器下出现的情况，通过比较我们发现一个细微的差别。就是第一行一个是单词换行了，另一个是单词断了换行word-break:break-all; 的解释：如table宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了长，但这个理论通过上面两张图片的比较，知道火狐与Opera是不适用的，如果是对各个主流浏览器要求比较高的情况下，建议不要加word-break:break-all;。通过上面的表格强制换行的情况，对div中出现的强制换行我们也作一个相应的扩充邮箱地址换行我们建站时经常会遇到大侧边栏添加邮箱地址的情况，但经常会遇到邮箱地址太长的情况，以前的解决方法就是大邮箱地址长度确定的情况下，改变字体大小，或者 添加强制换行符，但其实这些可扩展性不强，遇到不同长度邮箱地址的时候不能随机应变。下面我们就来看一个例子

具体html代码：

<ul class="aside_contact">
<li><span>Email:</span><a href="#">hair@rubbermachinesupplier.com</a></li>
<li><span>Address:</span>Menlo Park</li>
</ul>

具体css代码：

.aside_contact{ width:180px; padding:10px; }
.aside_contact li{ padding:5px 0; overflow:hidden;}
.aside_contact li span{ float:left; width:50px;}
.aside_contact li a{ float:left; width:110px; word-wrap:break-word;}

强制换行都是在宽度定的情况结合table-layout及word-wrap才达到完美的强制换行的效果的。