웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
테이블 테그시 <td>옵션을 쉽게 작성/변경해 봅시다
2003.01.18 02:37
테이블을 많이 사용하다 보면 보통 한 테이블 안에 <td>태그가 보통 이십개를 넘어가는 경우가 있습니다.
이러할 경우에 각 <td>에 width, align, valign, style, class, heigt 등을 각각 넣어주는데 만일 테이블을 고쳐야 할 경우에는 각각의 <td>태그안에 들어있는 값을 모두 바꾸어주어야 하는 노가다 작업을 합니다.
이러한 불편함을 없애기 위해 <col>--</col>태그를 사용해 보세요.
이 태그는 소스를 많이 차지하지 않으면서 옵션을 설정할 수가 있습니다.
예를 들면 ;
<table>
<tr>
<td align=center width=30 style=padding-left:10px; padding-right:5px;>1</td>
<td align=center width=30 style=padding-left:10px; padding-right:5px;>1</td>
<td align=center width=30 style=padding-left:10px; padding-right:5px;>1</td>
</tr>
<tr>
<td align=center width=30 style=padding-left:10px; padding-right:5px;>1</td>
<td align=center width=30 style=padding-left:10px; padding-right:5px;>1</td>
<td align=center width=30 style=padding-left:10px; padding-right:5px;>1</td>
</tr>
</table>
위의 소스를 <col>태그를 사용하면
<table>
<col align=center width=30 style=padding-left:10px; padding-right:5px;></col>
<col align=center width=30 style=padding-left:10px; padding-right:5px;></col>
<col align=center width=30 style=padding-left:10px; padding-right:5px;></col>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
코드가 많이 줄어들게 됩니다.
물론 위의 경우는 2줄인 경우에만 예를 들었는데
세로로 여러 줄인 경우에는 훨씬 코드 작성을 용이하게 할 수 있습니다.
그리고 태그 수정시에도 각각을 수정하지 않아도 <col>태그에 있는 값만 바꾸어주면 되겠지요.
혹시 잘못된 사항이 있으면 알려주시면 도움되겠습니다.
제로보드도 이러한 식으로 코드를 많이 작성한 것으로 알고 있습니다.
========================================================================
이러할 경우에 각 <td>에 width, align, valign, style, class, heigt 등을 각각 넣어주는데 만일 테이블을 고쳐야 할 경우에는 각각의 <td>태그안에 들어있는 값을 모두 바꾸어주어야 하는 노가다 작업을 합니다.
이러한 불편함을 없애기 위해 <col>--</col>태그를 사용해 보세요.
이 태그는 소스를 많이 차지하지 않으면서 옵션을 설정할 수가 있습니다.
예를 들면 ;
<table>
<tr>
<td align=center width=30 style=padding-left:10px; padding-right:5px;>1</td>
<td align=center width=30 style=padding-left:10px; padding-right:5px;>1</td>
<td align=center width=30 style=padding-left:10px; padding-right:5px;>1</td>
</tr>
<tr>
<td align=center width=30 style=padding-left:10px; padding-right:5px;>1</td>
<td align=center width=30 style=padding-left:10px; padding-right:5px;>1</td>
<td align=center width=30 style=padding-left:10px; padding-right:5px;>1</td>
</tr>
</table>
위의 소스를 <col>태그를 사용하면
<table>
<col align=center width=30 style=padding-left:10px; padding-right:5px;></col>
<col align=center width=30 style=padding-left:10px; padding-right:5px;></col>
<col align=center width=30 style=padding-left:10px; padding-right:5px;></col>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
코드가 많이 줄어들게 됩니다.
물론 위의 경우는 2줄인 경우에만 예를 들었는데
세로로 여러 줄인 경우에는 훨씬 코드 작성을 용이하게 할 수 있습니다.
그리고 태그 수정시에도 각각을 수정하지 않아도 <col>태그에 있는 값만 바꾸어주면 되겠지요.
혹시 잘못된 사항이 있으면 알려주시면 도움되겠습니다.
제로보드도 이러한 식으로 코드를 많이 작성한 것으로 알고 있습니다.
========================================================================
댓글 2
-
에지
2003.01.27 11:58
아하.. col 태그가 거기에 쓰이는거로군요-_-; -
N/A
2003.01.28 15:40
콜그룹도 있습니다 html안쓴지 오래되서 기억이 안난다는 아이 슬퍼라..ㅠㅠ
콜그룹은 여러개의 콜들을 하나로 묶을수 있어요
각자 찾아보시길..(그게 더 공부 많이 되요)
제목 | 글쓴이 | 날짜 |
---|---|---|
스크롤바 뒤집을때 문서 전체가 뒤집히는것 방지할때 [4] | K.샘 | 2003.02.01 |
* 특정한 이미지 파일의 투명도 조절하기 [5] | 장윤호 | 2003.01.28 |
핫키를 타겟에 적용시켜 봅시다-_- [3] | 위드 | 2003.01.21 |
input태그 type의 종류.. [14] | 날수없는하늘 | 2003.01.21 |
스크롤바 자동/예/아니오 [11] | 레드 | 2003.01.18 |
테이블 테그시 <td>옵션을 쉽게 작성/변경해 봅시다 [2] | 위대한위선자 | 2003.01.18 |
[레드의 태그중급]폼 태그..(이상해져서 삭제하구 다시 적습니다) [3] | 레드 | 2003.01.15 |
[HTML 초보자]동영상을 출력하자-8(Object) [1] | ZipShin | 2003.01.14 |
[레드의 태그초보]링크태그 [5] | 레드 | 2003.01.14 |
[레드의 태그초보]이미지삽입 태그 [2] | 레드 | 2003.01.14 |
[레드의 태그초보]아이프레임을 새롭게 구조하였습니다..(;;) [3] | 레드 | 2003.01.14 |
모바일(핸드폰용) 홈페이지 만들기. [8] | 고광욱 | 2003.01.13 |
테이블을 이용한 문서의 정렬 [4] | 서성원 | 2003.01.11 |
이미지 없이 그라데이션 효과 내기 - 수정. [7] | Pe-i | 2003.01.10 |
[1분짜리 팁!] 스크롤바 왼쪽으로 위치하게 하기! [6] | 찐군 | 2003.01.09 |
[1분짜리 팁!] 테이블 테두리 얇게 하기 [5] | 찐군 | 2003.01.09 |
[1분짜리 팁!] 마우스커서 바꾸기! [10] | 찐군 | 2003.01.09 |
기본에 충실하자. 표관련 태그 정리... [2] | 이기형 | 2003.01.09 |
글씨태그 | 조현원 | 2003.01.08 |
다중 테이블?? [7] | hooniv | 2003.01.03 |