TABLE (3)


복수의 셀 합치기

셀의 크기 및 데이터의 위치

웹과 색채



1. 복수의 셀 합치기


<TD rowspan="n" colspan="n">...</TD>

TABLE을 만들고 이미지나 텍스트를 삽입하여 정렬하다 보면 셀들을 합쳐야 할 경우가 자주 있습니다. 이럴 경우에 Rowspan과 Colspan 속성을 사용하면 간단하게 여러 개의 셀을 하나로 합칠 수 있습니다.
  1. Colspan:가로의 셀들을 합칠 때 사용하는 속성으로 속성값은 합칠 개수(n)를 말합니다.
  2. Rowspan:세로의 셀들을 합칠 때 사용하는 속성으로 속성값은 합칠 개수(n)를 말합니다.

  1. colspan의 경우 가로셀을 합치는 것이므로 합치고 싶은 가로셀 수 만큼 합치고 나서 오른쪽 셀이나 아래 셀을 만들면 되겠습니다. 새로운 줄이 시작 될때는 (TR)이 오면 되겠죠?
  2. rowspan은 세로로 셀이 합쳐지므로 다소 까다롭습니다. 셀을 정리할 때 우선순위는 현재 셀을 먼저 해결하고, 그 다음이 오른쪽입니다. 한 줄이 마무리되고 나면 새로운 줄이 시작되는 (TR)을 써주고, 셀이 합쳐진 부분은 제외 한 나머지 셀들을 채워갑니다.
  3. 아래의 예제에서 번호 순서대로 차근차근 만들어 보시면 되겠습니다.
  4. 가장 쉬운 방법은 일단 테이블이 합쳐진 여러가지 모양을 메모지에 그려서 그 메모지를 참고하여 실제로 한번씩 만들어 보는 수 밖에 없습니다. 몇 번을 해보고 나시면.. 그 다음엔 감이 오실겁니다.
  5. 복잡하게 얽힌 셀은 다소 혼동이 올 수 있으니,, 연습하세요. 연습이 대가를 만든대요.^^

Colspan
colspan=2 colspan=3 colspan=4
<TABLE border=1> <TR> <TD clospan=2>1</TD> </TR> <TR> <TD>2</TD> <TD>3</TD> </TR> </TABLE>
2개의 셀을 합치려면 colspan=2를 적용합니다. 그 다음은 줄이 바뀌니 (/TR)이 오고, 새로운 줄이 시작되니 (TR)이 오면 되겠죠?
<TABLE border=1> <TR> <TD clospan=3>1</TD> </TR> <TR> <TD>2</TD> <TD>3</TD> <TD>4</TD> </TR> </TABLE>
3개의 셀을 합치려면 colspan=3를 적용
<TABLE border=1> <TR> <TD colspan=4>1</TD> </TR> <TR> <TD>2</TD> <TD>3</TD> <TD>4</TD> <TD>5</TD> </TR> </TABLE>
4개의 셀을 합치려면 colspan=4를 적용
1
2 3
1
2 3 4
1
2 3 4 5
복수의 셀 합치기

<table border=1> <tr> <td colspan=4>내용1</td> </tr> <tr> <td colspan=2>내용2</td><td>내용3</td><td>내용4</td> </tr> <tr> <td>내용5</td><td>내용6</td><td colspan=2>내용7</td> </tr> </table>

내용1
내용2내용3내용4
내용5내용6내용7

만드는 방법

  1. 우선, table이 시작하니까 (table)을 써줍니다.
  2. 첫번째 줄(tr)을 만듭니다. 첫번째 셀(td) "내용 1"은 그 아래 셀들을 가만히 보시면.. 한 줄이 모두 최대 4개의 셀로 구성되어 있죠? 이 4개의 셀을 모두 한 줄로 합친 셀이므로 (td) 옆에 "colspan=4"를 써줍니다. (td colspan=4)내용 1(/td)
  3. 그 다음, 두번째 줄로 넘어가서, "내용 2"셀은 셀 2개를 합쳐 놓은 것이므로 "colspan=2"를 넣어주시고 바로 옆의 "내용 3", "내용 4"셀을 만들어 나갑니다.
  4. 마지막 줄도 마찬가지!! "내용 5", "내용 6"셀을 만드시고.. 마지막 "내용 7" 셀도 셀 2개가 합쳐진 것이므로 (td colspan=2)내용 7(/td)을 써줍니다.
  5. 이제 table을 닫아야겠죠? ☞ (/table)
Rowspan
rowspan=2 rowspan=3 rowspan=4
<TABLE border=1> <TR> <TD rowspan=2>1</TD> <TD>2</TD> </TR> <TR><TD>3</TD></TR> </TABLE>
우선순위는 현재 셀을 먼저 해결합니다. 즉, 먼저 해결할 부분은 현재 셀, 즉 "1"을 먼저 합치고... 그 다음, 오른쪽으로 넘어가야 합니다.
<TABLE border=1> <TR> <TD rowspan=3>1</TD> <TD>2</TD> </TR> <TR><TD>3</TD></TR> <TR><TD>4</TD></TR> </TR> </TABLE>
3개의 셀을 합치려면 rowspan=3를 적용
<TABLE border=1> <TR> <TD rowspan=4>1</TD> <TD>2</TD> </TR> <TR><TD>3</TD></TR> <TR><TD>4</TD></TR> <TR><TD>5</TD></TR> </TABLE>
4개의 셀을 합치려면 rowspan=4를 적용
1 2
3
1 2
3
4
12
3
4
5
복수의 셀 합치기

<table border=1> <tr> <td rowspan="2">내용1</td><td>내용2</td><td>내용3</td> </tr> <tr> <td>내용4</td><td rowspan=2>내용5</td> </tr> <tr> <td>내용6</td><td>내용7</td> </tr> </table>
내용1내용2내용3
내용4내용5
내용6내용7

★ 번호 순서대로 셀을 만들어 봐요.


2. 셀의 크기 및 데이터의 위치



<TD width="셀의 넓이" height="셀의 높이">...</TD>

  1. 셀의 넓이와 높이를 지정할 때 width속성과 height속성을 이용합니다.
  2. 크기는 픽셀 단위로 계산하며, 입력한 숫자만큼 높낮이를 조절할 수 있습니다.
  3. height는 거의 이용하지 않는 편입니다.

width=50 height=70 width=100 height=50 width=50 height=100

<TD align="left/right/center" valign="top/middle/bottom">...</TD>

셀에 들어가는 이미지나 텍스트의 위치를 지정할 때 align과 valign 속성을 이용합니다.
  1. align의 속성 값은 좌(left), 우(right), 중앙(center)으로 이미지나 텍스트를 배치합니다.
  2. align속성을 사용하지 않을 경우 기본 값은 left가 적용됩니다.
  3. valign의 속성 값은 상(top), 중(middle), 하(bottom)로 이미지나 텍스트를 배치합니다.
  4. valign의 속성을 사용하지 않을 경우 기본 값은 middle이 적용됩니다.

Align, Valign
TEXT IMAGE
align=left align=center align=right
valign=top valign=middle valign=bottom

<TD nowrap>...</TD>
nowrap은 테이블 내부 셀(cell)에서 자동으로 줄바꿈 되는 텍스트들을 줄바꿈 하지 못하게 하는 속성입니다.

자동 줄바꿈 금지를 적용 안한 경우 자동 줄바꿈 금지가 적용된 경우
<table border width="200"> <tr> <td>저자</td><td>안철수</td> </tr> <tr> <td>내용</td> <td>내가 생각하는 승부법! 내가 자유로운 이유</td> </tr> </table> <table border width="200"> <tr> <td nowrap>저자</td><td>안철수</td> </tr> <tr> <td nowrap>내용</td> <td nowrap>내가 생각하는 승부법! 내가 자유로운 이유</td> </tr> </table>
저자안철수
내용 내가 생각하는 승부법! 내가 자유로운 이유
저자안철수
내용 내가 생각하는 승부법! 내가 자유로운 이유


3. 웹과 색채

앞 강좌에서 body bgcolor, table bgcolor 등 color에 대한 언급을 많이 했었습니다. 일반적으로 웹에서 쓰는 칼라명은 영자로 적을 수 있는 색상명과 16진수 헥사코드를 사용합니다. 그러면... 도대체 16진수 칼라가 무엇인가에 대하여 한번 알아보기로 할까요? Internet은 처음 UNIX SYSTEM 에서 출발했습니다. UNIX에선 color를 표현할 때 16진수를 사용한다고 하네요.(As you see and realize, Those above stuffs means the Color of things.Probably the numberic expression came from UNIX operating System. Because the UNIX used the Hexadecimal Number.)


여러분들은 '빛의 삼원색', '색의 삼원색'에 대하여 들어보신 적이 있으실 겁니다. 우리가 모니터를 통해서 보는 색상은 빨간색(Red), 초록색(Green), 파란색(Blue) 세가지 색을 가산혼합원리에 의해 혼합하여 만들어진 색입니다. 빛의 3 원색을 섞어 만드는 컬러 방식을 RGB 컬러 방식이라고 합니다. 이 세가지 색의 비율을 각각 다르게 하여 여러가지 색상을 만들어냅니다.
그러나 우리가 그림을 그릴때에는 빨간색(Margeta), 파란색(Cyan), 노란색(Yellow)을 가지고 색을 혼합하여 색상을 만듭니다(참고로 CMYK 컬러 방식은 Cyan, Magenta, Yellow, Black 이 네가지 색을 혼합하여 색을 표현하는 방식을 말합니다.)
색은 기본색들의 조합으로 만들어 지는데 그 기본이 되는 색이 다르기 때문에 모니터와 출력해서 보는 색상이 달라지게 됩니다. 같은 색처럼 보이는 색일지라도 모니터를 통해서 보여지는 색과 실제 색의 조합은 달라지게 되죠.


16진수 색상코드(Hexadecimal Color Codes)

  1. 보통 화면출력을 위해 이미지 작업을 할 경우 웹에서는 헥사코드(Hex Code)라는 16진수의 값이나 색이름을 사용합니다.

    ※ 참고 (hexadecimal)
    16진 (hexadecimal) 표기는 16을 기수로 사용한다: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. 이러한 체계가 처음에는 좀 혼동을주지만, 컴퓨터 환경에는 매우 잘 들어맞는다. 예를들어 한 바이트의 정보는 8 비트로 (10011101) 로 표기할 수 있고, 십진법의 수로 (913) 으로 쓸 수 있지만 16진수로는 간단히 (9D) 로 표기된다. 16진수에서 한 바이트는 두자리 숫자로 나타낼 수 있다


  2. 헥사 코드란 RED(빨간색), GREEN(녹색), BLUE(파란색) 세가지 색상을 16진수로 표현한 값을 말합니다.

  3. 16진수는 1에서 0까지의 10개의 숫자와 A에서 F까지의 6개의 문자를 조합한 16개의 기호, 즉 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F로 각각의 색상을 00에서 FF까지 256색으로 표현할 수 있습니다. 16 진수의 값은 #(RED)(GREEN)(BLUE) 각각 두자리 숫자로 되어 있습니다

  4. 16진수로 사용할 경우 원리는 다음과 같습니다.
    ① 6자리 수를 사용합니다.
    ② #xxxxxx 앞쪽에 수(Number)를 뜻하는 #기호를 넣습니다.
    ③ 6자리수를 2자리씩 나눠서 앞자리부터 'Red' 'Green' 'Blue'의 값을 줍니다.
    ④ 각 2자리 수는 16진수 이며, 00 ~ FF의 값을 갖게 되죠.
    예를 들어 #000000이면 세가지 색이 모두 없으므로 검정색입니다.
    또 #0000FF 이면 파란색만 값이 최대이므로 파란색이 됩니다.
    또 #FF00FF 이면 파란색과 빨간색의 값이 최대이므로 보라색이 됩니다.

    The sixteen basic color-mapped names
    and corresponding RGB hexadecimal values.
    Black
    000000
    .
    		 White
    FFFFFF
    .
    		 Red
    FF0000
    .
    		 Yellow
    FFFF00
    .
    		 Lime
    00FF00
    .
    		 Aqua
    00FFFF
    .
    		 Blue
    0000FF
    .
    		 Fuchsia
    FF00FF
    .
    Gray
    808080
    .
    		 Silver
    C0C0C0
    .
    		 Maroon
    800000
    .
    		 Olive
    808000
    .
    		 Green
    008000
    .
    		 Teal
    008080
    .
    		 Navy
    000080
    .
    		 Purple
    800080
    .

  5. 이러한 조합으로 만들수 있는 색상은 16,777,216색(256*256*256)이나 됩니다. 하지만 이러한 색들이 모든 컴퓨터에서 동일하게 보여지지 않습니다. 이러한 색채의 불안정성을 유발시키는 데에는 모니터, 그래픽카드, 브라우저 등 그 요인은 여러가지가 있습니다. HTML 색상표는 인터넷에 들어가면 쉽게 구할 수 있습니다
★ REFERENCE : FOR MORE DETAILED COLOR

▣ Nescape Color Values

▣ Non-Dithering Colors in Browsers

▣ Web Diner's Hexcode Color Chart

▣ The Browser Safe Palette (BSP)