최근에 홈페이지 경향을 보면 노프레임으로 가는 추세이죠.
여기서 노프레임이란 프레임이 없는 홈페이지를 말합니다.
프레임이 없다는 말은 그만큼 표가 많이 사용된다는 뜻이죠.
표를 얼마나 잘 사용하는가는 그 홈페이지의 깔금도(?)를 결정할 정도로 중요합니다.
대부분 다 아시는 내용이겠지만, 혹시 모르시는 분을 위해...

자 그럼 시작해 볼까요?

##표의 기본

<table><tr><td> ... </td></tr></table>

위에서 table은 표, tr(table row)는 행, td(table data 이거 맞나? ^^;)는 열을 의미합니다.
사설 집어치우고 한 칸짜리 표(1행1열), 3행 2열짜리 표 하나씩 만들어 보죠.

<table>
<tr><td>11</td></tr>
</table>

<table>
<tr><td>11</td><td>12</td></tr>
<tr><td>21</td><td>22</td></tr>
<tr><td>31</td><td>32</td></tr>
</table>

생긴 거 보면 어떤 게 1행1열짜리 표인지, 3행 2열짜리 표인지 아시겠죠?

그러면 셀(각각의 칸)을 합쳐볼까요?
3행2열짜리 테이블은 총 여섯 칸인데 맨 위에 두 칸을 합치면 총 다섯칸이 되겠죠.
행을 합칠 때는 rowspan(row span)을 사용하고, 열을 합칠 땐 colspan(column span)을 사용합니다.
span이라는 단어를 사전에서 찾아보시면 '묶다' 뭐 대충 그런 뜻을 가지고 있습니다.

<table>
<tr><td colspan="2">11</td></tr>
<tr><td>21</td><td>22</td></tr>
<tr><td>31</td><td>32</td></tr>
</table>

위에꺼랑 뭐가 바뀌었는 지 찾아보세요.
생긴 것도 꼭 다섯칸짜리 표같이 생겼죠.

테이블과 셀 크기를 지정할 땐 table에 어쩌구저쩌구 해 주고, td에만 어쩌구저쩌구해주면 됩니다.(tr에는 어쩌구저쩌구 해 줄 필요없음.)
여기서 크기의 단위는 지정하지 않으면 기본적으로 pixel단위로 적용되며, %단위로 적용하고자 하면 값 뒤에 %만 적어주면 되죠.
예를 보자면,

<table width="100" height="100">
<tr><td colspan="2">11</td></tr>
<tr><td width="30">21</td><td width="70">22</td></tr>
<tr><td>31</td><td>32</td></tr>
</table>

대충 머리 속에 그려지나요?
안 그려지면 메모장으로 위 코드를 복사-붙여넣기해서 익스플로러에서 확인해보세요.

이제 표의 테두리 두께 및 색상을 지정해보죠.
두께는 border(테두리, 가장자리라는 뜻이 있죠)로 색상은 bordercolor로 지정합니다.
사설 집어치우고 예를 보죠.

<table width="100" height="100" border="1" bordercolor="red">
<tr><td colspan="2">11</td></tr>
<tr><td width="30">21</td><td width="70">22</td></tr>
<tr><td>31</td><td>32</td></tr>
</table>

바로 위에 있는 예제에서 border="1" bordercolor="red" 부분만 추가했습니다.
코드만 보고도 머리 속에 표가 그려지시면 계속 아래로...

테이블의 셀 안쪽 여백과 셀 간격도 지정해보죠.
셀 안쪽 여백은 cellpadding을 셀 간격은 cellspacing을 사용합니다.
예를 보죠.

<table width="100" height="100" border="1" bordercolor="red" cellpadding="0" cellspacing="0">
<tr><td colspan="2">11</td></tr>
<tr><td width="30">21</td><td width="70">22</td></tr>
<tr><td>31</td><td>32</td></tr>
</table>

셀 안쪽 여백과 셀 간격을 0으로 지정했습니다.
말로 하는 것보다 익스플로러 상에서 비교해 보시면 더 이해가 쉬울 듯...

그럼, 이제 표의 배경색과 배경 그림을 지정해 볼까요.
표의 배경색은 bgcolor, 배경 그림은 background를 사용하여 지정합니다.
셀에 지정할 땐, <td>태그 안에 bgcolor와 background를 사용합니다.
예를 보죠.

<table width="100" height="100" border="1" bordercolor="red" cellpadding="0" cellspacing="0" bgcolor="blue">
<tr><td colspan="2">11</td></tr>
<tr><td width="30">21</td><td width="70">22</td></tr>
<tr><td>31</td><td>32</td></tr>
</table>

그러면 표가 문서상에 어디에 위치할 지를 지정해 볼까요?
align을 사용합니다.
정렬 방식에는 left, right, center가 있습니다.

<table width="100" height="100" border="1" bordercolor="red" cellpadding="0" cellspacing="0" bgcolor="blue" align="right">
<tr><td colspan="2">11</td></tr>
<tr><td width="30">21</td><td width="70">22</td></tr>
<tr><td>31</td><td>32</td></tr>
</table>

익스플로러로 보시면, 표는 아마도 오른쪽으로 가 있을 겁니다.

자 이제, 마지막으로 셀 속성을 지정해 볼까요?
각 속성에 해당하는 태그는 테이블과 동일하며, 셀 속성을 지정할 때는 <td>안에 원하는 속성을 나열해 주면 됩니다.
이미 위에도 다루었으므로 예는 생략하겠습니다.

소스가 조금은 복잡해 보이지만, 3행2열짜리 기본표에서 조금씩 살을 붙인 것 뿐이므로 어렵지 않게 이해되실 거라 생각합니다.
끝까지 읽어주셔서 감사합니다.