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

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

등록된 댓글이 없습니다.

컴퓨터/인터넷 목록
번호 제목 글쓴이 날짜 조회
179 컴퓨터에 대하여. 댓글[1] 인기글 jeo 2005-05-14 6090
178 답변글 컴퓨터에 대하여. 인기글 써니 2005-05-14 6134
177 답변글 컴퓨터에 대하여. 댓글[1] 인기글 jeo 2005-05-17 6289
176 Specializing in Network 댓글[1] 인기글 NetGeeks 2005-05-11 6776
175 이번엔 노트북 구매 추천 바랍니다. 댓글[1] 인기글 제키챤 2005-05-04 5992
174 답변글 Jacky님 compusa님 정말 고마운 정보 감사 드립니다 댓글[1] 인기글 제키챤 2005-05-07 6335
173 답변글 이번엔 노트북 구매 추천 바랍니다. 댓글[1] 인기글 jacky 2005-05-04 6302
172 답변글 이번엔 노트북 구매 추천 바랍니다. 댓글[1] 인기글 Compusa 2005-05-04 6210
171 IT관련직종에 근무하시는분께 진로문제로 간절히 질문드립니다.. 댓글[1] 인기글 공부하는청년 2005-05-03 5998
170 답변글 조언... 인기글 advisor 2005-05-07 6242
169 답변글 IT관련직종에 근무하시는분께 진로문제로 간절히 질문드립니다.. 댓글[1] 인기글 Compusa 2005-05-04 6187
168 답변글 IT관련직종에 근무하시는분께 진로문제로 간절히 질문드립니다.. 댓글[1] 인기글 아나 2005-05-15 6312
167 Rename 댓글[1] 인기글 Ken Kim 2005-04-28 8236
166 답변글 Rename 댓글[1] 인기글 써니 2005-04-29 7121
165 답변글 Rename 댓글[1] 인기글 Ken Kim 2005-04-30 8325
164 무선 인터넷 설치방법을 알려주세요 댓글[1] 인기글 andy 2005-04-28 6534
163 [정보] MS 블랙박스 기능, 개인 사생활 침해 논란 인기글 써니 2005-04-27 6228
162 [정보] 마이크로소프트의 PDF 킬러, “Metro” 댓글[1] 인기글 써니 2005-04-27 6588
161 디카 사진 씨디 로 안 구워져요 댓글[2] 인기글 ??? 2005-04-27 6314
160 [정보] 안연구소, MP3파일 지우는 바이러스 출현경보 댓글[1] 인기글 써니 2005-04-26 6091
159 Marketing Network team 을 많이 소유하신분께 댓글[1] 인기글 rhee 2005-04-14 8106
158 Internet 사업하시는분 께서는PayPal 를 사용하세요 댓글[1] 인기글 Rhee 2005-04-14 6451
157 [정보] 블로그를 통한 악성 코드 배포 증가 댓글[1] 인기글 써니 2005-04-14 6383
156 스크롤바의 글자가 깨어져 나와요. 도와주세요. 댓글[2] 인기글 답답 2005-04-07 6190
155 popups 댓글[1] 인기글 맹맹 2005-04-05 6832
154 답변글 popups 댓글[1] 인기글 유샤인 2005-11-08 8296
153 답변글 popups 댓글[1] 인기글 써니 2005-04-05 5964
152 써니님!! 도와주세요 댓글[1] 인기글 comcast 2005-04-04 6164
151 동영상 관련 댓글[1] 인기글 TR 2005-04-03 5995
150 답변글 동영상 관련 댓글[1] 인기글 nikki 2005-04-05 6236
게시물 검색
* 본 게시판의 게시물에 대하여 회사가 법적인 책임을 지지 않습니다.