tablejavascript
table 屬性:css
border :定義表格的邊框寬度,默認爲0,即無邊框。<table border="1">html
title :表格的提示信息,當鼠標移到表格上方時,所提示的信息。java
cellpadding :規定單元邊沿與其內容之間的空白。瀏覽器
cellspacing :規定單元格之間的空白。app
th、td 屬性:函數
colspan : 表示橫向合併單元格 ( )this
rowspan :表示縱向合併單元格 ( )搜索引擎
內涵標籤spa
<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> |
完畢。