• 돌아가기
  • 아래로
  • 위로
  • 목록
  • 댓글
HTML

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

오작교 18852

0

테이블을 많이 사용하다 보면 보통 한 테이블 안에 <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>태그에 있는 값만 바꾸어주면 되겠지요.

공유
0

댓글 쓰기 권한이 없습니다. 로그인

취소 댓글 등록

신고

"님의 댓글"

이 댓글을 신고하시겠습니까?

댓글 삭제

"님의 댓글"

삭제하시겠습니까?

목록

공유

facebooktwitterpinterestbandkakao story
번호 분류 제목 글쓴이 날짜 조회 추천
공지 HTML HTML 기초 다지기 4 오작교 08.06.17.16:26 290989 0
공지 HTML HTML과 CSS의 종합 정리 1 오작교 07.10.01.10:21 349949 0
공지 일반 스타일시트의 총정리 오작교 06.09.14.13:08 294591 +14
300
normal
오작교 23.12.10.09:32 14547 0
299 Script
normal
오작교 23.12.10.09:29 19889 0
298 CSS
normal
오작교 21.01.09.14:18 40828 0
297 HTML
normal
오작교 15.09.17.08:58 116414 0
296 HTML
normal
오작교 15.09.13.21:38 21681 0
295 HTML
normal
오작교 15.09.13.21:30 25269 0
294 HTML
normal
오작교 15.08.30.12:19 52871 0
293 Script
normal
오작교 15.05.12.14:06 21261 0
292 HTML
file
오작교 12.03.08.13:51 36023 0
291 HTML
normal
오작교 11.06.03.10:44 40848 0
290 CSS
normal
오작교 11.06.03.10:29 70755 0
289 Script
normal
오작교 11.03.22.11:19 43554 0
288 Script
normal
오작교 11.03.22.11:15 38324 0
287 Script
normal
오작교 11.03.22.11:07 37209 0
286 HTML
normal
오작교 11.01.25.10:27 36307 0
285 CSS
normal
오작교 11.01.24.10:40 35480 0
284 HTML
normal
오작교 11.01.24.10:39 37191 0
283 Script
normal
오작교 11.01.24.10:34 38201 0
282 CSS
normal
오작교 11.01.24.10:31 37839 0
281 CSS
normal
오작교 11.01.24.10:27 36310 0