인터넷정보

<td>를 간단하게하는 <col>태그

알 수 없는 사용자 2007. 10. 17. 11:39
테이블을 많이 사용하다 보면 보통 한 테이블 안에 <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>태그에 있는 값만 바꾸어주면 되겠지요.
반응형