关于table元素的认识

时间:2021-10-24 15:38:38

表格是网页上最常见的元素,但是,现在对很多刚入行的前端们那是谈table色变。那是为啥?这是表格的框架的简单、明了、在传统的网页中使用没有边框的表格来排版是非常流行。在web标准逐渐深入设计领域以后,table布局不能适应页面变化更替,一直是页面重构的“重灾区”,扩展性极差,以至table布局消失在历史的河流中。这就是刚入行的前端们惧怕table的原因,反而没有深知table的真正用武之地(数据的展示)。以下我三个方面来讲table元素。

一、table的自身属性

1.cellspacing:表示单元格之间的距离(相当css中border-collapse属性[collapse-合并、separate-分离])。

  图1-1为cellspacing=”10”

关于table元素的认识

2.Cellpadding:表示单元格内容与其边框之间的空白(相当css中padding属性)

这个html属性在特殊的布局是很有着用(如:edm)

图1-2为cellpadding=”10”

关于table元素的认识

二、Css方面

1.了解table元素的童鞋都知道table元素设置了border-collapse:collapse时再padding是没有效果的;

图1-3为border-collapse:collapse;padding:20px;

关于table元素的认识

图1-4为border-collapse:separate;padding:20px;(IE6/7显示还是如图1-3)

关于table元素的认识

2.th,td设置margin也没有效果;

图1-5为th,td的margin为20px

关于table元素的认识

3.在我的测试中tr设置margin,padding都是没有效果。

图1-6为margin,padding都为20px

关于table元素的认识

4.Css属性table-layout是设置表格的宽度是“自动式”还是“固定式”

图1-7为table-layout为auto(默认)-内容自动式

关于table元素的认识

图1-8为table-layout为fixed-内容固定式,不管内容多少都按固定宽度显示

关于table元素的认识

三、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运用很广范,比如漂浮在页面上的分享到。