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 Gates555 77 854555 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>&nbsp;</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 - 2008
?2005200620072008
2008 年統計
撥款11,98012,6509,70010,600
捐款4,7804,9896,7006,590
投資8,0008,1008,7608,490
募捐3,2003,1203,7004,210
銷售28,40027,10027,95029,050
雜費2,1001,9001,3001,760
總計58,46057,85958,11060,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

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/458452.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/458452.shtml
英文地址，請注明出處：http://en.pswp.cn/news/458452.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

創建字符串的方法

創建字符串的方法

//創建一個字符串常量 NSString *str"字符串"; //創建一個空的字符對象 NSString *str1[[NSString alloc]init];//實例方法 NSString *str2[NSString string];//類方法 //快速創建一個字符串 NSString *str3[[NSString alloc]initWithString:"字符串"];//實…
閱讀更多...
DataReceivedEventHandler 委托 接收調用執行進程返回數據

DataReceivedEventHandler 委托 接收調用執行進程返回數據

https://msdn.microsoft.com/zh-cn/library/azure/system.diagnostics.datareceivedeventhandler備注創建 DataReceivedEventHandler 委托時&#xff0c;需要標識將處理該事件的方法。 若要將事件與事件處理程序關聯&#xff0c;請將該委托的一個實例添加到事件中。 除非移除了…
閱讀更多...
coreData

coreData

CoreData使用 創建步驟流程 第一步先創建.xcdatamodeld文件&#xff08;New File -> iOS -> Core Data ->Data Model&#xff09; 屏幕快照 2016-07-07 下午10.40.16.png名字雖然可以任意取&#xff0c;但最好還是取和自己存儲數據庫名字一樣的名字。這樣可讀性更高些…
閱讀更多...
命令行下mysql新建用戶及分配權限

命令行下mysql新建用戶及分配權限

創建用戶&#xff1a; CREATE USER usernamehost IDENTIFIED BY password; 說明:username – 你將創建的用戶名, host – 指定該用戶在哪個主機上可以登陸,如果是本地用戶可用localhost, 如 果想讓該用戶可以從任意遠程主機登陸,可以使用通配符%. password – 該用戶的登陸密…
閱讀更多...
PetaPoco初體驗（轉）

PetaPoco初體驗（轉）

PetaPoco初體驗&#xff08;轉&#xff09; PetaPoco初體驗&#xff08;轉&#xff09;大部分轉自&#xff1a; http://landyer.com/archives/138 PetaPoco C#微型ORM框架&#xff0c;基本無需配置&#xff0c;僅由單個cs文件構成&#xff0c;支持.net3.5 .net4.0。 截稿時Peta…
閱讀更多...
iOS當中的設計模式

iOS當中的設計模式

代理模式 應用場景&#xff1a;當一個類的某些功能需要由別的類來實現&#xff0c;但是又不確定具體會是哪個類實現。 優勢&#xff1a;解耦合 敏捷原則&#xff1a;開放-封閉原則 實例&#xff1a;tableview的 數據源delegate&#xff0c;通過和protocol的配合&#xff0c…
閱讀更多...
c#的dllimport使用方法詳解

c#的dllimport使用方法詳解

DllImport是System.Runtime.InteropServices命名空間下的一個屬性類&#xff0c;其功能是提供從非托管DLL&#xff08;托管/非托管是微軟的.net framework中特有的概念&#xff0c;其中&#xff0c;非托管代碼也叫本地&#xff08;native&#xff09;代碼。與Java中的機制類似&…
閱讀更多...
each函數循環數據表示列舉，列舉循環的時候添加dom的方法

each函數循環數據表示列舉，列舉循環的時候添加dom的方法

var dotBox $(#bannerNum);var item <li></li>;var itemSize $(#bannerBack p).length;var dotBoxWidth itemSize*24;$(#bannerBack p).each(function () { dotBox.append(<li></li>); dotBox.find(li).eq(0).addClass(current);});這里要根…
閱讀更多...
使用lxml代替beautifulsoup

使用lxml代替beautifulsoup

深入使用過lxml的都會深深地喜歡上它,雖然BeautifulSoup很流行,但是深入了解lxml后,你就再也不會使用bs了 我覺得beautifulsoup不好用,速度也慢(雖然可以使用lxml作為解析器了).另外soup.find_all這種簡直就是手工時代的操作(很多人使用find find_all這幾個函數, 其實它們使用起…
閱讀更多...
QT調用dll且進入DLL src code調試

QT調用dll且進入DLL src code調試

qt應用程序AA.exe調用qt寫的BB.DLL時&#xff0c;進入BB.DLL src code調試 1、debug生成AA.exe 2、將debug生成的AA.exe整包debug folder放到BB.dll的debug生成的文件夾中 3、設置BB.dll這個project&#xff1a;項目----運行-----Executable中選擇BB.dll的debug文件夾中的AA.ex…
閱讀更多...
php安裝編譯時 configure: error: Cannot find OpenSSL's evp.h

php安裝編譯時 configure: error: Cannot find OpenSSL's evp.h

yum install error: protected multilib versions errorsudo yum downgrade openssl 降級sudo yum install openssl-devel 另外參考yum install -y ncurses-devel yum install openssl openssl-develyum install openssl openssl-devel --setoptprotected_multilibfalse ln -s …
閱讀更多...
laravel項目中css樣式表的背景圖片不顯示

laravel項目中css樣式表的背景圖片不顯示

剛學laravel&#xff0c;遇到了很多坑&#xff0c;感覺laravel是挺強大的。 建好后臺項目&#xff0c;奈何css樣式表的背景圖片不顯示 .mainhd {background: url(../images/sky/body_bg.png) repeat-x 0px 0px; } 按理上面的寫法沒錯&#xff0c;因為是從別的后臺搬過來的&…
閱讀更多...
KVC KVO

KVC KVO

1、KVC&#xff0c;即是指 NSKeyValueCoding&#xff0c;一個非正式的Protocol&#xff0c;提供一種機制來間接訪問對象的屬性。而不是通過調用Setter、Getter方法訪問。KVO 就是基于 KVC 實現的關鍵技術之一。 Demo&#xff1a; interface myPerson : NSObject { …
閱讀更多...
VS2010中 C++創建DLL圖解

VS2010中 C++創建DLL圖解

一、DLL的創建 創建項目: Win32->Win32項目&#xff0c;名稱&#xff1a;MyDLL 選擇DLL (D) ->完成. 1、新建頭文件testdll.htestdll.h代碼如下&#xff1a;#ifndef TestDll_H_#define TestDll_H_#ifdef MYLIBDLL#define MYLIBDLL extern "C" _declspec(dllimp…
閱讀更多...
js理解 call( ) | apply( ) | caller( ) | callee( )

js理解 call( ) | apply( ) | caller( ) | callee( )

被js的這幾個方法搞的this暈頭轉向&#xff0c;下定決心搞清楚&#xff1b;1、call( )和apply( ):兩者都可以將函數綁定到另外一個對象上去運行&#xff0c;只是參數的傳遞方式不同&#xff0c;兩者都可以使當前函數擁有另一個對象的屬性和方法&#xff0c;實現js下的繼承&…
閱讀更多...
上傳SVN丟失.a文件的問題

上傳SVN丟失.a文件的問題

iOS項目上傳到svn中&#xff0c;.a文件丟失 用Cornerstone工具&#xff0c;解決這個問題 1.打開Cornerstone左上角&#xff0c;點Cornerstone->Preferences->Subversion 2.Global lgnores下面有一個Use default global ignores 默認這里方框中會打鉤&#xff08;這就是.a…
閱讀更多...
使用公用表表達式的遞歸查詢

使用公用表表達式的遞歸查詢

微軟從SQL2005起引入了CTE(Common Table Expression)以強化T-SQL。公用表表達式 (CTE) 具有一個重要的長處&#xff0c;那就是可以引用其自身。從而創建遞歸 CTE。遞歸 CTE 是一個反復運行初始 CTE 以返回數據子集直到獲取完整結果集的公用表表達式。 當某個查詢引用遞歸 CTE 時…
閱讀更多...
C#委托實現C++ Dll中的回調函數

C#委托實現C++ Dll中的回調函數

from:https://blog.csdn.net/ferrycooper/article/details/63261771很多的Dll都是C和C寫的&#xff0c;那么如果C#想要調用Dll中的函數怎么辦&#xff0c;尤其是Dll函數其中一個參數是函數指針的&#xff0c;即里面有回掉函數的用C#怎么實現&#xff1f; C中的回掉函數在C#中有…
閱讀更多...
安裝Birt方法

安裝Birt方法

安裝BIRT 方法&#xff1a; 博客地址&#xff1a;http://www.mamicode.com/info-detail-850588.html 注意&#xff1a;在 Install new Software 中輸入地址&#xff1a;http://download.eclipse.org/birt/update-site/4.2-interim 看好了 出來的四項要全部選中 &#xff0c;然后…
閱讀更多...
iOS NSString和NSDate轉換

iOS NSString和NSDate轉換

后臺返回的時間字符串不是標準的時間而是計算機時間的時候&#xff0c;我們需要將它們轉換為標準時間&#xff0c;再進行轉換。 //字符串轉為時間&#xff0c;時間格式自己定 NSString * time "1501776000"; //時間字符串 NSInteger num [time integerValue]; …
閱讀更多...
最新文章

Copyright @ 2022~2023