목차
- <tfoot> 객체 정의 - 테이블 꼬릿말 그룹
- <tfoot> 객체 구문
- <tfoot> 객체 예제 - 접근
- <tfoot> 객체 예제 - 생성
- <tfoot> 객체 속성
<tfoot> 객체 정의 - 테이블 꼬릿말 그룹
HTML <tfoot> 태그(요소) 의미.
<tfoot> 객체 구문
[접근]
var x = document.getElementById("요소ID");
[생성]
var x = document.createElement("TFOOT");
<tfoot> 객체 예제 - 접근
<style>
table, th, td {
border: 1px solid black;
}
</style>
<table>
<thead>
<tr>
<th>사이트명</th>
<th>도메인</th>
</tr>
</thead>
<tbody>
<tr>
<td>홈짱닷컴</td>
<td>Homzzang.com</td>
</tr>
<tr>
<td>그누보드</td>
<td>sir.kr</td>
</tr>
</tbody>
<tfoot id="hz">
<tr>
<td>Site 입력</td>
<td>Domain 입력</td>
</tr>
</tfoot>
</table>
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
var x = document.getElementById("hz");
x.style.color = "red";
}
</script>
결과보기
<tfoot> 객체 예제 - 생성
<style>
table, th, td {
border: 1px solid black;
}
</style>
<table id="hz">
<thead>
<tr>
<th>도메인</th>
</tr>
</thead>
<tbody>
<tr>
<td>Homzzang.com</td>
</tr>
<tr>
<td>Sir.kr</td>
</tr>
</tbody>
</table>
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
var x = document.createElement("TFOOT");
var y = document.createElement("TR");
var z = document.createElement("TD");
z.innerHTML = "Domain 신청"
y.appendChild(z);
x.appendChild(y);
document.getElementById("hz").appendChild(x);
}
</script>
결과보기
<tfoot> 객체 속성
align
HTML5 지원 X. 대신 style.textAlign 사용.
tfoot 요소 내부 콘텐츠의 수평정렬 설정/반환.
ch
HTML5 지원 X.
tfoot 요소 내부의 정렬문자 설정/반환.
chOff
HTML5 지원 X.
ch 속성의 수평오프셋 설정/반환.
vAlign
HTML5 지원 X. 대신 style.verticalAlign 사용.
tfoot 요소 내 콘텐츠의 수직정렬 설정/반환.
※ <tfoot> 객체는 표준 속성/메서드/이벤트 지원.
