워드프로세서로 문서를 작성할 때 표를 작성해야 할 경우가 많습니다.

워드프로세서에는 표를 만들고 표의 형태와 색깔등 다양하게 꾸밀 수가 있습니다.

HTML 코드로도 워드프로세서로 문서를 작성하는 것처럼 다양하게 표를 꾸밀 수가 있습니다.

 

테이블 즉 표를 사용하는 이유는 다음과 같은 경우입니다.

  • 일반적인 표를 작성하기 위해서
  • 테두리 없는 표로 다단편집의 효과를 내기 위해서
  • 테두리 없는 표로 이미지 정렬을 위해서
  • 웹문서를 적절히 조절하기 위해서

 

먼저, 기본 테이블을 만들어 보겠습니다.

 

<HTML>
<HEAD>
<TITLE>이미지삽입</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD>1행1열</TD><TD>1행2열</TD>
</TR>
<TR>
<TD>2행1열</TD><TD>2행2열</TD>
</TR>
</TABLE>
</BODY>
</HTML>

 

 

위의 예처럼 테이블을 작성 할 때는 먼저 테이블임을 알리는 <TABLE> ~ </TABLE>태그를 테이블의 처음과 마지막에 적어둬야 합니다.

즉, 테이블의 모든 요소는 이 태그안에 들어가게 됩니다.

그리고, <TR> ~ </TR>은 하나의 행을 선언한 것입니다.

위의 예에서는 이 태그가 두가가 있으니 두 개의 행으로 된 테이블임을 알 수 있습니다.

또한, 한 행안에서 열을 표시하기 위한 태그는 <TD> ~ </TD> 입니다.

 

따라서 위의 행은 2행 2열로 된 테이블임을 알 수가 있습니다.

 

정리해 보면 다음과 같습니다.

  • 표를 선언할때는 <TABLE> ~ </TABLE>태그를 이용합니다.
  • 행을 표시나 추가는 <TR> ~ </TR>태그를 이용합니다.
  • 행 안에서 열표시나 추가는 <TD> ~ </TD> 태그를 이용합니다.

 

표를 만들때는 정확하게 몇행 몇열로 표를 만들 것인지를 정하고 표의 전체모양(행과열)을 먼저 잡아주신 다음에 각종옵션과 내용을 채워주시는 것이 좋습니다.


테이블과 셀의 크기 지정하기

 

이번에는 테이블과 테이블 내의 셀의 크기를 바꾸는 것에 대해서 알아보도록 하겠습니다.

셀의 크기를 지정하지 않았을 때는 셀내문장의 크기에 따라 정해집니다.

가로크기를 지정할 때는 WIDTH=n을 사용하고 세로크기는 HEIGHT=n 으로 지정합니다.

 

n을 숫자로 지정했을 경우는 픽셀단위가 되고, %로 지정했을 경우는 전체화면이 100%라는 가정하에서 상대적인 비율(%)로 지정됩니다.

다음의 예는 표의 크기를 전체창의 가로 100%, 세로 50%의 크기로 지정한 것입니다.

 

<HTML>
<HEAD>
<TITLE>이미지삽입</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH="100%" HEIGHT="50%">
<TR>
<TD>1행1열</TD><TD>1행2열</TD>
</TR>
<TR>
<TD>2행1열</TD><TD>2행2열</TD>
</TR>
</TABLE>
</BODY>
</HTML>

 

 

표의크기와 셀의크기 지정하기

 

<HTML>
<HEAD>
<TITLE>이미지삽입</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH="50%">
<TR>
<TD WIDTH="30%">1행1열</TD><TD WIDTH="70%">1행2열</TD>
</TR>
</TABLE>
</BODY>
</HTML>

 

전체 브라우즈의 창의크기를 100으로 보았을 때 표의 크기는 반(50%)이며, 표내의 2개의 셀의 크기는 각각 30%와 70%로 지정한 것입니다.

 





Copyright(c) 2001, 수퍼유저코리아 All Rights Reserved.
서버구축(운용)상담 : e-mail : webmaster@superuser.co.kr