테이블 태그 table .style 배경이미지로 테두리 만들기

[윤응구]

☞ [테이블 과 관련된 속성들]

태 그	속 성	의 미
<TABLE></TABLE>		테이블의 시작과 끝을 알리는 태그...
<TR></TR>		줄 선언 : 가로선-Table Row 의 약자
<TD></TD>		칸 선언 : 세로선-Table Data 의 약자
<TH></TH>		셀의 제목진하게
<TABLE BORDER="숫자"	픽셀	테두리 두께 지정 표를 안보이게 하려면 <TABLE border=0>
<BORDERCOLOR>	색상표	테두리 색상 지정
<WITDH>	픽셀	표의 가로 길이(넓이)
<HEIGHT>	픽셀	표의 세로 길이(높이)
< CELLPADDING=300 >	픽셀	셀과 내부 글자와의 간격을 벌려줌,
< CELLSPACING=300 >	픽셀	테이블과 셀의 간격,
<VALIGN>	top/middle/center	데이터의 수직위치 지정
<TD ALIGN>	LEFT/CENTER/RIGHT	데이터의 수평위치 지정
<TD COLSPAN="숫자" >	숫자	칸을 합칩니다.
<TD ROWSPAN="숫자" >	숫자	줄을 합칩니다.
<TD BGCOLOR=blue >	색상표	배경색 지정
<TABLE background >	그림파일	테이블의 배경 그림을 설정

⊙ <table> 테그는 표를 만들때 사용하는 태그.

    테이블 태그는 시작 태그<table>로 시작해서 마감태그</table>로

    끝을 낸다.

⊙ 테이블은 <table><tr><td>를 기본태그로 이용하며

      <table>은 표를 의미

      <tr> 은 표의 행 즉, 줄을 의미

      <td> 는 표의 셀 즉, 칸을 의미한다.

⊙ 마감태그는 </dt></tr></table>입니다.

(1) 테이블 만들기

 형식 : <table>
       <tr>
       <td>내용이나 이미지</td>
       </tr>
       </table>

실행결과 글씨만 있고 테두리가 나타나지 않는다.
내용이나 이미지
테이블에는 border 속성 값을 지정해 주어야만 테두리가 나타난다.
<table> : 테이블의 시작
<tr>    : 첫 번째 줄 시작
<td>    : 첫 번째 줄 첫 칸 시작

(2) 테이블 테두리 지정하기
형식 : <table boredr="숫자"> <tr> <td> 내용이나 이미지</td> </tr> </table> border 숫자가 클수록 테두리가 굵어진다.
실습 테두리 없는 테이블
테두리없는 테이블	<TABLE border=0 width=175> <TR> <TD>테두리없는 테이블</TD> </TR> </TABLE>

테이블 테두리 없는 넷칸만들기 <td> </td>

테두리

없는

테이블

만들기

<TABLE border=0 width=175>
<TR>
       <TD>테두리</TD>
       <TD>없는</TD>
       <TD>테이블</TD>
       <TD>만들기</TD>
</TR>
</TABLE>

테이블 테두리 1만들기 border=1

테이블 만들기 -1

<TABLE border=1>
<TR>
<TD>테이블 만들기 -1</TD>
</TR></TABLE>

테이블 테두리 10만들기 border=10

테이블 만들기 -10

<TABLE border=10>
<TR>
<TD>테이블 만들기 -1</TD>
</TR></TABLE>

테이블 테두리 20만들기 border=20

테이블 만들기 -20

<TABLE border=20>
<TR>
<TD>테이블 만들기 -</TD>
</TR></TABLE>

테이블 테두리 20 넷칸만들기 border=20 <td> </td>

학교

학생

학년

이름

<TABLE border=20>
<TR>
       <TD>학교</TD>
       <TD>학생</TD>
       <TD>학년</TD>
       <TD>이름</TD>
</TR>
</TABLE>

(3) 테이블 테두리의 색 지정 borderColor="색지정"

 형식 : <table border="1" bordercolor="원하는 색상 코드 값">
<tr>
<td>내용이나 이미지</td>
</tr>
</table>
<bordercolor="원하는 색상 코드 값">
<bordercolorlight="색상지정">:표의 왼쪽 위부분 색상 지정
<bordercolordark="색상지정"> : 표의 오른쪽 아래쪽 색상 지정

빨간 테이블 만들기 보라색 테이블 만들기 파란색 테이블 만들기 두가지 색상 나타내기

<table border=1 bordercolor=red> <tr> <td>빨간 테이블 만들기</td> </tr></table> <table bordercolor=#990066 border=5> <tr> <td>보라색 테이블 만들기 </td> </tr></table> <table border=20 bordercolor=blue> <tr> <td>파란색 테이블 만들기</td> </tr></table> <table border=10 bordercolorlight=00ff00 bordercolordark=cc33ff> <tr><td>두가지 색상 나타내기</td> </tr> </table>

(4) 1칸,2칸,3칸 테이블 만들기

칸 추가시는<td> 더 쓰고.
줄 추가시는 <tr> 더 쓴다.

이름

학년

책 제목

<TABLE border=1>
<TR>
       <TD>이름</TD>
       <TD>학년</TD>
       <TD>책 제목</TD>
</TR>
</TABLE>

줄 추가하기 <tr> </tr>

학교	학생이름	학년	책 제목
서울중	홍길동	2학년	어린왕자
강남중	임꺽정	3학년	이솝우화

<table border=1>
<tr>
<td>학교</td>
<td>학생이름</td>
<td>학년</td>
<td>책 제목</td>
</tr>
<tr>
<td>서울중</td>
<td>홍길동</td>
<td>2학년</>
<td>어린왕자</td>
</tr>
<tr>
<td>강남중</td>
<td>임꺽정</td>
<td>3학년</td>
<td>이솝우화</td>
</tr>
</table>

(5) 셀 합치기

형식 : <colspan="합칠 셀의 숫자">가로 셀 합치기
       <rowspan="합칠 셀의 숫자">세로 셀 합치기

(세로 셀 합치기 rowSpan)

이름	국어	영어	수학	비고
홍길동	100	90	80	없음
임꺽정	100	90	80

<TABLE border=1>
<TR>
<TD>이름</TD>
<TD>국어</TD>
<TD>영어</TD>
<TD>수학</TD>
<td>비고</td>
</tr>
<tr>
<td>홍길동</td>
<td>100</td>
<td>90 </td>
<td>80 </td>
<td rowspan=2>없음</td>
</tr>
<tr>
<td>임꺽정</td>
<td>100</td>
<td>90  </td>
<td>80  </td>
</TR>
</TABLE>

가로 셀 /칸 합치기colSpan

학년
1학년	2학년	3학년	4학년

<table border=1>
<tr>
<th colspan=4>학년</th>
</tr>
<tr>
<td>1학년</td>
<td>2학년</td>
<td>3학년</td>
<td>4학년</td>:
</tr>
</table>

(6) 표의 제목 진하게 만들기 <th>내용</th>

형식
<table border="1">
<tr>
<th>내용</th>
</tr>
</table>

이 름	국 어	영 어	수 학	비 고
홍길동	100	90	80	없음

<TABLE border=1>
<TR>
<Th>이 름</Th>
<Th>국 어</Th>
<Th>영 어</Th>
<Th>수 학</Th>
<th>비 고</th>
</tr>
<tr>
<td>홍길동</td>
<td>100</td>
<td>90</td>
<td>80</td>
<td>없음</td>
</TR>
</TABLE>

(7) 셀과 셀 사이의 여백 설정하기 (cellspacing)

표와 셀 또는 셀과 셀 사이 여백을 결정
숫자가 커질수록 셀 간격이 넓어진다.
형식
<table border="1" cellsapcing="숫자 지정">

이 름

국 어

영 어

수 학

홍길동

100

90

80

<TABLE border=1>
<TR>
<Td>이 름</Td>
<Td>국 어</Td>
<Td>영 어</Td>
<Td>수 학</Td>
</TR>
</table>
<p>
<table border=1 cellspacing=20>
<tr>
<TD>홍길동</TD>
<TD>100</TD>
<TD>90</TD>
<TD>80</TD>
</TR></TABLE>

(8) 셀과 문자 사이의 여백 설정하기 (cellpadding)

셀과 그 안의 문자 사이에 간격을 결정하는 태그
숫자가 클수록 간격은 넓어진다.
형식
<table border="1" cellpadding="숫자 지정">

이 름

국 어

영 어

수 학

이름

학교

학년

책제목

<TABLE border=1>
<TR>
<TD>이 름</TD>
<TD>국 어</TD>
<TD>영 어</TD>
<TD>수 학</TD>
</TR>
</TABLE>
<P>
<TABLE border=1cellpadding=20>
<TR>
<TD>이름</TD>
<TD>학교</TD>
<TD>학년</TD>
<TD>책제목</TD>
</TR>
</TABLE>

(9) 표의 정렬 하기(align)

형식 : <table align="속성">
left(왼쪽)/right(오른쪽)/center(가운데)
지정하지 않으면 기본적으로 왼쪽에 정렬된다.

학교

학생

학년

학교

학생

학년

학교

학생

학년

<TABLE border=1>
<TR>
<TD>학교</TD>
<TD>학생</TD>
<TD>학년</TD>
</tr>
</table>
<p>
<table border=1 align=right>
<tr>
<TD>학교</TD>
<TD>학생</TD>
<TD>학년</TD>
</tr>
</table>
<br><br><br><br> <table border=1 align=center>
<tr>
<TD>학교</TD>
<TD>학생</TD>
<TD>학년</TD>
</tr>
</table>

(10) 표의 크기 지정(width/height)

형식 : <table width="픽셀수 또는 비율">
<table height="픽셀수 또는 비율">
width : 가로 너비 height : 세로 높이
(값을 지정하지 않으면 안에 입력된 텍스트의 크기로 자동설정)

학교

학생

책제목

학교

학생

책제목

<TABLE border=1>
<TR>
<TD>학교</TD>
<TD>학생</TD>
<TD>책제목</TD>
</tr>
</table>
<p>
<table border=1 width=200 height=100>
<tr>
<TD>학교</TD>
<TD>학생</TD>
<TD>책제목</TD>
</tr>
</table>

(11) 텍스트의 위치 지정 (align/valign)

형식 : <td align="속 성">
<td valign="속 성">
align 속성의 left. right. center
valing 속성의 top, bottom, middle
1. 가로 위치 지정(align)

학교

학생

책제목

2. 세로 위치 지정(valign)

학교

학생

책제목

<b>1. 가로 위치 지정(align)</b>
<TABLE border=1 width=200>
<TR>
<TD align=left>학교</TD>
<TD align=center>학생</TD>
<TD align=right>책제목</TD>
</tr>
</table>
<p>
<b>2. 세로 위치 지정(valign)</b>
<p>
<table border=1 width=230 height=60>
<tr>
<TD valign=top>학교</TD>
<TD valign=middle>학생</TD>
<TD valign=vottom>책제목</TD>
</tr>
</table>

(12) 표 안에 색상 넣기 (bgcolor)

1. 표 전체에 색상 넣기

이름	학교	학년	책제목
광진구	홍길동	3학년	이솝우화

<TABLE border=1 bgcolor="yellow">
<TR>
<TD>이름</TD>
<TD>학교</TD>
<td>학년</td>
<td>책제목</td>
</TR>
<TR>
<TD>광진구</TD>
<TD>홍길동</TD>
<td>3학년</td>
<td>이솝우화</td>
</TR>
</TABLE>

2. 표와 셀에 색상 넣기

이름	학교	학년	책제목
서울중	홍길동	2학년	이솝우화
영신중	임꺽정	3학년	어린왕자

<TABLE border=1 bgcolor=skyblue cellspacing="10">
<TR>
<Th bgcolor=lime>이름</Th>
<Th bgcolor=lime>학교</Th>
<th bgcolor=lime>학년</th>
<th bgcolor=lime>책제목</th>
</TR>
<TR>
<TD bgcolor=red>서울중</TD>
<TD bgcolor=yellow>홍길동</TD>
<td bgcolor=violet>2학년</td>
<td bgcolor=orange>이솝우화</td>
</TR>
<tr bgcolor=yellow>
<td>영신중</td>
<td>임꺽중</td>
<td>3학년</td>
<td>어린왕자</td>
</tr>
</TABLE>

표마다 다른색 넣기

빨간색

파란색

초록색

<TABLE border>
<TR>
<TD bgcolor="red">빨간색</TD>
<TD bgcolor="blue">파란색</TD>
<TD bgcolor="green">초록색</TD>
</TR>
</TABLE>

(13) 표 안에 이미지 넣기(img src=)

형식 : <td><img src="이미지 주소">

<TABLE border=1>
<TR>
<TD>
<img src="http://pds71.cafe.daum.net/attach/8/cafe/2008/03/12/10/
42/47d734f1d810a&token=20080312&filename=Untitled-7copy.gif"> </TD>
<TD>
<img src="http://kr.img.blog.yahoo.com/ybi/1/af/1e/sign9300/folder/3289750/img_3
289750_1134541_25?1097019395.jpg"></TD>
<TD>
<img src="http://pds84.cafe.daum.net/image/4/cafe/2008/08/16/16/
38/48a683f0be96a"></TD>
</TR>
<tr>
<td colspan=3>
<img src="http://cfile255.uf.daum.net/attach/
195E22144A66A0DD786A40">
</td>
</tr>
</TABLE>

(14) 표 안에 배경 넣기(background)

형식 : <table background="이미지 주소">

<TABLE border=1 background="http://cfile275.uf.daum.net/attach/
1360EF3B4ED1700D01A7B7" width=550 height=417 >
<TR>
<TD align=center>
<img src="http://pds71.cafe.daum.net/attach/8/cafe/2008/03/12/10/
42/47d734f1d810a&token=20080312&filename=Untitled-7copy.gif">
<img src="http://kr.img.blog.yahoo.com/ybi/1/af/1e/sign9300/folder/3289750/img_3
289750_1134541_25?1097019395.jpg">;
<img src="http://pds84.cafe.daum.net/image/4/cafe/2008/08/16/16/
38/48a683f0be96a"></TD>
</TR>

</TABLE>

표에 배경이미지로 테두리 만들기

background
넣기

<TABLE border=3 cellSpacing=10 borderColor=#ff66ff cellPadding=40 width=100 background="http://cfile287.uf.daum.net/attach/171471104A5BD5BC1 7B4F4" bgColor=#ffcc00 height=100> <TBODY> <TR> <TD> <TABLE border=1 cellSpacing=0 borderColor=#339933 cellPadding=20 width=100 background="http://www.thavibu.com/images/bground/BGpale3.jpg "> <TBODY> <TR> <TD> <TABLE border=3 cellSpacing=10 borderColor=#ffffff cellPadding=10 width=100 background=http://pds41.cafe.daum.net/attach/4/cafe/ 2007/09/27/17/00/46fb630cf0ac6&filename=273.jpg> <TBODY> <TR> <TD><pre> background 넣기</pre></TD></TR></TBODY></TABLE> </TD></TR></TBODY>lt;/TABLE></TD></TR> </TBODY></TABLE>

(15) 표의 여러 가지 모양

형식 : <rules="속성 값">
"all" : 원고지 모양
"Cols" : 세로모양
"rows" : 가로 모양
"none" : 합친 모양

테이블 원고지 : 실습
특수문자는 ㅁ,ㅇ 등을 쓴후 한자키를 눌러 나온는 문자에서 선택합니다.

사	랑	해	요	♡	행	복	하	세	요
사	랑	해	요	♡	행	복	하	세	요

<TABLE border=2 rules=all bordercolor=skyblue >
<TR>
<TD>사> </td><td>랑</td><td>해</td><요></td><♡</td><td>행</td>lt;td>복</td><td>하</td><td>세</td> <td>요</td></tr><tr>><TD>사> </td><td>랑</td><td>해</td><요></td><♡</td><td>행</td>lt;td>복</td><td>하</td><td>세</td> <td>요</td></tr><table>