HTML中有关表格table 的知识


<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">
<!--
.datalist{
    border:1px solid #429fff;    /* 表格边框 */
    font-family:Arial;
    border-collapse:collapse;    /* 边框重叠 */
}
.datalist tr:hover{
    background-color:#c4e4ff;   /* 动态变色,IE6下无效!*/
}
.datalist caption{
    padding-top:3px;
    padding-bottom:2px;
    font:bold 1.1em;
    background-color:#f0f7ff;
    border:1px solid #429fff;    /* 表格标题边框 */
}
.datalist th{
    border:1px solid #429fff;    /* 行、列名称边框 */
    background-color:#d2e8ff;
    font-weight:bold;
    padding-top:4px; padding-bottom:4px;
    padding-left:10px; padding-right:10px;
    text-align:center;
}
.datalist td{
    border:1px solid #429fff;    /* 单元格边框 */
    text-align:right;
    padding:4px;
}
-->
</style>
</head>
<body> 
<table class="datalist" summary="财政报表">
    <caption>财政报表 2005 - 2008</caption>
    <thead>
    <tr>
        <th>&nbsp;</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>

显示效果如下:

财政报表 2005 - 2008
  2005 2006 2007 2008
拨款 11,980 12,650 9,700 10,600
捐款 4,780 4,989 6,700 6,590
投资 8,000 8,100 8,760 8,490
募捐 3,200 3,120 3,700 4,210
销售 28,400 27,100 27,950 29,050
杂费 2,100 1,900 1,300 1,760
总计 58,460 57,859 58,110 60,700
2008 年统计

注意:

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>

完毕



相关阅读:
php5 and xml示例
window.onbeforeunload方法在IE下无法正常工作的解决办法
PHP持久连接mysql_pconnect()函数使用介绍
建立灵巧结构的PHP程序
JS教程:线小测试程序
User Tips: Using Return Values from a SQL Server Stored Procedure to Customize Error Messages_QQGB.c
php设计模式介绍之编程惯用法
Jquery 动态添加按钮实现代码
javascript循环数组的方法
JavaScript判断浏览器类型及版本
ASP.NET 页面刷新的实现方法(包括html,js)
私有属性和使用JavaScript的信息隐藏
ubuntu英文环境下使用小企鹅
jQuery 使用手册(三)
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4