테이블
태그.<table>
태이블
태그는 표를 만드는 태그를 말합니다.
표(table)의 기본구조
<table> <coption>...</coption> <tr> <th>...</th> <td>...</td> </tr> </table>
|
<table>
|
표 작성함을 정의한다 (</table>은
표가 끝남을 정의)
|
<tr>
|
Table Row의 약자로, 표 안에서
한줄(Row)이 끝났으 므로 줄바꾸기를 한다.
|
<th>
|
Table Heading의 약자로, 표의
머리글 (Header) 임을 나타낸다.
|
<td>
|
Table Data의 약자로,보통체와
왼쪽정렬로 적용된다.
|
<caption>
|
표의 주석문(제목)을 표화 함께
나타내는 속성이다. align=top -->표의상단 align=bottom
-->표의하단
|
표에서 사용되는 속성
속성
|
정의
|
width=50%
|
표나 셀의 폭(넓이)을 창의 백문율(%)로
지정한다.
|
width=400
|
표나 셀의 폭을 픽셀 값으로 지정한다.
|
height=pixel수
|
셀의 높이(세로)를 지정한다.
|
cellpadding=10
|
셀의 안쪽 여백(셀의 테두리와
문자열 사이의 간격)을 10픽셀로 지한정다.
|
cellspacing=5
|
셀과 셀 사이의 간격을 5픽셀로
지정한다.
|
border=숫자
|
표 테두리의 두께를 지정하는
것으로 숫자가 커질수록 두꺼워진다. border=0 이면 웹 브라우저에서
표의 테두리가 보이지 않는다.
|
colspan=2
|
가로의 열(column) 2개를 합치기
한다.
|
rowspan=3
|
세로의 줄(row)3개를 합치기 한다.
|
valign="위치"
|
align="left,right,center"
-셀 안에서의 가로 위치 정렬
|
align="위치"
|
valign="top,middle,bottom"
- 셀 안에서의 세로위치정렬
|
bgcolor="색상"
|
표 전체 또는 선택된 셀의 배경
색상을 지정한다.
|
backround="주소"
|
표 전체 또는 선택된 셀의 배경
이미지를 삽입한다.
|
예제 1)
----------------------------------------------------------------
<table border="1"> <tr> <td
bgcolor="yellow"> 포토샵
</td> <td> 플래시 </td> </tr> <tr> <td>
나모웹 </td> <td> 드림위버 </td> </tr> </table>
|
|
예제 2)
----------------------------------------------------------------
<table border="1"
bordercolor="red"
cellspacing="0"> <tr> <td> 포토샵
</td> <td> 플래시 </td> </tr> <tr> <td>
나모웹 </td> <td> 드림위버 </td> </tr> </table>
|
|
예제 3)
----------------------------------------------------------------
<table border="0"> <tr> <td> 포토샵
</td> <td> 플래시 </td> </tr> <tr> <td>
나모웹 </td> <td> 드림위버 </td> </tr> </table>
|
|
예제 4)
----------------------------------------------------------------
<table background="img/tablebg.jpg"
border="1"> <tr> <td> <font
color="red">포토샵</font>
</td> <td> <font
color="red">플래시</font> </td> </tr> <tr> <td> <font
color="red">
나모웹</font> </td> <td> <font
color="red">드림위버</font> </td> </tr> </table>
|
|
예제 5)
----------------------------------------------------------------
<table border="1"> <td
rowspan="4"> 웹제작
</td> <td>나모웹
에디터</td> <tr> <td>드림위버</td> <tr> <td>포토샵</td> <tr> <td>플래시</td> </table>
|
|