TABLE (2)


표의 크기와 위치 지정하기

셀과 셀 사이에 여백 지정하기

표 이쁘게 꾸미기



1. 표의 크기와 위치 지정하기


<TABLE width="폭", height="높이", align="left/right/center">...</TABLE>

TABLE의 속성 중 가장 많이 사용하는 속성은 border, width, height, align, cellpadding, cellspacing이 있습니다. 이곳에서는 width와 height, align에 대해서 알아보겠습니다.
  1. width:전체 테이블의 가로 크기를 지정합니다. 속성값으로는 픽셀(pixel)과 퍼센트(%)가 있습니다.
    숫자만 적어도 픽셀로 인식을 하며 퍼센트는 브라우저 화면을 100%로 기준으로 하여 상대적인 값이 적용됩니다.
  2. height: 전체 테이블의 세로 크기를 지정합니다. 속성값은 width와 동일합니다.
  3. align: 테이블의 위치를 설정할때 적용합니다. 속성값으로는 left와 right, center가 있습니다.

Width
Width=50 Width=100 Width=250
Height
Height=50 Height=100 Height=250
Align
Align=left Align=center Align=right


2. 셀과 셀 사이에 여백 지정하기


<TABLE cellpadding="데이터와 테두리 사이 간격">...</TABLE> <TABLE cellspacing="셀사이 간격">...</TABLE>

  1. 셀(cell) : cell이라는 말의 뜻은 "방"이라는 말입니다.
  2. 내용 : 텍스트가 될 수도 있고 이미지가 될 수도 있습니다.
  3. cellpadding : 내용과 cell 경계선과의 간격을 말합니다.
    (※padding은 채워넣기, 패드를 댐, 불필요한 삽입 부분이라 뜻으로 실제 내용 이외의 부분을 뜻합니다.)
  4. cellspacing : cell과 cell 사이의 간격을 말합니다.

Cellpadding
Cellpadding=0
하 하
호 호
Cellpadding=10
하 하
호 호
Cellpadding=50
하 하
호 호
Cellspacing
Cellspacing=0
하 하
호 호
Cellspacing=10
하 하
호 호
Cellspacing=50
하 하
호 호


3. 표 이쁘게 꾸미기

표의 외곽선에 색상 넣기

<TABLE bordercolor="색상명">...</TABLE> <TABLE bordercolorlight="색상명" bordercolordark="색상명">...</TABLE>

  1. bordercolor는 테이블의 전체 외곽선에 색상을 넣고자 할 때 사용합니다.
  2. bordercolorlight는 외곽선의 밝은부분의 색상을, bordercolordark는 외곽선의 어두운 부분의 색상을 설정합니다.
  3. bordercolor, bordercolorlight, bordercolordark는 넷스케이프에서 적용되지 않거나 적용되어도 전혀 다르게 나타납니다.
  4. 이 속성은 W3C에서 말하는 HTML 4.0에 수록된 내용이 아니며 MS사에서 자체적으로 만들어 낸 속성입니다.

Border color=red Bordercolorlight=red Bordercolordark=blue
이 테이블의 테두리는 빨강색입니다.
이 테이블의 색상은 어떻게 나올까요?
Border=1
Bordercolor=green		 Border=10
Bordercolor=red		 Border=50
Bordercolor=blue

표에 배경색 넣기

<TABLE bgcolor="16진수/색상명">...</TABLE> <TR bgcolor="16진수/색상명">...</TR> <TD bgcolor="16진수/색상명">...</TD>
bgcolor는 앞서 배운 것처럼 Body태그의 속성으로 사용되기도 하고 TABLE, TR, TD태그의 속성으로도 사용됩니다.

Table bgcolor TR bgcolor TD bgcolor

표에 배경 이미지 넣기

<TABLE background="이미지 명">...</TABLE> <TR background="이미지 명">...</TR> <TD background="이미지 명">...</TD>
TABLE, TD에 배경이미지가 삽입되면, 전체 또는 셀에 배경이미지가 나타납니다.
하지만, TR에 배경이미지를 삽입할 경우 넷스케이프에서는 나타나지만, 익스플로러에서는 배경이미지를 보여주지 않습니다. 테이블에 배경이미지를 삽입하고자 할 경우에는 TABLE이나 TD에 삽입하여 사용합니다.

Table background TR background TD background

TR에 background 이미지를 넣었으나 브라우저가 Explore인 분은 보이시지 않을겁니다.