HTML TABLE 태그 총정리

개발 노트 2008. 6. 25. 12:17 posted by 무병장수권력자


출처 : http://kin.naver.com/detail/detail.php?d1id=1&dir_id=109&eid=AflE1+jL2y9YvOZQ6wm7ukI48DEQncLq&qb=dGFibGUgYm9yZGVy&pid=fbb3lsoQsCdsscDF4sdsss--439291&sid=SGGzQJN8YUgAAGCWO5Y

▣원어 : TABLE / 시작태그:필요 함 / 종료태그:필요 함
본문 내에 표를 만드는 태그입니다.
가장 많이 쓰이는 태그 이며, 홈페이지 내에서 많은 응용력을 필요로 합니다. 이 태그만 잘 사용해도 홈페이지 분위기가 확~~아주 중요한 태그입니다.

▣속성
• align="값" (값 = left / center / right)
-----표의 정렬 상태를 설정 합니다. 3.0, 3.0 이상
• backgroungd="이미지 파일 경로"
-----배경이 될 이미지 파일의 경로를 지정해 줍니다. 3.0, 4.0 이상
• bgcolor="값" (값 = 색이름 / SRGB)
-----배경 색상을 지정해 줍니다. 3.0, 3.0 이상
• bordercolor="값" (값 = 색이름 / SRGB)
-----표의 외곽선의 색상을 지정해 줍니다. 3.0, 3.0 이상
• border="픽셀"
-----표의 외곽선의 두께를 설정하며, 값이 "0"이면 외곽선이 보이지 않습니다.
• bordercolordark="값" (값 = 색이름 / SRGB)
-----표의 외곽선을 3차원으로 만들때 사용되는 어두운 색을 지정 3.0 이상
• bordercolorlight="값" (값 = 색이름 / SRGB)
-----표의 외곽선을 3차원으로 만들 때 사용되는 밝은 색을 지정 3.0 이상
• cellpadding="픽셀"
-----셀 경계와 셀 안의 내용과의 간격을 지정 3.0, 3.0 이상
• cellspacing="픽셀"
-----셀과 셀 사이의 간격을 지정 3.0, 3.0 이상
• cols="숫자"
-----표에 들어갈 열의 개수를 지정 4.0, 4.0 이상
• class="클래스 이름"
-----스타일 시트의 서식을 적용 4.0, 4.0 이상
• frame="값" (값 = above / below / border / hsides / Lhs / rhs / vside / void)
-----표 외곽선의 형태를 지정 border="1" 이상일 때 사용할 수 있습니다. 3.0 이상

above 바깥쪽 경계선 중 윗쪽만 나타남
below 바깥쪽 경계선 중 아래쪽만 나타남
border 기본적인 외곽선
hsides 바깥쪽 경계선 중 위아래만 나타남
Lhs 바깥쪽 경계선 중 왼쪽만 나타남
rhs 바깥쪽 경계선 중 오른쪽만 나타남
vside 바깥쪽 경계선 중 좌우만 나타남
void 외곽선이 나타 나지 않습니다.

• height="픽셀"
-----표의 높이를 설정
• hspace="픽셀"
-----표 위아래로 표 외곽 내용들과의 간격을 설정합니다. 3.0 이상
• id="id 이름"
-----class와 동일한 기능. 다만 홈페이지 내에서 한번만 명시 할 수 있습니다. 4.0, 4.0 이상
• rules="값" (값 = cols / rows / none / all / group)
-----표에서 셀 사이에 경계선을 설정합니다. 3.0 이상
cols 열 사이의 경계선만 그린다.
rows 행들 사이의 경계선만 그린다.
none 표 외곽선을 제외한 내부 셀 경계를 모두 지운다.
all 표 외곽선을 포함한 내부 셀 경계를 모두 그린다.
group <TBODY>, <TFOOT>등 그룹들 안의 경계선을설정

• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 4.0, 4.0 이상
• title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우저에서는 풍선 도움말로 표시 4.0, 4.0 이상
• width="픽셀/(%)"
-----표의 너비를 설정 하며, 브라우저를 대비한 비율을 퍼센트로 사용 하기도 합니다.

예제:
<html>
<head>
<title>TABLE 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
<table style="border: #000000 1px solid">
<caption align="TOP">style="border: #000000 1px solid"</caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr>
</table>
<p>
<table border="0">
<caption align="TOP">BORDER="0"</caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr>
</table>
<p>
<table border="1">
<caption align="TOP">BORDER="1"</caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr>
</table>
<p>
<table border="4">
<caption align="TOP">BORDER="4"</caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr>
</table>
</body>
</html>

결과:
style="border: #000000 1px solid"
a b c
x y z

BORDER="0"
a b c
x y z

BORDER="1"
a b c
x y z

BORDER="4"
a b c
x y z

<html>
<head>
<title>TABLE 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
<table border="1" width="500" bgcolor="#999999">
<caption align="TOP">WIDTH="500" bgcolor="#999999"</caption>
<tr><td>a</td><td>b</td><td>c</td></tr>
<tr><td>x</td><td>y</td><td>z</td></tr>
</table>
<p>
<table border="1" width=80%>
<caption align="TOP">WIDTH=80% (500px의 80%)</caption>
<tr><td>a</td><td>b</td><td>c</td></tr>
<tr><td>x</td><td>y</td><td>z</td></tr>
</table>
</body>
</html>

결과:
WIDTH="500" BGCOLOR="#999999"
a b c
x y z

WIDTH=80% (500px의 80%)
a b c
x y z


<html>
<head>
<title>TABLE 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
<table border="1" >
<caption align="TOP">FRAME 속성을 사용하지 않을 때 </caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr>
</table>
<p>
<table border="1" frame=VOID>
<caption align="TOP">FRAME=VOID</caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr>
</table>
<p>
<table border="1" frame=BORDER>
<caption align="TOP">FRAME=BORDER</caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr>
</table>
<p>
<table border="1" frame=ABOVE>
<caption align="TOP">FRAME=ABOVE</caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr>
</table>
<p>
<table border="1" frame=BELOW>
<caption align="TOP">FRAME=BELOW</caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr>
</table>
</body>
</html>

결과:
FRAME 속성을 사용하지 않을 때
a b c
x y z

FRAME=VOID
a b c
x y z

FRAME=BORDER
a b c
x y z

FRAME=ABOVE
a b c
x y z

FRAME=BELOW
a b c
x y z

<html>
<head>
<title>TABLE 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
<table border="1" frame=HSIDES>
<caption align="TOP">FRAME=HSIDES</caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr>
</table>
<p>
<table border="1" frame=LHS>
<caption align="TOP">FRAME=LHS</caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr>
</table>
<p>
<table border="1" frame=RHS>
<caption align="TOP">FRAME=RHS</caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr>
</table>
<p>
<table border="1" frame=VSIDES>
<caption align="TOP">FRAME=VSIDES</caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr>
</table>
<p>
<table border="1" BOX>
<caption align="TOP">FRAME=BOX</caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td> </tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td> </tr>
</table>
</body>
</html>

결과:
FRAME=HSIDES
a b c
x y z

FRAME=LHS
a b c
x y z

FRAME=RHS
a b c
x y z

FRAME=VSIDES
a b c
x y z

FRAME=BOX
a b c
x y z


▣원어 : Table Row / 시작태그:필요 함 / 종료태그:필요 없음
표의 행을 만드는 태그 입니다.
<TABLE>안에 들어가며 <TR>태그가 들어갈 때 마다 행이 바뀌고 이 태그 안에는 <TD>가 들어가 셀을 만들어 줍니다.

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

예제:

<html>
<head>
<title>TR 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
표에 행을 삽입한다. 즉 TR 태그가 삽입이 될 때마다 행이 바뀐다.<p>
<table border="1">
<caption align="TOP">TR 태그의 정렬방식</caption>
<tr align="left" valign="top">
<th colspan="3" align="CENTER">정렬방식</th>
</tr>
<tr align="left" valign="top">
<td width="200" height="50">LEFT, TOP</td>
<td width="200" height="50" valign="middle">LEFT, MIDDLE</td>
<td width="200" height="50" valign="bottom">LEFT, BOTTOM</td>
</tr>
<tr align="center" valign="middle">
<td width="200" height="50" valign="top">CENTER, TOP</td>
<td width="200" height="50">CENTER, MIDDLE</td>
<td width="200" height="50" valign="bottom">CENTER, BOTTOM</td>
</tr>
<tr align="right" valign="bottom">
<td width="200" height="50" valign="top">RIGHT, TOP</td>
<td width="200" height="50" valign="middle">RIGHT, MIDDLE</td>
<td width="200" height="50">RIGHT, BOTTOM</td>
</tr>
</table>
</body>
</html>

결과:

표에 행을 삽입 합니다. 즉 TR 태그가 삽입이 될 때마다 행이 바뀝니다.

TR 태그의 정렬방식
정렬방식
LEFT, TOP LEFT, MIDDLE LEFT, BOTTOM
CENTER, TOP CENTER, MIDDLE CENTER, BOTTOM
RIGHT, TOP RIGHT, MIDDLE RIGHT, BOTTOM


▣원어 : Table Data cell / 시작태그:필요 함 / 종료태그:필요 없음
표 내에 셀을 삽입 하며, <TD> 태그는 반드시 <TR> 태그 안에 들어가야 합니다.

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

예제:

<html>
<head>
<title>TD 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
<table border="1">
<caption align="TOP">셀의 배경으로 그림</caption>
<tr>
<td width="170" align="left" valign="top">a </td>
<td width="170" align="center" valign="middle">b </td>
<td width="170" align="right" valign="bottom">c </td>
</tr>
<tr>
<td width="170" height="50" background="image1.gif"> </td>
<td width="170" height="50" background="image2.gif"> </td>
<td width="170" height="50" background="image3.gif" > </td>
</tr>
</table>
<p>
<table border="1">
<caption align="TOP">셀의 배경으로 색 </caption>
<tr>
<td width="170" height="50" align="left" valign="top">왼쪽 위 정렬</td>
<td width="170" height="50" align="center" valign="middle">가운데 정렬</td>
<td width="170" height="50" align="right" valign="bottom">오른쪽 아래 정렬</td>
</tr>
<tr>
<td width="170" height="50" bgcolor="#CCCCCC" align="left" valign="top">a</td>
<td width="170" height="50" bgcolor="#66CCFF" align="center" valign="center">b</td>
<td width="170" height="50" bgcolor="#FFCCCC" align="right" valign="bottom">c</td>
</tr>
</table>
</body>
</html>

결과:
셀의 배경으로 그림
a b c
     

셀의 배경으로 색
왼쪽 위 정렬 가운데 정렬 오른쪽 아래 정렬
a b c


▣원어 : Table BODY / 시작태그:필요 없음 / 종료태그:필요 없음
           Table FOOTer / 시작태그:필요 함 / 종료태그:필요 없음
           Table HEADer / 시작태그:필요 함 / 종료태그:필요 없음
테이블을 머리말, 본문, 꼬리말로 나누었을 때 <THEAD>는 머리말, <TBODY>는 본문에 해당하며 그리고 <TFOOT>는 꼬리말에 해당 합니다. 이 태그는 시작 태그만 사용해도 무방합니다.

▣속성
• align="값" (값 = left / center / right / justify / char)
-----들어갈 내용의 정렬 상태를 설정 합니다. 3.0 이상
• id="id 이름"
-----class와 동일한 기능. 다만 홈페이지 내에서 한번만 명시 할 수 있습니다. 4.0 이상
• char="기준 알파벳"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• charoff="문자 개수"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• class="클래스 이름"
-----스타일 시트의 서식을 적용 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 4.0 이상
• valign="값" (값 = top / bottom / center / baseline)
-----열에 들어가는 내용의 정렬 방식을 위아래를 기준으로 설정 4.0 이상

예제:

<html>
<head>
<title>T(HEAD, BODY, FOOT)태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
<table border="1" width=500>
<caption>TBODY 태그</caption>
<thead>
<tr bgcolor="#FF9999"><td>THEAD<td>THEAD<td>THEAD</tr>
<tfoot>
<tr bgcolor="#99CCFF"><td>TFOOT<td>TFOOT<td>TFOOT</tr>
<tbody>
<tr bgcolor="#0099CC"><td>TBODY<td>TBODY<td>TBODY</tr>
<tr bgcolor="#0099CC"><td colspan="3">TBODY</tr>
</tbody>
<tbody>
<tr bgcolor="#0099CC"><td colspan="3">TBODY</tr>
<tr bgcolor="#0099CC"><td>TBODY<td>TBODY<td>TBODY</tr>
</tbody>
</table>
</body>
</html>

결과를 보면 TFOOT은 먼저 기술 하여도 제일 마지막에 나타나고 TBODY는 본문에 해당하는 중간에 나타납니다.
TBODY 태그
THEAD THEAD THEAD
TFOOT TFOOT TFOOT
TBODY TBODY TBODY
TBODY
TBODY
TBODY TBODY TBODY


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

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


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

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


▣원어 : table COLumn GROUP / 시작태그:필요 함 / 종료태그:필요 없음
테이블의 그룹에 대한 속성을 설정 하며, 시작 태그만 사용 합니다. HTML 3.2 표준이지만 Netscape에서는 Align 속성이 적용되지 않습니다.

▣속성
• align="값" (값 = top / bottom / left / right)
-----colgroup태그의 내용이 어느 쪽에 정렬할 것인지를 지정 3.0
• id="id 이름"
-----class와 동일한 기능. 다만 홈페이지 내에서 한번만 명시 할 수 있습니다. 4.0, 4.0 이상
• char="기준 알파벳"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• charoff="문자 개수"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• span="열 개수"
-----열의 개수를 지정 3.0, 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 4.0, 4.0 이상
• width="픽셀"
-----열의 셀 너비를 설정 4.0, 4.0 이상
• valign="값" (값 = top / bottom / center / baseline)
-----열에 들어가는 내용들의 정렬 방식을 위아래 기준으로 설정 4.0, 4.0 이상

예제:

<html>
<head>
<title>COLGROUP 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
<table border="1">
<caption align="TOP"> COLGROUP 태그 </caption>
<colgroup>
<col align="left">
<col align="center">
<colgroup span="2" align="right">
<tr>
<td width="200">Align="Left"</td>
<td width="200">Align="Center"</td>
<td width="200">Align="Right"</td>
</tr>
<tr>
<td width="200">a</td>
<td width="200">b</td>
<td width="200">c</td>
</tr>
<tr>
<td width="200">a</td>
<td width="200">b</td>
<td width="200">c</td>
</tr>
<tr>
<td width="200">a</td>
<td width="200">b</td>
<td width="200">c</td>
</tr>
</table>
</body>
</html>

결과:
COLGROUP 태그
Align="Left" Align="Center" Align="Right"
a b c
a b c
a b c


▣원어 : table COLumn / 시작태그:필요 함 / 종료태그:사용 금지
각 열에 대한 속성을 설정 하며, 시작 태그만 사용 합니다. HTML 3.2 표준이지만 Netscape에서는 Align 속성이 적용되지 않습니다.

▣속성
• align="값" (값 = top / bottom / left / right)
-----col태그의 내용이 어느 쪽에 정렬할 것인지를 지정 3.0
• id="id 이름"
-----class와 동일한 기능. 다만 홈페이지 내에서 한번만 명시 할 수 있습니다. 4.0, 4.0 이상
• char="기준 알파벳"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• charoff="문자 개수"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
• span="열 개수"
-----열의 개수를 지정 3.0, 4.0 이상
• style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 4.0, 4.0 이상
• width="픽셀"
-----열의 셀 너비를 설정 4.0, 4.0 이상
• valign="값" (값 = top / bottom / center / baseline)
-----열에 들어가는 내용들의 정렬 방식을 위아래 기준으로 설정 4.0, 4.0 이상

예제:

<html>
<head>
<title>COL 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
<table border=1>
<caption align="top">COL 태그</caption>
<colgroup>
<col align="right">
<col align="center">
<tr>
<td width="300">ALIGN="RIGHT"</td>
<td width="300">ALIGN="CENTER"</td>
</tr>
</table>
</body>
</html>

결과를 보면 다음과 같습니다...^^

COL 태그
ALIGN="RIGHT" ALIGN="CENTER"

'개발 노트' 카테고리의 다른 글

X11에서 Pointer를 이동하는 예제  (0) 2008.07.01
초보 Java 웹 개발자들을 위한 학습 로드맵  (0) 2008.06.30
[Spring Framework ①] 개요  (1) 2008.06.25
XP와 VISTA간의 파일 공유  (0) 2008.06.20
Orb.com Overview  (0) 2008.06.19


,

티스토리툴바