Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

I LOVE EJ

Table관련 웹접근성 (TH, CAPTION ) 본문

Web publishing/웹 접근성

Table관련 웹접근성 (TH, CAPTION )

BeOne 2009. 8. 27. 09:36

<TH>


▣원어 : Table Header cell / 시작태그:필요 함 / 종료태그:필요 없음
보통은 표에 가장 윗 줄에 위치하며 각 열의 제목을 나타낼 때 쓰며, 태그자 적용되면 글꼴이 굵게 되고 가운데 정렬이 됩니다.

▣속성
• align="값" (값 = left / center / right / justify / char)
-----행에 들어갈 내용의 정렬 상태를 설정 합니다. IE 3.0, N 3.0 이상
• axis="셀 이름"
-----셀의 이름을 설정합니다. IE40, N 4.0 이상
• axes="관련 내용"
-----셀의 내용과 부합하는 이름을 나열합니다. IE40, N 4.0 이상
• backgroungd="이미지 파일 경로"
-----셀 안에 배경이 될 이미지 파일의 경로를 지정 IE 3.0, N 4.0 이상
• bgcolor="값" (값 = 색이름 / SRGB)
-----셀의 배경 색상을 지정 IE 3.0, N 3.0 이상
• bordercolor="값" (값 = 색이름 / SRGB)
-----셀 경계선에 색상을 지정 IE 3.0 이상
• bordercolordark="값" (값 = 색이름 / SRGB)
-----셀 경계선을 3차원으로 만들때 사용되는 어두운 색을 지정 IE 3.0 이상
• bordercolorlight="값" (값 = 색이름 / SRGB)
-----셀 경계선을 3차원으로 만들 때 사용되는 밝은 색을 지정 IE 3.0 이상
• char="기준 알파벳"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• charoff="문자 개수"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• class="클래스 이름"
-----스타일 시트의 서식을 적용 IE 4.0, N 4.0 이상
• colspan="숫자"
-----두개 이상의 열의 공간을 하나의 열로 만들 때 사용 IE 3.0, N 3.0 이상
• id="id 이름"
-----class와 동일한 기능. 다만 홈페이지 내에서 한번만 명시 할 수 있습니다. IE 4.0, N 4.0 이상
• rowspan="숫자"
-----두개 이상의 행의 공간을 하나의 행으로 만들 때 사용 IE 3.0, N 3.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 IE 4.0,N 4.0 이상
• title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우저에서는 풍선 도움말로 표시 IE 4.0, N 4.0 이상
• nowrap
-----셀 안의 줄바꿈 기능을 해제합니다. IE 3.0, N 3.0 이상
• valign="값" (값 = top / bottom / center / baseline)
-----행에 들어가는 내용의 정렬 방식을 위아래를 기준으로 설정 IE 4.0, N 4.0 이상

예제:

<html>
<head>
<title>TH 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
<table border="1">
<caption align="TOP">TH 태그와 TD 태그 비교</caption>
<tr>
<th>TH</th>
<th>TH</th>
<th>TH</th>
</tr>
<tr>
<td width="150">TD</td>
<td width="150">TD</td>
<td width="150">TD</td>
</tr>
<tr>
<td width="150">TD</td>
<td width="150">TD</td>
<td width="150">TD</td>
</tr>
<tr>
<td width="150">TD</td>
<td width="150">TD</td>
<td width="150">TD</td>
</tr>
</table>
</body>
</html>

결과를 보면 TH 태그는 진하고 굵게 표시되며 가운데 정렬이 되고, TD 태그는 디폴트를 형성합니다.

TH 태그와 TD 태그 비교
TH TH TH
TD TD TD
TD TD TD
TD TD TD

 

 

<CAPTION>


▣원어 : table CAPTION / 시작태그:필요 함 / 종료태그:필요 함
이 태그는 <TABLE>태그 내에서만 사용 되며, 테이블에 대한 제목이나 설명을 기재 할 때 사용합니다. HTML 3.2 표준이지만 Netscape에서는 Align 속성이 적용되지 않습니다.

▣속성
• align="값" (값 = top / bottom / left / right)
-----caption 태그의 내용의 정렬 방식을 지정 IE 3.0
• id="id 이름"
-----class와 동일한 기능. 다만 홈페이지 내에서 한번만 명시 할 수 있습니다. IE 4.0, N 4.0 이상
• class="클래스 이름"
-----스타일 시트의 서식을 적용 IE 4.0, N 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 IE 4.0,N 4.0 이상
• title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우저에서는 풍선 도움말로 표시 IE 4.0, N 4.0 이상

예제:

<html>
<head>
<title>CAPTION 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
<table border="1">
<caption align="top">CAPTION</caption>
<tr>
<td width="150">TOP</td>
<td width="150">caption 정렬 방식</td>
</tr>
</table><p>
<table border="1">
<caption align="bottom">CAPTION</caption>
<tr>
<td width="150">BOTTOM</td>
<td width="150">caption 정렬 방식</td>
</tr>
</table><p>
<table border="1">
<caption align="left">CAPTION</caption>
<tr>
<td width="150">LEFT</td>
<td width="150">caption 정렬 방식</td>
</tr>
</table><p>
<table border="1">
<caption align="right">CAPTION</caption>
<tr>
<td width="150">RIGHT</td>
<td width="150">caption 정렬 방식</td>
</tr>
</table>
</body>
</html>

결과는 caption 태그의 정렬 방식입니다.

CAPTION
TOP caption 정렬 방식
CAPTION
BOTTOM caption 정렬 방식
CAPTION
LEFT caption 정렬 방식
CAPTION
RIGHT caption 정렬 방식
저작자표시

'Web publishing > 웹 접근성' 카테고리의 다른 글

[코딩] 코딩시 유의 및 웹 접근성 연구소 사이트에서 지켜야 했던 사항들  (0) 2013.03.28
팝업시 접근성 고려  (0) 2010.03.30
웹퍼블리셔 도서 정리  (0) 2009.05.14
웹 접근성 관련 사이트 모음  (2) 2009.05.08
스크린리더  (0) 2009.05.07
'Web publishing/웹 접근성' Related Articles more