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> |
| <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> |
顯示效果如下：
| 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 | |
注意：
IE6 只有<a>標記支持:hover 偽類，其余標簽都不支持！
并且<a>標記的偽類有順序：a:link -> a:visited -> a:hover -> a:active
?
?
利用DOM 的方法和屬性實現對表格的動態操作
?
?
A? 利用DOM 動態添加一行
| <script?language="javascript"> |
| window.οnlοad=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.οnlοad=function(){ |
| ????var?oTable?=?document.getElementById("mytable"); |
| ????//修改單元格內容 |
| ????oTable.rows[3].cells[4].innerHTML?=?"更改的內容"; |
| } |
| </script> |
?
?
C? 利用DOM 刪除一個單元格或一行
| <script?language="javascript"> |
| window.οnlοad=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.οnlοad=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.οnlοad=function(){ |
| ????var?oTable?=?document.getElementById("mytable"); |
| ????deleteColumn(oTable,2);?//參數2:表示要刪除的列號 |
| } |
| </script> |
完畢。
?
轉載于:https://www.cnblogs.com/wwj-bky88/p/5532608.html
總結
以上是生活随笔為你收集整理的html body标签的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python中列表元素类型可以不同吗_l
- 下一篇： esp32 怎么分配freertos 堆