表格是网页上最常见的元素，但是，现在对很多刚入行的前端们那是谈table色变。那是为啥？这是表格的框架的简单、明了、在传统的网页中使用没有边框的表格来排版是非常流行。在web标准逐渐深入设计领域以后，table布局不能适应页面变化更替，一直是页面重构的“重灾区”，扩展性极差，以至table布局消失在历史的河流中。这就是刚入行的前端们惧怕table的原因，反而没有深知table的真正用武之地（数据的展示）。以下我三个方面来讲table元素。
一、table的自身属性
1.cellspacing：表示单元格之间的距离（相当css中border-collapse属性[collapse-合并、separate-分离]）。
图1-1为cellspacing=”10”
2.Cellpadding：表示单元格内容与其边框之间的空白（相当css中padding属性）
这个html属性在特殊的布局是很有着用（如：edm）
图1-2为cellpadding=”10”
二、Css方面
1.了解table元素的童鞋都知道table元素设置了border-collapse：collapse时再padding是没有效果的;
图1-3为border-collapse:collapse;padding:20px;
图1-4为border-collapse:separate;padding:20px;(IE6/7显示还是如图1-3)
2.th,td设置margin也没有效果;
图1-5为th，td的margin为20px
3.在我的测试中tr设置margin，padding都是没有效果。
图1-6为margin，padding都为20px
4.Css属性table-layout是设置表格的宽度是“自动式”还是“固定式”
图1-7为table-layout为auto（默认）-内容自动式
图1-8为table-layout为fixed-内容固定式，不管内容多少都按固定宽度显示
三、Js方面
在处理表格的时候，js提供了一些关于方便构建表格自己的一套处理属性和方法，不必繁琐的运用标准DOM方法创建添加
1.Table对象集合-
cells[] 获取包含表格中所有单元格的数组
rows[] 获取包含表格中所有行的数组
tBodies[] 获取包含表格中所有tbody的数组
2.Table对象属性
tFoot 获取表格的tFoot对象
tHead 获取表格的tHead对象
width 设置或获取表格宽度
border 设置或获取表格边框
caption 设置或获取表格标题
3.Table对象方法
createCaption() 为表格创建一个空的标题元素
createTFoot() 为表格创建一个空的tFoot元素
createTHead() 为表格创建一个空的tHead元素
deleteCaption() 删除表格的标题元素
deleteRow() 删除指定的表格行
deleteTFoot() 删除表格的tFoot元素
deleteTHead() 删除表格的tHead元素
insertRow() 向表格中插入新行
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div1 {width:600px; margin:20px auto; border:1px solid red;} table {width:100%; border-collapse:collapse;border-spacing:0; line-height:20px; table-layout:fixed;} </style> </head> <body> <div class="div1" id="div1"> </div> <script type="text/javascript"> var oDiv = document.getElementById('div1'); var oTb = document.createElement('table'); var oTbody = document.createElement('tbody'); oTb.border = '1'; for ( var i = 0; i < 3; i++ ) { oTbody.insertRow(i); for ( var j = 0; j < 3; j++ ) { oTbody.rows[i].insertCell(j).innerHTML = 'row-' + i + '--' + 'cell-' + j; } } oTb.appendChild(oTbody); oDiv.appendChild(oTb); </script> </body> </html>
ps:table元素师很重要的数据显示布局的html元素，其实table运用很广范，比如漂浮在页面上的分享到。
posted on
