html body標籤

時間  2019-11-12
標籤 html body 標籤 欄目 HTML 简体版
原文   原文鏈接

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

完畢。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程