웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
기본에 충실하자. 표관련 태그 정리...
2003.01.09 04:38
최근에 홈페이지 경향을 보면 노프레임으로 가는 추세이죠.
여기서 노프레임이란 프레임이 없는 홈페이지를 말합니다.
프레임이 없다는 말은 그만큼 표가 많이 사용된다는 뜻이죠.
표를 얼마나 잘 사용하는가는 그 홈페이지의 깔금도(?)를 결정할 정도로 중요합니다.
대부분 다 아시는 내용이겠지만, 혹시 모르시는 분을 위해...
자 그럼 시작해 볼까요?
##표의 기본
<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열짜리 기본표에서 조금씩 살을 붙인 것 뿐이므로 어렵지 않게 이해되실 거라 생각합니다.
끝까지 읽어주셔서 감사합니다.
여기서 노프레임이란 프레임이 없는 홈페이지를 말합니다.
프레임이 없다는 말은 그만큼 표가 많이 사용된다는 뜻이죠.
표를 얼마나 잘 사용하는가는 그 홈페이지의 깔금도(?)를 결정할 정도로 중요합니다.
대부분 다 아시는 내용이겠지만, 혹시 모르시는 분을 위해...
자 그럼 시작해 볼까요?
##표의 기본
<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열짜리 기본표에서 조금씩 살을 붙인 것 뿐이므로 어렵지 않게 이해되실 거라 생각합니다.
끝까지 읽어주셔서 감사합니다.
댓글 2
-
cannabis11
2003.01.09 08:43
오오 감샤 합니다.... 이런게 상당한 도움이 되요 ^^ -
최근우
2003.01.28 15:16
cellpadding 이랑 cellspacing 대단히 -_-쓸모있습니다!!
제목 | 글쓴이 | 날짜 |
---|---|---|
기본에 충실하자. 표관련 태그 정리... [2] | 이기형 | 2003.01.09 |
글씨태그 | 조현원 | 2003.01.08 |
ZipShin님 버튼 기능추가...누르면 링크가 됩니다...^^; [1] | 김희성 | 2003.01.05 |
다중 테이블?? [7] | hooniv | 2003.01.03 |
[HTML 초보자]동영상을 출력하자-7(Object) [2] | ZipShin | 2003.01.03 |
테이블 테두리 (맨 겉부분만 나오게 하기) [13] | 서성원 | 2003.01.02 |
HTML만으로 BGM Player 만들기... [7] | 고광욱 | 2003.01.02 |
이쁜 버튼 꾸미기 [5] | ZipShin | 2003.01.01 |
새창안돼 -_- [5] | 란즈 | 2002.12.27 |
한번의 클릭으로 두 개의 프레임 바꾸기. [7] | 연(延) | 2002.12.25 |
[re] 한번의 클릭으로 두 개의 프레임 바꾸기. [1] | 루비 | 2002.12.26 |
마우스 룰 오버시 여러가지 로 그림이 변하게 하기. [5] | ▩윤미 | 2002.12.23 |
웹문서 작성 팁!!! [4] | 공돌이 | 2002.12.21 |
[HTML 초보자] 테이블 태그(보충1) [3] | ZipShin | 2002.12.21 |
필드셋 응용;;; | teslaMINT | 2002.12.21 |
[HTML 초보자]동영상을 출력하자-6(Object) [1] | ZipShin | 2002.12.19 |
[HTML 초보자]동영상을 출력하자-5 | ZipShin | 2002.12.18 |
[HTML 기초] 1. 서식 관련 태그 | 뽀유♡ | 2002.12.17 |
[HTML 초보자]동영상을 출력하자-4 | ZipShin | 2002.12.17 |
[HTML 초보자]동영상을 출력하자-3(높이와 넓이) | ZipShin | 2002.12.16 |