표 [Table, Tr, Td] 태그
작성자 정보
- 작성자 관리자
- 아이피 122.♡.189.76
- 작성일
컨텐츠 정보
- 조회 2,831
본문
|
▷ Table [표] 태그 | |||
|
⊙ 태그요소 | |||
|
① <table> ... </table> | |||
|
Table은 내부에 가로줄<TR>을 가지며, 가로줄 속에는 세로 칸<TD>가 들어 있다.
|
따라서, Table 태그는 다음과 같은 계층 구조를 형성하게 된다.
<table>
<tr>
<td>칸안의 내용</td>
</tr>
</table>
⊙ 속성(Atributes)
|
속성
|
용도
|
사용법
|
|
기본속성 |
align(표의 위치 정렬, valign(X)), bgcolor, background, id, class, style, title, ,nowrap | |
| boder="픽셀값" bodercolorlight bodercolordark |
표의 테두리 두께 표 위 테두리 색 지정 표 아래 테두리 색 지정 |
<table boder="0"> ☜ 테두리 없음 <table boder="3" bordercolorlight="yellow" bodercolordark="blue"> |
| cellpadding cellingspaceing |
셀테두리와 내용 사이의 간격 셀과 셀 사이의 간격 지정 |
<table boder="1" cellpadding="5" cellspacing="5"> |
| width height |
테이블 가로 크기 지정 테이블 세로 크기 지정 |
<table width="800" height="200"> <table width="50%" height="200"> |
⊙ 테이블의 행과 열 설정
시작되는 세로칸부터 시작한 다음 끝까지 진행한다.
선택되지 않은 세로칸들은 다시 같은 방법으로 진행한다.
|
① |
② |
③ |
|
ⓐ |
||
<table >
<tr>
<td >①</td>
☜ 가로줄(행:row)이 2칸으로 늘어나(span)있다.
<td>②</td>
<td>③</td>
</tr>
<tr>
<td >ⓐ</td>
☜ 세로칸(열:column)이 2칸으로 늘어나(span)있다.
</tr>
</table>
|
① |
② |
|
|
ⓐ |
ⓑ |
|
<table>
<tr>
<td colspan="2">①</td>
☜ 세로칸(열:column)이 2칸으로 늘어나(span)있다.
<td rowspan="2">②</td>
☜ 가로줄(행:row)이 2칸으로 늘어나(span)있다.
</tr>
<tr>
<td >ⓐ</td>
<td >ⓑ</td>
</tr>
</table>
|
Table 속성 예제 |
|||||||
<table border="1" >
<tr>
<td>left</td>
</tr>
</table>
|
|
||||||
| <table border="0 / 1 / 2 / 5" bgcolor="yellow"> |
|
||||||
| <table border="1" bgcolor="yellow" cellspacing="10"> |
|
||||||
| <table border="1" bgcolor="yellow" cellpadding="10"> |
|
||||||
| <table border="1" width="없음 / 50 / 100"> |
|
||||||
| <table border="1" wheight="없음 / 30 / 50"> |
|
||||||
<table border="3" bordercolorlight="red"> <table border="3" bordercolordark="green"> <table border="3" bordercolorlight="red" bodercolordark="green"> |
|
||||||
표에 배경을 넣어보자.
<table border="10"
background="<a href="http://이미지 주소">
<tr>
<td>표 전체 배경 이미지</td>
</tr>
</table>
|
|
② <tr> ... </tr>
Table Row(테이블의 가로 행에 적용되는 태그이다.
⊙ 속성(Atributes)
|
속성
|
용도
|
사용법
|
|
기본속성 |
bordercolor, bordercolorlight, bodercolordark, class, id, style, title | |
|
align, valign |
정렬 |
<tr align="left / center / right" valign="top / middle / bottom"> |
⊙ 속성(Atributes)의 사용 예
|
TR 속성 예제 |
실행결과 |
||||||
<table border="1">
<tr align="left / center / right"
valign="top / middle /bottom">
<td height="40">left,top</td>
</tr>
</table>
|
|
||||||
<table border="5">
<tr bordercolor="red">
<td>행 위 쪽 아래 가는 선</td>
</tr>
</table>
|
|
||||||
<table border="5">
<tr bordercolorlight="red">
<td>가로행 아래쪽이 밝은 부분입니다.
(table과 반대)</td>
</tr>
</table>
|
|
||||||
<table border="5">
<tr bordercolordark="blue">
<td>가로행 위쪽이 어두운 부분입니다.
(table과 반대)</td>
</tr>
</table>
|
|
③ <td> ... </td>
Table Data Cell 표에 자료가 들어가는 영역입니다.
⊙ 속성(Atributes)
|
속성
|
용도
|
사용법
|
|
기본속성 |
class, id, style, title, align, background, bgcolor, rowspan, colspan, valign, bordercolor, bodercolorlight, bodercolordark - tr의 설정보다 우선된다. |
|
|
nowrap |
줄바꿈 방지 | <td nowrap> |
⊙ 속성(Atributes)의 사용 예
|
TD 속성 예제 |
실행결과 |
||||
<table border="1" width="100">
<tr>
<td height="60" nowrap>표의 내용보다 긴 문장</td>
</tr>
</table>
|
|
||||
표안에 표를 넣어보자.
<table border="10" width="372" align="center"
cellpadding="0" cellspacing="0">
<tr>
<td height="512" width="350" valign="top">
</td>
</tr>
</table>
|
|
④ <th> ... </th>
Table Head - 테이블의 제목에 해당하는 영역임을 표시한다.
TD의 위치에 적용되는 태그로 제목글씨(굵게), 가운데 정렬이 되며, 논리적의미로 테이블의 제목이라는 의미를 갖는다.
⊙ 속성(Atributes)
|
속성
|
용도
|
사용법
|
|
기본속성 |
class, id, style, title, align, background, bgcolor, rowspan, colspan, valign, bordercolor, bodercolorlight, bodercolordark , nowrap |
|
⊙ 속성(Atributes)의 사용 예
|
TH 속성 예제 |
실행결과 |
||||
<table border="1" width="400">
<tr>
<th>제목 ①</th>
<th>제목 ②</th>
</tr>
<tr>
<td>그냥 ①</td>
<td>그냥 ②</td>
</tr>
</table>
|
|
⑤ <caption> ... </caption>
Table 의 표제를 표시해주는 태그이다.
⊙ 속성(Atributes)
|
속성
|
용도
|
사용법
|
|
기본속성 |
class, id, style, title, align="top / bottom / left / right" | |
⊙ 속성(Atributes)의 사용 예
|
Caption 속성 예제 |
실행결과 |
||||||||
<table border="1" width="300">
<caption align="top / bottom / left / right">
Caption top</caption>
<tr>
<td>셀내용 ①</td>
<td>셀내용 ②</td>
</tr>
</table>
|
|