테이블 태그

테이블 태그.<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>

웹제작 나모웹 에디터 드림위버 포토샵 플래시

 

출처 : 태그박스