HTML DOM TableHeader用法及代碼示例

HTML DOM中的TableHeader對象用於表示HTML <th>元素。可以使用getElementById()方法訪問<th>元素。

用法:

用於訪問<th>元素。
```
document.getElementById("id");
```
它用於創建<th>元素。
```
document.createElement("th");
```

TableData對象屬性：

屬性	描述
abbr	此屬性用於設置或返回abbr屬性的值。
align	此屬性用於設置或返回數據單元中內容的水平對齊方式。
vAlign	此屬性用於設置或返回單元格中內容的垂直對齊方式。
width	此屬性用於設置或返回數據單元的寬度。
axis	此屬性用於設置或返回相關數據單元格的逗號分隔列表。
background	此屬性用於設置或返回數據單元格的背景圖像。
bgColor	此屬性用於設置或返回表格的背景色。
cellIndex	此屬性用於返回表格行的單元格集合中單元格的位置。
ch	此屬性用於設置或返回數據單元格的對齊字符。
chOff	此屬性用於設置或返回ch屬性的水平偏移量。
colSpan	此屬性用於設置或返回colspan屬性的值。
headers	此屬性用於設置或返回headers屬性的值。
height	此屬性用於設置或返回數據單元格的高度。
noWrap	此屬性用於設置或返回是否可以包裝單元格中的內容。
rowSpan	此屬性用於設置或返回rowspan屬性的值。

範例1：本示例使用getElementById()方法訪問<th>元素。

<!DOCTYPE html> 
<html> 
      
<head> 
      
    <!-- style to set border -->
    <style> 
        table, th, td { 
            border:1px solid black; 
        } 
    </style> 
</head> 
  
<body>  
  
    <h1>GeeksforGeeks</h1>  
  
    <h2>DOM TableHeader Object</h2>  
  
    <table> 
        <tr> 
            <th id = "table">Username</th> 
        </tr> 
          
        <tr> 
            <td>geeks</td> 
        </tr> 
    </table> 
      
    <p> 
        Click on button to change th element. 
    </p> 
      
    <button onclick = "myGeeks()"> 
        Click Here! 
    </button> 
      
    <!-- Script to access th element -->
    <script> 
        function myGeeks() { 
            var tab = document.getElementById("table"); 
            tab.innerHTML = "User Handle"; 
        } 
    </script> 
</body> 
  
</html>

輸出：
在單擊按鈕之前：

單擊按鈕後：

範例2：本示例使用document.createElement()方法創建<th>元素。

<!DOCTYPE html> 
<html> 
      
<head> 
      
    <!-- style to set border -->
    <style> 
        table, th, td { 
            border:1px solid black; 
        } 
    </style> 
</head> 
  
<body>  
  
    <h1>GeeksforGeeks</h1>  
  
    <h2>DOM TableHeader Object</h2>  
  
    <table id = "tab"> 
        <tr id = "mytable"> 
        </tr> 
    </table> 
      
    <p>Click the button to create a th element.</p> 
      
    <button onclick = "myGeeks()"> 
        Click Here! 
    </button> 
      
    <!-- script to create th element -->
    <script> 
        function myGeeks() { 
              
            /* Create an input element */ 
            var tab_row = document.createElement("TH"); 
              
            /* Set the the text node */ 
            var text = document.createTextNode("Table Header Content"); 
            tab_row.appendChild(text); 
            document.getElementById("mytable").appendChild(tab_row); 
        } 
    </script> 
</body> 
  
</html>

輸出：
在單擊按鈕之前：

單擊按鈕後：

相關用法

注：本文由純淨天空篩選整理自divyatagoel0709大神的英文原創作品 HTML | DOM TableHeader Object。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。