목차
- <th> 객체 정의 - 테이블셀 제목
- <th> 객체 구문
- <th> 객체 예제 - 접근
- <th> 객체 예제 - 생성
- <th> 객체 속성
<th> 객체 정의 - 테이블셀 제목
HTML <th> 태그(요소) 의미.
<th> 객체 구문
[접근]
var x = document.getElementById("요소ID");
또는,
var x = document.getElementById("tableID").rows[trINDEX].cells
[생성]
var x = document.createElement("TH");
<th> 객체 예제 - 접근
<style>
table, th, td {border: 1px solid black;}
</style>
<table>
<tr>
<th id="hz">호스트</th>
</tr>
<tr>
<td>Homzzang.com</td>
</tr>
</table>
<button onclick="homzzang()">클릭</button>
<p id="demo"></p>
<script>
function homzzang() {
var x = document.getElementById("hz");
x.innerHTML = "홈짱닷컴";
}
</script>
결과보기
<th> 객체 예제 - 생성
<style>
table, th {border: 1px solid black;}
</style>
<table id="hz">
<tr id="hzTr">
</tr>
</table>
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
var x = document.createElement("TH");
var t = document.createTextNode("홈짱닷컴");
x.appendChild(t);
document.getElementById("hzTr").appendChild(x);
}
</script>
결과보기
<th> 객체 속성
abbr
HTML5 제외.
abbr 속성값 설정/반환.
align
HTML5 제외. 대신 style.textAlign 속성 사용.
헤더 셀에서 내용의 가로 정렬 설정/반환.
axis
HTML5 제외.
관련 헤더 셀의 쉼표로 구분된 목록 설정/반환.
background
HTML5 제외. 대신 style.background 속성 사용.
헤더 셀의 배경이미지 설정/반환.
bgColor
HTML5 제외. 대신 style.backgroundColor 사용.
테이블의 배경색 설정/반환.
cellIndex
테이블 행의 셀 컬렉션에서 셀 위치 반환.
ch
HTML5 제외.
헤더 셀의 정렬 문자 설정/반환.
chOff
HTML5 제외.
ch 속성의 가로 오프셋을 설정/반환.
colSpan
colspan 속성값 설정/반환.
headers
headers 속성값 설정/반환.
height
HTML5 제외. 대신 style.height 속성 사용.
헤더 셀의 높이 설정/반환.
noWrap
HTML5 제외. 대신 style.whiteSpace 속성 사용.
셀의 내용을 줄 바꿈 할 수 있는지 여부 설정/반환.
rowSpan
rowspan 속성값 설정/반환.
vAlign
HTML5 제외. 대신 style.verticalAlign 사용.
셀 내에서 내용의 수직 정렬 설정/반환.
width
HTML5 제외. 대신 style.width 사용.
헤더 셀의 너비 설정/반환.
※ <th> 객체는 표준 속성/메서드/이벤트 지원.
