size="2">13. Table에 색상과 배경 넣기
1) Table에 색상 넣기
테이블에 색상을 넣는 방법과 테이블
안에 또다른 테이블을 넣는 방법을 설명해보도록 하겠습니다.
- bgcolor="색상" size="2">
표(Table) 전체 또는 셀의 배경
색상을 지정할 때 사용합니다. 예를 들면 bgcolor=""#F4F4FF"
와 같이 사용합니다.
- bordercolor="색상" size="2">
표(Table) 또는 셀의 테두리 선의
색상을 지정할 때 사용합니다. 예를 들면 표의 테두리 선의 색상은
bordercolor="#B9D0FF" 와 같이 사용하면 되죠.
- bordercolordark="색상" size="2">
외곽선에 사용되는 색상을 지정할
때 사용합니다. 예를 들면 테두리 선의 조금 진한 부분의 색상은
bordercolordark="#C5BEFF" 로 하죠.
- bordercolorlight="색상" size="2">
표의 제일 바깥에 있는 테두리 선
말고 그 안에도 약간 흐린 색으로 선이 있죠? 이 선의 색상은 bordercolorlight="#DCDFFF"
게 합시다.
색상은 bgcolor="red"
와 같이 사용해도 되고 bgcolor="#FF0000"와 같이 표현해도
됩니다. 영문과 rgb 색상 모두가 가능합니다. 하지만 아무래도 후자를
이용하는 게 미세한 색상을 표현하는 데는 더 효과적입니다. bgcolor
뿐 아니라 위에 있는 다른 Tag에서도 마찬가지죠.
위에 있는 Tag들은 표뿐 아니라 셀의
색상을 지정할 때도 사용됩니다. 테이블 전체의 색상을 지정할 때는
<TABLE bgcolor="색상"> 하면 되고 셀의 색상을 지정할
때는 <TD bgcolor="색상"> 이라고 TD Tag 안에 사용하면
됩니다.
지난 번 예에 추가해서 위에 있는
내용을 예로 들자면 아래와 같습니다. 아래 예에는 Table Tag 안에서만
사용했지만, Table 안의 셀 마다 색상을 다르게 지정하려면 각 셀, 그러니까
TD Tag 안에 Table Tag에서 색상을 삽입한 방법과 같은 방식으로 삽입하면
됩니다.
① <TABLE> Tag에 넣는
경우
<HTML>
<HEAD>
<TITLE>Table에 배경색상 넣기 1.</TITLE>
</HEAD>
<BODY>
<TABLE
border="0" cellspacing="5" cellpadding="5"
width="600" height="400" size="2" color="red">bgcolor="#F4F4FF" bordercolor="#B9D0FF" bordercolordark="#C5BEFF"
bordercolorlight="#DCDFFF">
<TR>
<TD>
예제 1 </TD>
</TR>
</TABLE>
</BODY>
</HTML> size="2"> target="_blank">결과보기
그리고 <TABLE> Tag 뿐 아니라 <TR>
tag와 <TD> Tag 안에서도
사용을 할 수가 있습니다.
② <TR> Tag에 넣는 경우
<HTML>
<HEAD>
<TITLE>Table에 배경색상 넣기
2.</TITLE>
</HEAD>
<BODY>
<TABLE
border>
<TR
bgcolor="cyan" size="2">>
<TD
colspan="2"> 면용, 인희 </TD>
<TD>
주형 </TD>
<TD>
규일 </TD>
</TR>
<TR size="2" color="red">bgcolor="green" size="2">>
<TD>
상욱 </TD>
<TD>
효일 </TD>
<TD
rowspan="2"> 원희<BR>영주 </TD>
<TD>
우성 </TD>
</TR>
<TR size="2" color="red">bgcolor="yellow size="2">">
<TD>
충원 </TD>
<TD>
영상 </TD>
<TD>
관호 </TD>
</TR>
</TABLE>
</BODY>
</HTML> target="_blank">결과보기 size="2">
③ <TD> Tag에 넣는 경우
<HTML>
<HEAD>
<TITLE>Table에 배경색상 넣기
3.</TITLE>
</HEAD>
<BODY>
<TABLE
border>
<TR>
<TD
colspan="2" bgcolor="cyan" size="2">> 면용, 인희 </TD>
<TD>
주형 </TD>
<TD size="2" color="red"> bgcolor="yellow size="2">"> 규일 </TD>
</TR>
<TR>
<TD>
상욱 </TD>
<TD
bgcolor="black size="2">"> <font color="white">효일</font>
</TD>
<TD
rowspan="2"> 원희<BR>영주 </TD>
<TD
bgcolor="green"> 우성 </TD>
</TR>
<TR size="2" color="red">bgcolor="yellow size="2">">
<TD>
충원 </TD>
<TD>
영상 </TD>
<TD>
관호 </TD>
</TR>
</TABLE>
</BODY>
</HTML> target="_blank">결과보기 size="2">
테이블 전체나 일부에 대해 자유롭게
색상을 설정할 수 있겠죠?그럼 배경은 어떻게 넣을까요? 아래 예제를
볼까요.
2) Table에 배경이미지 넣기
Table에 배경이미지를 넣는 것은
html 문서에 배경이미지를 넣는 것과 방법은 동일합니다. 그리고 Table에
배경색상을 넣는 방법과도 아주 유사합니다. <TR> Tag에는 사용해도
아무런 효과가 없다는 것만 빼면^^*
같은 예제를 갖고 테스트 해볼까요?
① <TABLE> Tag에 넣는
경우 -> 이건 아무리 넣어도 안보입니다.
<HTML>
<HEAD>
<TITLE>Table에 배경이미지 넣기 1.</TITLE>
</HEAD>
<BODY>
<TABLE
border="0" cellspacing="5" cellpadding="5"
width="600" height="400" size="2" color="red"> background="bgrnd01.gif" size="2">>
<TR>
<TD>
예제 1 </TD>
</TR>
</TABLE>
</BODY>
</HTML> size="2"> target="_blank">결과보기
② <TR> Tag에 넣는 경우
-> 이건 아무리 넣어도 안보입니다.
<HTML>
<HEAD>
<TITLE>Table에 배경이미지 넣기
2.</TITLE>
</HEAD>
<BODY>
<TABLE
border>
<TR
background="bgrnd01.gif" size="2">>
<TD
colspan="2"> 면용, 인희 </TD>
<TD>
주형 </TD>
<TD>
규일 </TD>
</TR>
<TR>
<TD>
상욱 </TD>
<TD>
효일 </TD>
<TD
rowspan="2"> 원희<BR>영주 </TD>
<TD>
우성 </TD>
</TR>
<TR size="2" color="red">background="bgrnd01.gif" size="2">>
<TD>
충원 </TD>
<TD>
영상 </TD>
<TD>
관호 </TD>
</TR>
</TABLE>
</BODY>
</HTML> target="_blank">결과보기 size="2">
③ <TD> Tag에 넣는 경우
<HTML>
<HEAD>
<TITLE>Table에 배경이미지 넣기
3.</TITLE>
</HEAD>
<BODY>
<TABLE
border>
<TR>
<TD
colspan="2" background="bgrnd01.gif" size="2">> 면용, 인희 </TD>
<TD>
주형 </TD>
<TD
bgcolor="yellow"> 규일 </TD>
</TR>
<TR>
<TD>
상욱 </TD>
<TD
background="bgrnd01.gif" size="2">> 효일 </TD>
<TD
rowspan="2"> 원희<BR>영주 </TD>
<TD
background="bgrnd01.gif" size="2">> 우성 </TD>
</TR>
<TR size="2" color="red">background="bgrnd01.gif" size="2">>
<TD>
충원 </TD>
<TD>
영상 </TD>
<TD>
관호 </TD>
</TR>
</TABLE>
</BODY>
</HTML> target="_blank">결과보기 size="2">
위에서 보면 배경색상을 넣는 것과는
달리 <TR> Tag에 배경이미지를 넣은 것은 아무런 효과가 없죠? |
[펌 강의] 13. Table에 색상과 배경 넣기 
