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

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

등록된 댓글이 없습니다.

컴퓨터/인터넷 목록
번호 제목 글쓴이 날짜 조회
164 무선 인터넷 설치방법을 알려주세요 댓글[1] 인기글 andy 2005-04-28 6505
163 [정보] MS 블랙박스 기능, 개인 사생활 침해 논란 인기글 써니 2005-04-27 6199
162 [정보] 마이크로소프트의 PDF 킬러, “Metro” 댓글[1] 인기글 써니 2005-04-27 6562
161 디카 사진 씨디 로 안 구워져요 댓글[2] 인기글 ??? 2005-04-27 6288
160 [정보] 안연구소, MP3파일 지우는 바이러스 출현경보 댓글[1] 인기글 써니 2005-04-26 6065
159 Marketing Network team 을 많이 소유하신분께 댓글[1] 인기글 rhee 2005-04-14 8077
158 Internet 사업하시는분 께서는PayPal 를 사용하세요 댓글[1] 인기글 Rhee 2005-04-14 6424
157 [정보] 블로그를 통한 악성 코드 배포 증가 댓글[1] 인기글 써니 2005-04-14 6354
156 스크롤바의 글자가 깨어져 나와요. 도와주세요. 댓글[2] 인기글 답답 2005-04-07 6159
155 popups 댓글[1] 인기글 맹맹 2005-04-05 6802
154 답변글 popups 댓글[1] 인기글 유샤인 2005-11-08 8267
153 답변글 popups 댓글[1] 인기글 써니 2005-04-05 5932
152 써니님!! 도와주세요 댓글[1] 인기글 comcast 2005-04-04 6135
151 동영상 관련 댓글[1] 인기글 TR 2005-04-03 5966
150 답변글 동영상 관련 댓글[1] 인기글 nikki 2005-04-05 6202
149 써니님!! 도와주세요.. 댓글[1] 인기글 초보 2005-04-01 6218
148 답변글 써니님!! 도와주세요.. 댓글[1] 인기글 써니 2005-04-03 6191
147 [정보] 소니 PS2 북미 지역 판매 금지 위기 댓글[1] 인기글 써니 2005-03-31 6662
146 DVP642 DVD 플레이어 질문입니다. 댓글[1] 인기글 김진수 2005-03-28 6508
145 컴퓨터 출장 수리(엘에이 지역) 댓글[1] 인기글 PC 수리 2005-03-27 6382
144 영문 window XP 에서 한글문서 만드는 방법 알려주세요 댓글[2] 인기글 JK 2005-03-21 6127
143 "Internet Explorer 문제 발생" 하고 인터넷이 끊어져요!! 댓글[1] 인기글 왕꽃 2005-03-21 6442
142 디지탈 카메라를 구입하고 싶은데요 추천좀.. 댓글[1] 인기글 제키챤 2005-03-20 6575
141 제발도와주세요 댓글[1] 인기글 컴맹 2005-03-19 6411
140 답변글 제발도와주세요 인기글 brian 2005-03-19 6248
139 동영상 이미지 파일로 바꾸기 어케해요? 댓글[1] 인기글 비디오 2005-03-18 6517
138 compusa,써니님 감사합니다 댓글[2] 인기글 초보 2005-03-16 8411
137 XML과 HTML이 뭔가? (2) 댓글[1] 인기글 써니 2005-03-15 6160
136 XML과 HTML이 뭔가? (1) 댓글[1] 인기글 써니 2005-03-15 6564
135 한글윈도우 댓글[2] 인기글 부탁 2005-03-13 6277
게시물 검색
* 본 게시판의 게시물에 대하여 회사가 법적인 책임을 지지 않습니다.