테이블



여기에서는 테이블 속성에 대해서 알아보겠습니다. 현재 테이블에 대한 CSS속성은 넷스케이프의 경우에는 6.0버전이 발표되면서 거의 모든 속성을 지원하고 있습니다. 하지만 익스플로러의 경우와 넷스케이프 4.7은 거의 모든 속성을 지원하지 않습니다. 이러한 이유로 테이블과 관련된 CSS 속성을 되도록 사용하지 않는 것이 좋지만, 현재 브라우저가 지원 못하더라도 나중에 지원할수도 있으니 알아두면 좋겠죠? CSS2에 대한 브라우저 개발사 간의 인식이 높아지면 대부분의 속성을 지원하게 될 것입니다.

border-collapse

border-spacing

caption-side

empty-cells

table-layout


border-collapse(표의 경계선)

border-collapse : 속성값
  • 표의 셀과 외곽에 표의 선을 나타내는 경계선 표시 형식을 설정하는 속성입니다.
  • 속성값은 아래와 같습니다.

    collapse 표의 외곽선과 셀 구분선을 겹쳐서 나타냅니다.
    separate 표의 외곽선과 셀 구분선이 일정한 간격을 두고 나타냅니다.

  • HTML의 경우를 예를 들어 보겠습니다.

    cellspacing=1 cellpacing=0
    이름 전화번호
    홍길동 123-456-7890
    김철수 234-567-8901
    이름 전화번호
    홍길동 123-456-7890
    김철수 234-567-8901
    보세요. 셀구분선과 외곽선 사이에 간격이 보이죠? 여기에서는 각 경계선의 여백이 없어지면서 두 경계선이 나란히 나타나 두꺼운 하나의 선이 탄생했습니다.

  • 그러나 CSS에서 "border-collapse를 사용하면 두 선이 겹쳐서 나타나므로 한 선으로 보이게 됩니다."
  • border-collapse의 기본속성은 collapse이며 이 속성은 넷스케이프에서는 지원하지 않고 있습니다.

border-collapse 적용예제
메모장 < HTML >
< HEAD >
< STYLE type="text/css" >
TABLE#ONE {border-collapse:collapse}
TABLE#TWO {border-collapse:separate}
TD {font-family:굴림체}
< /STYLE>
< /HEAD >
< BODY >
< DIV align="center" >
< TABLE ID="ONE" BORDER="2" bordercolor=red >
< TR >< TD >이름< /TD >< TD >전화번호< /TD >< /TR >
< TR >< TD >홍길동< /TD >< TD >123-456-7890< /TD >< /TR >
< /TABLE >< BR >
< TABLE ID="TWO" border="2" bordercolor=red >
< TR >< TD >이름< /TD >< TD >전화번호< /TD >< /TR >
< TR >< TD >홍길동< /TD >< TD >123-456-7890< /TD >< /TR >
< /TABLE >
< /DIV >
< /BODY >
< /HTML >
브라우저
이름 전화번호
홍길동 123-456-7890
☜ collapse
이름 전화번호
홍길동 123-456-7890
☜ separate

border-spacing( 경계선 간격)

border-spacing : 숫자
  • border-collapse 속성에서 속성값을 separate로 했을 경우 셀 구분선과 외곽선의 간격을 설정합니다.
  • 이 속성은 HTML에서 cellspacing과 같은 역할을 합니다.
  • 이 속성은 Netscape 6에서만 지원되므로 가능하면 사용하지 않는것이 좋습니다. 만약 사용하더라도 cellspacing속성도 함께 작성해야 다른 브라우저에서도 같은 결과가 나타납니다.
  • 이 속성이 가질 수 있는 값은 숫자 + 단위 형태뿐입니다.

border-spacing 적용예제
메모장 < HTML >
< HEAD >
< STYLE type="text/css" >
TABLE#THREE {border-spacing:5px}
TD {font-family:굴림체}
< /STYLE >
< /HEAD >
< BODY >
< DIV align="center" >
< TABLE ID="THREE" BORDER="2" cellspacing=5px >
< TR >
< TD >이름< /TD >
< TD >전화번호< /TD >
< /TR >
< TR >
< TD >홍길동< /TD >
< TD >123-456-7890< /TD >
< /TR >
< /TABLE >
< /DIV >
< /BODY >
< /HTML >
브라우저
이름 전화번호
홍길동 123-456-7890

★ Netscape에서만 지원되는 속성이라 여기서는 할수 없이 cellspacing속성을 넣어서 표현했습니다. 참고하세요.

caption-side(표 제목 위치)

caption-side : 속성값
  • HTML에서 표 제목을 입력하는 < CAPTION >태그에 작성된 표 제목의 정렬을 정의합니다.
  • 이 속성 역시 넷스케이프에서도 속성값 중 일부만 지원되고, 또 일반적으로 표 제목을 작성하는데 있어 caption을 이용하지 않기 때문에 되도록 사용하지 않는 것이 좋습니다.
  • 속성값은 다음과 같습니다.

    top 기본값으로 표 제목을 표의 상단 중앙에 위치시킵니다.
    bottom 표 제목을 표의 하단에 위치시킵니다.
    left 표 제목을 표의 좌측에 위치시킵니다.
    이 속성값은 Netscape에서도 지원하지 않습니다.
    right 표 제목을 표의 우측에 위치시킵니다.
    이 속성값은 Netscape에서도 지원하지 않습니다.


caption-side 적용예제
메모장 < HTML >
< HEAD >
< STYLE type="text/css" >
CAPTION#ONE {caption-side:top; font-size:10pt}
CAPTION#TWO {caption-side:bottom; font-size:10pt}
TD {font-family:굴림체}
< /STYLE >
< /HEAD >
< BODY >
< DIV align="center" >
< TABLE BORDER="2" >
< CAPTION ID="ONE" >TOP< /CAPTION >
< TR >
< TD >이름< /TD >
< TD >전화번호< /TD >
< /TR >
< TR >
< TD >홍길동< /TD >
< TD >123-456-7890< /TD >
< /TR >
< /TABLE >
< BR >
< HR >
< TABLE BORDER="2" >
< CAPTION ID="TWO" >BOTTOM< /CAPTION >
< TR >
< TD >이름< /TD >
< TD >전화번호< /TD >
< /TR >
< TR >
< TD >홍길동< /TD >
< TD >123-456-7890< /TD >
< /TR >
< /TABLE >
< /DIV >
< /BODY >
< /HTML >
브라우저
TOP
이름 전화번호
홍길동 123-456-7890

BOTTOM
이름 전화번호
홍길동 123-456-7890

★ Netscape에서만 지원되는 속성이라 여기서는 효과가 안보여요. 흑흑.. Netscape에서는 Bottom의 제목이 표의 아래에 붙어 있어요. 이상하게 생각하지 마셔요.

empty-cells(내용없는 셀의 외곽선)

empty-cells : 속성값
  • HTML에서 table을 만드실 때, 셀 안에 아무런 내용도 입력되지 않았을 때 셀이 뭉개지는 현상을 보셨죠? 바로 이 empty-cells속성은 셀 안에 아무런 내용도 입력되지 않았을 때 해당 셀에 외곽선을 표시할 것인지에 대한 설정을 합니다.
  • 속성값에는 외곽선을 표시하는 기본값인 show와 외곽선을 표시하지 않는 hide가 있습니다.
  • 이 속성은 Netscape에서만 지원되고 있으며, Explorer에서는 셀 안에 내용이 없으면 외곽선은 표시되지 않습니다.
  • Explorer에서 외곽선을 표시하려면 셀 안에 공백표시인 "& nbsp"를 입력해야 합니다.

empty-cells 적용예제
메모장 < HTML >
< HEAD >
< STYLE type="text/css" >
TABLE#FOUR {empty-cells:show}
TD {font-family:굴림체}
< /STYLE >
< /HEAD >
< BODY >
< DIV align="center" >
< TABLE ID="FOUR" BORDER="2" >
< TR >
< TD >이름< /TD >
< TD >전화번호< /TD >
< /TR >
< TR >
< TD >< /TD >
< TD >123-456-7890< /TD >
< /TR >
< /TABLE >
< /DIV >
< /BODY >
< /HTML >
브라우저
이름 전화번호
홍길동 123-456-7890
234-567-8901

★ 여러분 대부분은 거의 Explorer를 쓰시죠? 그래서.. 빈 셀 공간이 뭉개진 형태로 보여질 것입니다. Netscape에서는 그렇지 않아요.^^

table-layout(표의 출력방법)

table-layout : 속성값
  • 표가 브라우저로 표시될 때의 방법을 설정하는 것입니다.
  • 속성값은 다음과 같습니다.

    auto 표 전체를 읽은 후 각 셀 크기를 계산하여 출력
    fixed 각 셀에 정해져 있는 크기를 기초로 표를 출력

  • 속성값 fixed의 경우에 Explorer에서는 셀 너비를 정해주어야 합니다. 그렇지 않으면 브라우저 가로 크기에 맞게 크기가 조절됩니다.

table-layout 적용예제
메모장 < HTML >
< HEAD >
< STYLE type="text/css" >
TABLE#FIVE {table-layout:fixed}
TABLE#SIX{table-layout:auto}
TD {font-family:굴림체}
CAPTION {font-size: 10pt}
< /STYLE >
< /HEAD >
< BODY >
< TABLE ID="FIVE" BORDER="2" >
< CAPTION >FIXED< /CAPTION >
< TR >
< TD >이름< /TD >
< TD >전화번호< /TD >
< /TR >
< TR >
< TD >홍길동< /TD >
< TD >123-456-7890< /TD >
< /TR >
< /TABLE >
< BR >
< TABLE ID="SIX" border="2" >
< CAPTION >AUTO< /CAPTION >
< TR >
< TD >이름< /TD >
< TD >전화번호< /TD >
< /TR >
< TR >
< TD >홍길동< /TD >
< TD >123-456-7890< /TD >
< /TR >
< /TABLE >
< /BODY >
< /HTML >
브라우저
FIXED
이름 전화번호
홍길동 123-456-7890

AUTO
이름 전화번호
홍길동 123-456-7890

★ 여기서도 마찬가지로 Explorer와 Netscape경우가 다른 모양으로 표현되어집니다. 이곳에서의 Netscape표현은 fixed와 auto의 table모양이 똑같이 표현되어집니다.