table
table 属性：
border ：定义表格的边框宽度，默认为0，即无边框。<table border="1">
title ：表格的提示信息，当鼠标移到表格上方时，所提示的信息。
cellpadding ：规定单元边沿与其内容之间的空白。
cellspacing ：规定单元格之间的空白。
th、td 属性：
colspan : 表示横向合并单元格 (
)
rowspan ：表示纵向合并单元格 ( 
)
内涵标签
<caption></caption>：表头信息。
<tr></tr> ：定义一个表格行；
<th></th> ：定义一个表格头；若是纯文字，默认会以粗体的样式表现。
<tbody></tbody> ：可以理解为表格的内容区域，在Chrome、FF浏览器通过DOM进行表格动态插入行的时候，要使用这个。如果不进行DOM操作，可不用添加。
<td></td> ：定义一个单元格；
table 表格的书写形式两种：
<html>
<body>
<h4>表头：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th>电话</th>
<th>电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>垂直的表头：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>电话</th>
<td>555 77 854</td>
</tr>
<tr>
<th>电话</th>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
表头：
| 姓名 | 电话 | 电话 |
|---|---|---|
| Bill Gates | 555 77 854 | 555 77 855 |
垂直的表头：
| 姓名 | Bill Gates |
|---|---|
| 电话 | 555 77 854 |
| 电话 | 555 77 855 |
<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> </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 | 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> |
完毕。
Y@7Z~}A.png)