html body标签 | 易学教程

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>

<!--

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

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

<tfoot>

<tr>

</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 动态添加一行

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 修改单元格内容

window.onload=function(){

var oTable = document.getElementById("mytable");

//修改单元格内容

oTable.rows[3].cells[4].innerHTML = "更改的内容";

}

</script>

C 利用DOM 删除一个单元格或一行

window.onload=function(){

var oTable = document.getElementById("mytable");

//删除一行，后面的行号自动补齐

oTable.deleteRow(2);

//删除一个单元格，后面的也自动补齐

oTable.rows[2].deleteCell(1);

}

</script>

D 利用DOM 动态添加一列，并动态删除某行

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 动态删除某一列

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>

完毕。

来源：http://www.cnblogs.com/wwj-bky88/p/5532608.html

标签

html表格

html代码

单元格

border

table