<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> |
完毕
—-想了解更多的linux相关异常处理怎么解决关注<计算机技术网(www.ctvol.com)!!>
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/htmltutorial/53032.html