HTML | DOM 表头对象

HTML DOM 中的 TableHeader 对象用于表示 HTML 元素。可以使用 getElementById() 方法访问 元素。

句法：

• 它用于访问 元素。

document.getElementById("id");

• 它用于创建 元素。

document.createElement("th");

TableData 对象属性：

Property	Description
abbr	This property is used to set or return the value of the abbr attribute.
align	This property is used to set or return the horizontal alignment of the content in a data cell.
vAlign	This property is used to set or return the vertical alignment of the content within a cell.
width	This property is used to set or return the width of a data cell.
axis	This property is used to set or return a comma-separated list of related data cells.
background	This property is used to set or return the background image of a data cell.
bgColor	This property is used to set or return the background color of a table.
cellIndex	This property is used to return the position of a cell in the cells collection of a table row.
ch	This property is used to set or return an alignment character for a data cell.
chOff	This property is used to set or return the horizontal offset of the ch property.
colSpan	This property is used to set or return the value of the colspan attribute.
headers	This property is used to set or return the value of the headers attribute.
height	This property is used to set or return the height of a data cell.
noWrap	This property is used to set or return whether the content in a cell can be wrapped.
rowSpan	This property is used to set or return the value of the rowspan attribute.

示例 1：此示例使用 getElementById() 方法访问 元素。

html

     

     
    
    
        table, th, td {
            border: 1px solid black;
        }
    

 

 
    GeeksforGeeks
 
    DOM TableHeader Object
 
    
        
            
        
         
        
            
        
    Usernamegeeks
     
     

        Click on button to change th element.
    
 
     
    
        Click Here!
    
     
    
    
        function myGeeks() {
            var tab = document.getElementById("table");
            tab.innerHTML = "User Handle";
        }
    

 

输出：
点击按钮前：

点击按钮后：

示例 2：此示例使用 document.createElement() 方法创建 元素。

html

     

     
    
    
        table, th, td {
            border: 1px solid black;
        }
    

 

 
    GeeksforGeeks
 
    DOM TableHeader Object
 
    
        
        
    
     
     
Click the button to create a th element.
 
     
    
        Click Here!
    
     
    
    
        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);
        }
    

 
                   

输出：
点击按钮前：

点击按钮后：

支持的浏览器：

• 谷歌浏览器
• 边缘
• 火狐浏览器
• 歌剧
• 苹果浏览器