07장. <TABLE> 태그로 표 디자인하기

Presentation on theme: "07장. <TABLE> 태그로 표 디자인하기"— Presentation transcript:

1 07장. <TABLE> 태그로 표 디자인하기
표를 구성하는 태그들의 속성까지 꼼꼼히 살펴보기 실습으로 <TABLE> 태그 사용법 익히기

2 <TABLE> 태그로 표 디자인하기 – 기본 사용법
[표로 구성된 사이트]

3 <caption>제목</caption> <tr> <td>셀내용 </td>
<TABLE> 태그로 표 디자인하기 – 기본 사용법 [기본 구조] <table> <caption>제목</caption> <tr> <td>셀내용 </td> </tr> </tabel>

4 <TABLE> 태그로 표 디자인하기 – 기본 사용법
[2행 2열의 표 만들기] <table border=1 width=300> <caption>2*2표</caption> <tr> <td>셀1</td> <td>셀2</td> </tr> <td>셀3</td> <td>셀4</td> </table>

5 <TABLE> 태그로 표 디자인하기 – 기본 태그 속성
[테이블 관련 속성] <table> <tr> <td> <th> 태그 모두에 적용할 수 있는 속성들 width height bgcolor background align <table> 태그에서만 사용하는 속성들 border cellspacing cellpadding bordercolorlight bordercolordark frame rules

6 <TABLE> 태그로 표 디자인하기 – 기본 태그 속성
height width bordercolordark cellpadding cellspacing bordercolorlight

7 <TABLE> 태그로 표 디자인하기 – 기본 태그 속성
[테이블 관련 속성] <tr> <td> 태그에서 사용되는 속성들 colspan rowspan Valign <caption> 태그에서 사용하는 속성 Align 가운데 정렬 비교 <table align=center> <tr align=center> <td align=center> <center>테이블소스 </center> <center>테이블제목 </center>

8 <TABLE> 태그로 표 디자인하기 – 기본 태그 속성
[셀 합치기: colspan, rowspan]

9 <TABLE> 태그로 표 디자인하기 – 사용법 익히기
[항상 브라우저의 중앙에 보이도록 하는 소스] <table align="center" border="0" width="100%" height="100%"> <tr> <td align="center"> <img src="house.gif" width="300" height="300"> <br><br> <font size="1" color="#CCCCCC"> 언제나 브라우저 중앙에 놓여집니다. </font> </td> </tr> </table>

10 <TABLE> 태그로 표 디자인하기 – 사용법 익히기
[사각 실선 테두리가 생성되는 소스] <table width=300 height=50 align=center bgcolor=skyblue cellspacing=1 cellpadding=0> <tr><td align=center> <table width=300 height=50 bgcolor=white> </td></tr> </table>

11 <TABLE> 태그로 표 디자인하기 – 사용법 익히기
[선 그리기] <hr> 태그의 속성 size width align noshade color 도트 이미지 활용법 <tr height=1><td background="dot.gif"></td></tr>