表格是网页上最常见的元素，但是，现在对很多刚入行的前端们那是谈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运用很广范，比如漂浮在页面上的分享到。

关于table元素的认识的更多相关文章

  1. IE 中单元格的 colspan 属性在某些情况下会影响 TABLE 元素的自动布局

    今天在写一个jsp页面时,遇到一个如下的问题:在一个table中写了如下内容,table中定义了4列,在firefox中能正常显示,而在ie8中,显示不正常, 如下如图1:第二,三,四列宽度发生变化, ...

  2. HTML&CSS Table元素详细解说

    1.预热 css样式多如牛毛,我不可能一个一个去讲,那样好像背字典一样,我相信你们也不喜欢这样的方式.所以,我会在实战中慢慢和你讲解,然后,你记住一些重要的css属性就可以了.关键是,你要学会去查资料 ...

  3. 【HTML】table元素

    1.最简单的table <table> <tr> <th></th> </tr> <tr> <td></td& ...

  4. Bootstrap table 元素列内容超长自动折行显示方法?

    共需要四步: 1.在table元素的父容器div加上:class="table-responsive" 3.设置表头th的width:<th width="20%& ...

  5. jq 获取table元素，ajax 静态填加数据

    知识点: 1.jq如何操作table->操作html内的元素 2. this 怎么使用 问题: 1.点击 修改 后,自动刷新了.判断取值,提示错误.正确出不来 2.ajax传值操作如何保密 ht ...

  6. JQuery操作Table元素

    使用Jquery操作Table中的tr向上或向下移动,以及全选和反选操作. 点击Table Head中的复选框,全选或反选表格中所有的复选框; 选中复选框,点击Up 按钮, tr上移;点击 Down ...

  7. Jquery table元素操作-创建|数据填充|重置|隐藏行

    1.Jquery创建表格 /** * 创建表格 * @param label 标题 json格式,数据结构见附录1 * @param data 数据 json格式,数据结构见附录1 * @param ...

  8. HTML table元素

    搬运,内容来自HTML Dog. 简单示例 <!DOCTYPE html> <html> <body> <table> <tr> <t ...

  9. table元素使用bug

    一.问题的产生 javaWeb课上老师让我们用表单做一个简单的自我介绍,但是在对表单里的单元格进行合并时出现了变形的情况,这里做个记录. 二.实验 让我们先做一个简单的4*4表格 <!DOCTY ...

随机推荐

  1. Spring Boot 内嵌Tomcat的端口号的修改

    操作非常的简单,不过如果从来没有操作过,也是需要查找一下资料的,所以,在此我简单的记录一下自己的操作步骤以备后用! 1:我的Eclipse版本,不同的开发工具可能有所差异,不过大同小异 2:如何进入对 ...

  2. TCP/IP详解学习笔记（11）-- TFTP：简单文本传输协议，BOOTP：引导程序协议

    1.TFTP:      TFTP(Trivial File Transfer Protocol,简单文件传输协议)是TCP/IP协议族中的一个用来在客户机与服务器之间进行简单文件传输的协议,基于UD ...

  3. WPF学习系列之八（形状，画刷和变换）

    形状,画刷和变换   概述: 在许多用户界面技术中,普通控件和自定义绘图之间具有清晰的区别.通常来说,绘图特性只用于特定的应用程序--如游戏,数据可视化和物理仿真等.而WPF具有一个非常不同的原则.它 ...

  4. CRC校验代码实现

    1.CRC校验简介 CRC就是块数据的计算值,它的全称是“Cyclic Redundancy Check”,中文名是“循环冗余码”.CRC校验是数据通讯中最常采用的校验方式.在嵌入式软件开发中,经常要 ...

  5. oracle 游标示例

    declare iCount int:=0; sPath nvarchar2(200); tdzsh nvarchar2(50);begin for x in (select c.imgpath fr ...

  6. Android代码写View

    1.Java Code package com.fish.helloworld; import android.app.Activity; import android.content.Context ...

  7. 手机连接wifi自动弹窗的原理及其实现方案

    一.手机连上wifi后会自动弹窗的原理 生活中,有很多需要认证的路由器,手机连接wifi热点后会自动弹出一个网页,让用户输入账号和密码,比如星巴克,肯地基,麦当劳,甚至是火车站和机场的候车室.其实这是 ...

  8. iOS中僵尸对象的实现方法

    什么是僵尸对象?所谓僵尸,就是过度释放的对象.在ios开发中,僵尸对象对于开发人员调试程序来说很有用.我们通常将NSZombieEnabled环境变量设置为YES来打开僵尸对象,但这会导致所有的对象都 ...

  9. js设计模式（11）---命令模式

    0.前言 早上好,早晨的时光总是美好的,坐在空调屋里,看着外边的蓝天白云,不停地敲击着键盘,多么美好地享受,也许屌丝就是如此容易满足. 1.什么是命令模式? 用于将一个请求封装为一个对象,从而可用不同 ...

  10. [leetcode]_Merge Sorted Array

    题目:合并两个有序数组A , B,将合并后的数组存到A中.假设A的空间足够装下A和B所有的元素. 思路:这道题考虑如果正向扫描两个数组,则每插入一个元素,则需移动A后的所有元素.换个角度想,既然元素个 ...