* 욕설, 비방, 광고, 도배질 글은 임의로 삭제됩니다.

[펌 강의] 13. Table에 색상과 배경 넣기

페이지 정보

써니

본문

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>
t
ag와 <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에 배경이미지를 넣은 것은 아무런 효과가 없죠?

작성일2005-02-16 15:18

등록된 댓글이 없습니다.

컴퓨터/인터넷 목록
번호 제목 글쓴이 날짜 조회
94 컴이 말썽을 부릴땐 망치로 한대...... (SOS !) 댓글[1] 인기글 선달 2005-02-23 8149
93 답변글 컴이 말썽을 부릴땐 망치로 한대...... (SOS !) 댓글[1] 인기글 써니 2005-02-23 7768
92 답변글 대단 합니다 써니님...... !! 댓글[1] 인기글 선달 2005-02-24 7668
91 sim 에 문제가 있어 프로그램을 종료해야 한다는데......??? 댓글[1] 인기글 So.Cal. 2005-02-23 7167
90 [펌 강의] 19. 프레임(Frame) 나누기 (I) 댓글[1] 인기글 써니 2005-02-22 8291
89 [펌 강의] 18. 프레임(Frame) tag 댓글[1] 인기글 써니 2005-02-22 7854
88 [펌 강의] 17. 프레임(Frame)이란 무엇일까? 인기글 써니 2005-02-22 9651
87 [펌 강의] 16. Table을 이용한 이력서 만들기 인기글 써니 2005-02-22 18790
86 [펌 강의] 15. Table 예제 몇 개 댓글[1] 인기글 써니 2005-02-22 6845
85 디지탈 카메라에 대해 댓글[1] 인기글 당췌모름 2005-02-21 8250
84 포맷변환에대해 댓글[1] 인기글 막무가네 2005-02-21 7465
83 답변글 포맷변환에대해 댓글[1] 인기글 써니 2005-02-21 7783
82 답변글 포맷변환에대해 댓글[1] 인기글 Simple 2005-02-21 7975
81 답변글 포맷변환에대해 댓글[1] 인기글 simple 2005-10-26 6866
80 USB 드라이브에 중요한걸 저장해놨는데 댓글[2] 인기글 컴맹 2005-02-19 8272
79 답변글 USB 드라이브에 중요한걸 저장해놨는데 댓글[1] 인기글 Compusa 2005-03-07 8668
78 답변글 USB 드라이브에 중요한걸 저장해놨는데 댓글[1] 인기글 lee 2005-03-06 7313
77 Hangul for window xp 댓글[3] 인기글 John 2005-02-19 8264
76 싸이에 mp3 올릴수있나요? 댓글[1] 인기글 갈켜주세요 2005-02-19 8171
75 [정보] 동영상을 다운로드 하는 방법 댓글[4] 인기글 써니 2005-02-16 9879
74 [펌 강의] 14. Table 안에 다른 Table 집어 넣기 인기글 써니 2005-02-16 9116
열람중 [펌 강의] 13. Table에 색상과 배경 넣기 인기글 써니 2005-02-16 9889
72 [펌 강의] 12. Table Tag에서 사용되는 옵션 댓글[1] 인기글 써니 2005-02-16 8768
71 [펌 강의] 11. Table의 이해와 Table Tag 댓글[1] 인기글 써니 2005-02-16 8471
70 [펌 강의] 10. HTML에 Image 넣기 댓글[1] 인기글 써니 2005-02-16 8905
69 Window screen got shrink??? 댓글[1] 인기글 sonny 2005-02-16 9745
68 답변글 Window screen got shrink??? 댓글[1] 인기글 써니 2005-02-16 8586
67 답변글 Window screen got shrink??? 인기글 sonny 2005-02-16 9424
66 compusa 님 답글 감사합니다. 근데,여전히 문제가.. 댓글[1] 인기글 mask 2005-02-14 7760
65 답변글 compusa 님 답글 감사합니다. 근데,여전히 문제가.. 댓글[2] 인기글 Compusa 2005-02-16 8532
게시물 검색
* 본 게시판의 게시물에 대하여 회사가 법적인 책임을 지지 않습니다.