<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 的方法和属性实现对表格的动态操作
利用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
>
利用DOM 修改单元格内容：
<
script
language
="javascript"
>
window.onload
=
function
(){
var
oTable
=
document.getElementById(
"
mytable
"
);
//
修改单元格内容
oTable.rows[
3
].cells[
4
].innerHTML
=
"
更改的内容
"
;
}
</
script
>
利用DOM 删除一个单元格或一行：
<
script
language
="javascript"
>
window.onload
=
function
(){
var
oTable
=
document.getElementById(
"
mytable
"
);
//
删除一行，后面的行号自动补齐
oTable.deleteRow(
2
);
//
删除一个单元格，后面的也自动补齐
oTable.rows[
2
].deleteCell(
1
);
}
</
script
>
利用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
>
利用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
>
1.本站内容仅供参考，不作为任何法律依据。用户在使用本站内容时，应自行判断其真实性、准确性和完整性，并承担相应风险。
2.本站部分内容来源于互联网，仅用于交流学习研究知识，若侵犯了您的合法权益，请及时邮件或站内私信与本站联系，我们将尽快予以处理。
3.本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
4.根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬。”您需知晓本站所有内容资源均来源于网络，仅供用户交流学习与研究使用，版权归属原版权方所有，版权争议与本站无关，用户本人下载后不能用作商业或非法用途，需在24个小时之内从您的电脑中彻底删除上述内容，否则后果均由用户承担责任；如果您访问和下载此文件，表示您同意只将此文件用于参考、学习而非其他用途，否则一切后果请您自行承担，如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。
5.本站是非经营性个人站点，所有软件信息均来自网络，所有资源仅供学习参考研究目的，并不贩卖软件，不存在任何商业目的及用途
暂无评论内容