zoukankan      html  css  js  c++  java
  • 关于table元素的认识

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

    一、table的自身属性

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

      图1-1cellspacing=”10”

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

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

    1-2cellpadding=”10”

    二、Css方面

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

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

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

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

    1-5thtdmargin20px

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

    1-6marginpadding都为20px

     

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

    1-7table-layoutauto(默认)-内容自动式

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

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

     

  • 相关阅读:
    Fix RICHTX32.OCX Issue on Windows 7
    Solved: c:\windows\system32\config\systemprofile\desktop
    递归的现实应用
    Win 8 app 获取窗口的宽度和高度, 本地化, 及文本读取
    均匀设计U Star 665
    GridView.ScrollIntoView() doesn't work
    XML节点访问与更新
    Keyboard supports in Software Testing
    WordPress程序备受喜爱的原因:十八般武艺
    paypal注册教程(PP注册教程)paypal使用方法
  • 原文地址:https://www.cnblogs.com/qiheng/p/3368196.html
Copyright © 2011-2022 走看看