HTML 中表格table 的相关知识

最新推荐文章于 2022-05-07 09:52:27 发布

zhenghao35791

最新推荐文章于 2022-05-07 09:52:27 发布

阅读量736

点赞数

<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>
 
  

完毕。

作者： XuGang 网名：钢钢

出处： http://xugang.cnblogs.com

声明：本文版权归作者和博客园共有。转载时必须保留此段声明，且在文章页面明显位置给出原文连接地址！

分类: HTML/CSS, JavaScript

标签: JavaScript, CSS, HTML

绿色通道：好文要顶关注我收藏该文与我联系

钢钢
关注 - 69
粉丝 - 491

荣誉：推荐博客

+加关注

(请您对文章做出评价)

« 上一篇：关于JavaScript 的事件[上]
» 下一篇： HTML 中表单form 的相关知识

posted on 2010-08-11 14:37 钢钢阅读(4560) 评论(19) 编辑收藏

#1楼  2010-08-11 14:53 guangrou

补充一个 <table> 标签内的 <colgroup> 子标签的使用:

 
            < 
            html 
            > 
           
            < 
            body 
            > 
           
            < 
            table  
            border="2" rules="groups"> 
           
            <!-- table 规则设定为“groups”，这将在由 colgroup 定义的 
           
            表格列周围放置内部分隔线。 --> 
           
            < 
            colgroup  
            span="2" style="color:blue;font-size:12px;"> 
           
            <!-- 更改第1列的字体为红色。这是col元素的属性导致的。--> 
           
            < 
            col  
            style="color:red"> 
           
            <!-- 更改第2列的字体大小为 14px --> 
           
            < 
            col  
            style="font-size:14px;"> 
           
            </ 
            colgroup 
            > 
           
            < 
            colgroup  
            style="color:blue;background-color:yellow;"> 
           
            </ 
            colgroup 
            > 
           
            < 
            tr 
            > 
           
            < 
            td 
            >此列位于第一组。</ 
            td 
            > 
           
            < 
            td 
            >此列位于第一组。</ 
            td 
            > 
           
            < 
            td 
            >此列位于第二组。</ 
            td 
            > 
           
            </ 
            tr 
            > 
           
            < 
            tr 
            > 
           
            < 
            td 
            >此列位于第一组。</ 
            td 
            > 
           
            < 
            td 
            >此列位于第一组。</ 
            td 
            > 
           
            < 
            td 
            >此列位于第二组。</ 
            td 
            > 
           
            </ 
            tr 
            > 
           
            </ 
            table 
            > 
           
            </ 
            body 
            > 
           
            </ 
            html 
            >

=============================================================
使用javascript 实现表格数据管理
=============================================================
详细讲解: http://www.cnblogs.com/jaiho/archive/2011/02/20/table_manager.html

此文使用javascript 实现了表格数据管理的以下几个功能：
--------------------------------------------------------------------------------------------------------------------------
o 点击添加按钮可以添加一个空的可以修改的记录。
o 点击表格单元格可以修改文本。
o 修改后实现了保存的接口。
o 如果添加了新的记录而未做任何修改值都为null，保存全部时将被忽略。
o 保存全部时只保存修改过的值，原有的数据不再重复保存。
o 刷新时如果数据未保存则提示保存。
o 点击删除时如果是临时添加的无效数据则直接删除，如果保存过的记录则实现了记录删除的接口。

考虑到嵌套的比较多就没有使用form表单，使用javascript 直接解析DOM来分离出了要传递的数据。