當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

html body标签

發(fā)布時(shí)間：2023/12/19 编程问答 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 html body标签小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

table

table?屬性：

　　border?：定義表格的邊框?qū)挾?#xff0c;默認(rèn)為0，即無(wú)邊框。<table border="1">

　　title?：表格的提示信息，當(dāng)鼠標(biāo)移到表格上方時(shí)，所提示的信息。

? ? ?cellpadding?：規(guī)定單元邊沿與其內(nèi)容之間的空白。

? ? ?cellspacing? ：規(guī)定單元格之間的空白。

th、td?屬性：

　　colspan?: 表示橫向合并單元格 (?)

　　rowspan?：表示縱向合并單元格 (??)

內(nèi)涵標(biāo)簽

<caption></caption>：表頭信息。

<tr></tr> ：定義一個(gè)表格行；

<th></th> ：定義一個(gè)表格頭；若是純文字，默認(rèn)會(huì)以粗體的樣式表現(xiàn)。

<tbody></tbody> ：可以理解為表格的內(nèi)容區(qū)域，在Chrome、FF瀏覽器通過(guò)DOM進(jìn)行表格動(dòng)態(tài)插入行的時(shí)候，要使用這個(gè)。如果不進(jìn)行DOM操作，可不用添加。

<td></td> ：定義一個(gè)單元格；

table 表格的書(shū)寫(xiě)形式兩種：

<html>

<body>

<h4>表頭：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th>電話(huà)</th>
<th>電話(huà)</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>電話(huà)</th>
<td>555 77 854</td>
</tr>
<tr>
<th>電話(huà)</th>
<td>555 77 855</td>
</tr>
</table>

</body>
</html>?

表頭：

姓名電話(huà)電話(huà)

Bill Gates

555 77 854

555 77 855

垂直的表頭：

姓名電話(huà)電話(huà)

Bill Gates

555 77 854

555 77 855

<table>標(biāo)簽中比較少見(jiàn)的屬性和子標(biāo)簽：

summary 屬性：用于概括整個(gè)表格的內(nèi)容。它對(duì)于搜索引擎的機(jī)器人記錄信息十分重要。

bordercolor 屬性：用來(lái)設(shè)置表格邊框的顏色。但它在不同的瀏覽器下顯示的效果不一致。

???????????????????????? ?? （不推薦使用bordercolor 屬性，而推薦使用CSS 樣式表的border 屬性來(lái)進(jìn)行設(shè)置）

cellspacing 屬性：用來(lái)設(shè)置表格的單元格之間的間距。

?????????????????????????? （推薦使用CSS 樣式表的border-collapse 屬性來(lái)進(jìn)行設(shè)置）

<caption> 標(biāo)記：表示表格的大標(biāo)題，該標(biāo)記可以出現(xiàn)在<table> 之間的任意位置。

???????????????????????????它對(duì)于搜索引擎的機(jī)器人記錄信息十分重要。

<th> 標(biāo)記：用于表示表格的行或者列的名稱(chēng)。

<th> 標(biāo)記的scope 屬性：專(zhuān)門(mén)用來(lái)區(qū)分行名稱(chēng)和列名稱(chēng)。如：<th? scope='row'> 或 <th? scope='col'>

<table>里還包含：<thead> 、<tbody> 、<tfoot> 標(biāo)記。它們分別表示表格的表頭，表正文，表腳。
???????????? 在打印網(wǎng)頁(yè)內(nèi)容的時(shí)候，如果表格很大，一頁(yè)打印不完，<thead>和<tfoot>將在每一頁(yè)出現(xiàn)。

??????????? （注意：在IE 中無(wú)效，但在 Firefox 有效）

經(jīng)典的表格代碼如下：

<html>

<head>

<!--

.datalist{

????border:1px?solid?#429fff;????/*?表格邊框?*/

????font-family:Arial;

????border-collapse:collapse;????/*?邊框重疊?*/

}

.datalist?tr:hover{

????background-color:#c4e4ff;???/*?動(dòng)態(tài)變色,IE6下無(wú)效！*/

}

.datalist?caption{

????padding-top:3px;

????padding-bottom:2px;

????font:bold?1.1em;

????background-color:#f0f7ff;

????border:1px?solid?#429fff;????/*?表格標(biāo)題邊框?*/

}

.datalist?th{

????border:1px?solid?#429fff;????/*?行、列名稱(chēng)邊框?*/

????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="財(cái)政報(bào)表">

????<caption>財(cái)政報(bào)表?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?年統(tǒng)計(jì)</td>

????</tr>

????</tfoot>

</table>

</body>

</html>

顯示效果如下：

財(cái)政報(bào)表 2005 - 2008?2005200620072008撥款捐款投資募捐銷(xiāo)售雜費(fèi)總計(jì)

2008 年統(tǒng)計(jì)
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

注意：

IE6 只有<a>標(biāo)記支持:hover 偽類(lèi)，其余標(biāo)簽都不支持！

并且<a>標(biāo)記的偽類(lèi)有順序：a:link -> a:visited -> a:hover -> a:active

利用DOM 的方法和屬性實(shí)現(xiàn)對(duì)表格的動(dòng)態(tài)操作

A? 利用DOM 動(dòng)態(tài)添加一行

window.οnlοad=function(){

????//插入一行

????var?oTr?=?document.getElementById("mytable").insertRow(2);

????var?aText?=?new?Array();

????aText[0]?=?document.createTextNode("cell1的內(nèi)容");

????aText[1]?=?document.createTextNode("cell2的內(nèi)容");

????aText[2]?=?document.createTextNode("cell3的內(nèi)容");

????aText[3]?=?document.createTextNode("cell4的內(nèi)容");

????aText[4]?=?document.createTextNode("cell5的內(nèi)容");

????for(var?i=0;i<aText.length;i++){

????????var?oTd?=?oTr.insertCell(i);

????????oTd.appendChild(aText[i]);

????}

}

</script>

B? 利用DOM 修改單元格內(nèi)容

window.οnlοad=function(){

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

????//修改單元格內(nèi)容

????oTable.rows[3].cells[4].innerHTML?=?"更改的內(nèi)容";

}

</script>

C? 利用DOM 刪除一個(gè)單元格或一行

window.οnlοad=function(){

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

????//刪除一行，后面的行號(hào)自動(dòng)補(bǔ)齊

????oTable.deleteRow(2);

????//刪除一個(gè)單元格，后面的也自動(dòng)補(bǔ)齊

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

}

</script>

D? 利用DOM 動(dòng)態(tài)添加一列，并動(dòng)態(tài)刪除某行

function?myDelete(){

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

????//刪除該行

????this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);

}

window.οnlοad=function(){

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

????var?oTd;

????//動(dòng)態(tài)添加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 動(dòng)態(tài)刪除某一列

function?deleteColumn(oTable,iNum){

????//自定義刪除列函數(shù)，即每行刪除相應(yīng)單元格

????for(var?i=0;i<oTable.rows.length;i++)

????????oTable.rows[i].deleteCell(iNum);

}

window.οnlοad=function(){

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

????deleteColumn(oTable,2);?//參數(shù)2:表示要?jiǎng)h除的列號(hào)

}

</script>

完畢。

轉(zhuǎn)載于:https://www.cnblogs.com/wwj-bky88/p/5532608.html

總結(jié)

以上是生活随笔為你收集整理的html body标签的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： python中列表元素类型可以不同吗_l
下一篇： esp32 怎么分配freertos 堆