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

[펌 강의] 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

등록된 댓글이 없습니다.

컴퓨터/인터넷 목록
번호 제목 글쓴이 날짜 조회
136 XML과 HTML이 뭔가? (1) 댓글[1] 인기글 써니 2005-03-15 6609
135 한글윈도우 댓글[2] 인기글 부탁 2005-03-13 6322
134 compusa님 보세요... 댓글[1] 인기글 초보 2005-03-12 8508
133 화면이 이상합니다... 댓글[2] 인기글 초보 2005-03-12 6521
132 카페로 들어가는 것 댓글[1] 인기글 혜순 2005-03-09 8657
131 컴으로 드라마를 보고싶어요? 댓글[1] 인기글 HANNA 2005-03-09 6833
130 태그 사용 댓글[1] 인기글 grace 2005-03-09 6588
129 HP 6110 xi printer 댓글[1] 인기글 강타 2005-03-09 6623
128 컴퓨터 스크린을 TV로 보는 방법좀 알려주세요 댓글[2] 인기글 제키챤 2005-03-08 6717
127 답변글 컴퓨터 스크린을 TV로 보는 방법좀 알려주세요 댓글[1] 인기글 써니 2005-03-09 6533
126 나만의 홈페이지를 갖자.... APM 설치하기 댓글[1] 인기글 써니 2005-03-08 6660
125 답변글 나만의 홈페이지를 갖자.... APM 설치하기 댓글[2] 인기글 home page 2005-03-14 6960
124 답변글 나만의 홈페이지를 갖자.... APM 설치하기 댓글[1] 인기글 써니 2005-03-15 6302
123 Kernel 32DLL 에 관한 도움 부탁합니다 댓글[1] 인기글 JK 2005-03-07 7513
122 답변글 Kernel 32DLL 에 관한 도움 부탁합니다 댓글[1] 인기글 써니 2005-03-08 6608
121 computer 고쳐주실 분 댓글[1] 인기글 james 2005-03-06 6533
120 이상한 내용의 팝업이 자꾸뜹니다 방법좀... 댓글[5] 인기글 제키챤 2005-03-06 6835
119 로지택mx duo설치시 띡띡띡띡 거리는 잡음문제 아시는분 댓글[1] 인기글 궁금이 2005-03-05 7570
118 도와주시면 감사하겠습니다 댓글[2] 인기글 초보 2005-03-04 6591
117 답변글 도와주시면 감사하겠습니다 댓글[1] 인기글 lee 2005-03-06 6821
116 korean doesn't work 댓글[1] 인기글 sf 2005-03-04 6780
115 답변글 korean doesn't work 댓글[1] 인기글 ^,.^) 2005-03-06 8076
114 [펌 강의] 부록 - META 태그에 대해서.. 댓글[1] 인기글 써니 2005-03-04 6623
113 [펌 강의] 부록 - MARQUEE Tag 이용하기 댓글[1] 인기글 써니 2005-03-04 8075
112 [펌 강의] 부록 - 홈페이지에 음악 넣기 댓글[1] 인기글 써니 2005-03-04 6979
111 [펌 강의] 색살 표 (Color Chart) 댓글[1] 인기글 써니 2005-03-04 6594
110 [펌 강의] 30.Form 예제 (설문양식) 댓글[1] 인기글 써니 2005-03-04 6693
109 정크메일 과 광고전화 막는법 아시는분 도와주세요.. 댓글[1] 인기글 정크 2005-03-02 6950
108 동영상 퍼오는방법 아시는분 ..좀 알켜주세요 댓글[4] 인기글 진실 2005-03-01 6770
107 [펌 강의] 29. 선택목록(List Box or Drop Down Li 댓글[1] 인기글 써니 2005-02-28 7014
게시물 검색
* 본 게시판의 게시물에 대하여 회사가 법적인 책임을 지지 않습니다.