HTML 中表格table 的相关知识

您现在的位置：.Net中文社区>> 网页标准>>正文内容

HTML 中表格table 的相关知识

发布时间：2010年08月12日点击数：次佚名

<table>标签中比较少见的属性和子标签：

summary 属性：用于概括整个表格的内容。它对于搜索引擎的机器人记录信息十分重要。

bordercolor 属性：用来设置表格边框的颜色。但它在不同的浏览器下显示的效果不一致。

（不推荐使用bordercolor 属性，而推荐使用CSS 样式表的border 属性来进行设置）

cellspacing 属性：用来设置表格的单元格之间的间距。

（推荐使用CSS 样式表的border-collapse 属性来进行设置）

<caption> 标记：表示表格的大标题，该标记可以出现在<table> 之间的任意位置。

它对于搜索引擎的机器人记录信息十分重要。

<th> 标记：用于表示表格的行或者列的名称。

<th> 标记的scope 属性：专门用来区分行名称和列名称。如：<th scope='row'> 或 <th scope='col'>

<table>里还包含：<thead> 、<tbody> 、<tfoot> 标记。它们分别表示表格的表头，表正文，表脚。
在打印网页内容的时候，如果表格很大，一页打印不完，<thead>和<tfoot>将在每一页出现。

（注意：在IE 中无效，但在 Firefox 有效）

经典的表格代码如下：

<html>

<head>

<title>财政报表</title>

<style type="text/css">



</style>

</head>

<body>

<table class="datalist" summary="财政报表">

    <caption>财政报表 2005 - 2008</caption>

    <thead>

    <tr>

        <th> </th>

        <th scope="col">2005</th>

        <th scope="col">2006</th>

        <th scope="col">2007</th>

        <th scope="col">2008</th>

    </tr>

    </thead>

    <tbody>

    <tr>

        <th scope="row">拨款</th>

        <td>11,980</td>

        <td>12,650</td>

        <td>9,700</td>

        <td>10,600</td>

    </tr>

    <tr>

        <th scope="row">捐款</th>

        <td>4,780</td>

        <td>4,989</td>

        <td>6,700</td>

        <td>6,590</td>

    </tr>

    <tr>

        <th scope="row">投资</th>

        <td>8,000</td>

        <td>8,100</td>

        <td>8,760</td>

        <td>8,490</td>

    </tr>

    <tr>

        <th scope="row">募捐</th>

        <td>3,200</td>

        <td>3,120</td>

        <td>3,700</td>

        <td>4,210</td>

    </tr>

    </tbody>

    <tfoot>

    <tr>

       <td colspan="5">2008 年统计</td>

    </tr>

    </tfoot>

</table>

</body>

</html>

显示效果如下：

注意：
IE6 只有<a>标记支持:hover 伪类，其余标签都不支持！
并且<a>标记的伪类有顺序：a:link -> a:visited -> a:hover -> a:active

利用DOM 的方法和属性实现对表格的动态操作

A 利用DOM 动态添加一行

<script language="javascript">

window.onload=function(){

    //插入一行

    var oTr = document.getElementById("mytable").insertRow(2);

    var aText = new Array();

    aText[0] = document.createTextNode("cell1的内容");

    aText[1] = document.createTextNode("cell2的内容");

    aText[2] = document.createTextNode("cell3的内容");

    aText[3] = document.createTextNode("cell4的内容");

    aText[4] = document.createTextNode("cell5的内容");

    for(var i=0;i<aText.length;i++){

        var oTd = oTr.insertCell(i);

        oTd.appendChild(aText[i]);

    }

}

</script>

B 利用DOM 修改单元格内容

<script language="javascript">

window.onload=function(){

    var oTable = document.getElementById("mytable");

    //修改单元格内容

    oTable.rows[3].cells[4].innerHTML = "更改的内容";

}

</script>

C 利用DOM 删除一个单元格或一行

<script language="javascript">

window.onload=function(){

    var oTable = document.getElementById("mytable");

    //删除一行，后面的行号自动补齐

    oTable.deleteRow(2);

    //删除一个单元格，后面的也自动补齐

    oTable.rows[2].deleteCell(1);

}

</script>

D 利用DOM 动态添加一列，并动态删除某行

<script language="javascript">

function myDelete(){

    var oTable = document.getElementById("mytable");

    //删除该行

    this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);

}



window.onload=function(){

    var oTable = document.getElementById("mytable");

    var oTd;

    //动态添加delete链接

    for(var i=1;i<oTable.rows.length;i++){

        oTd = oTable.rows[i].insertCell(5);

        oTd.innerHTML = "<a href='#'>delete</a>";

        oTd.firstChild.onclick = myDelete; //添加删除事件

    }

}

</script>

E 利用DOM 动态删除某一列

<script language="javascript">

function deleteColumn(oTable,iNum){

    //自定义删除列函数，即每行删除相应单元格

    for(var i=0;i<oTable.rows.length;i++)

        oTable.rows[i].deleteCell(iNum);

}



window.onload=function(){

    var oTable = document.getElementById("mytable");

    deleteColumn(oTable,2); //参数2:表示要删除的列号

}

</script>

HTML 中表格table 的相关知识

随机文章推荐

本站热点业务

更多模板/案例展示

热门推荐

最近更新