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

테이블 만들기 - 5

멋진그대 22176

0
전 페이에서 colspan 속성에 대해서 배워봤구요....여기서 부턴 rowspan 속성에 대해서 배워보겠습니다. rowspan 속성 역시 colspan 속성과 같습니다. 단지 colspan 속성은 가로셀을 병합하는데 비해 rowspan 속성은 세로셀을 병합하는 거죠.
 
A B
C
<table border="1" width="250">
 <tr>
  <td rowspan="2">A</td>
  <td>B</td>
 </tr>
 <tr>
  <td>C</td>
 </tr>
</table>
 간단하죠? rowspan="세로셀수" 속성은 세로의 셀들을 병합해주기 때문에...첫 행에서는 A , B 두개의 셀을 잡아주고 두번째 행에서는 C 셀 하나만 잡아주죠. 이해가 안되시는 분들은 소스를 자세히 살펴보면 이해가 될 겁니다....물론...머리회전이 빠른 분들이 빨리 이해를 하겠죠^^
 그럼 좀 더 어렵게 해볼까요? 
<표1>
A B C
D E

<표2>
A B C
D E
F G
H I

<table border="1" width="250">
 <tr>
  <td>A</td>
  <td rowspan="2">B</td>
  <td>C</td>
 </tr>
 <tr>
  <td>D</td>
  <td>E</td>
 </tr>
</table> 
<table border="1" width="250">
 <tr>
  <td rowspan="2" bgcolor="#C1BFC0">A</td>
  <td>B</td>
  <td>C</td>
 </tr>
 <tr>
  <td rowspan="2" bgcolor="#C1BFC0">D</td>
  <td>E</td>
 </tr>
 <tr>
  <td>F</td>
  <td rowspan="2" bgcolor="#C1BFC0">G</td>
 </tr>
 <tr>
  <td>H</td>
  <td>I</td>
 </tr>
</table>

 이번 역시 <표1>은 이해가 될 것 같은데....<표2>는 헤갈리죠? colspan 속성보다는 조금 더 어려울 겁니다......rowspan 속성의 경우 병합하는 셀들이 위 아래로 병합되기 때문에....원래 병합될 셀이 몇 번째 행에 있었던 셀이라는 걸 잘 이해해야 합니다...위에 <표2>를 예를 들자면....A셀의 경우 원래 1행1열의 셀과 2행1열의 셀이 합해진것입니다.....그러므로 두번째 행의 소스부분에서는 2행1열의 셀의 태그부분이 생략이 되버리죠. D셀이나 G셀 역시 마찬가지입니다.  제가 지금 무쉰 말 하는지 아시겠습니까? 이해하신다면 다행이구요.....이해가 도저히 안된다 하시는 분들은....소스를 가지고 조금씩 바꿔가며 태그연습장에서 연습을 해보세요. 하다보면...언젠가는 이해됩니다.....그 언젠가는 이 언제일지는 모르지만...--;;;; 머리회전속도 차이져...

 colspan 과 rowspan 속성을 설명했으니 이젠 width="수치" 를 설명드리죠. width="수치" 는 뭔지 아시죠? 그렇죠..바로 너비를 조정해주는 속성입니다. 이미 <table></table>부분에서 배웠을 겁니다. 그러나 width 속성은 <td>명령어에서도 사용됩니다. 당근 셀의 너비를 조정해주죠. width 에 대해선 더 이상 긴 설명 필요없이 여기서 마치겠습니다....물론 이번 페이지도 끝입니다....다음 페이지로 갑시다....^^ 허나 위에 rowspan 다 이해 못하신분은 절대 따라오지 마세요...완죤히 이해 한다음에 넘어가시길.......

                                                                                                                                                     출처 : 태그매니아

공유
0

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

취소 댓글 등록

신고

"님의 댓글"

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

댓글 삭제

"님의 댓글"

삭제하시겠습니까?

목록

공유

facebooktwitterpinterestbandkakao story

삭제

"테이블 만들기 - 5"

이 게시글을 삭제하시겠습니까?

번호 분류 제목 글쓴이 날짜 조회 추천
공지 HTML HTML 기초 다지기 4 오작교 08.06.17.16:26 290075 0
공지 HTML HTML과 CSS의 종합 정리 1 오작교 07.10.01.10:21 349099 0
공지 일반 스타일시트의 총정리 오작교 06.09.14.13:08 293710 +14
300
normal
오작교 23.12.10.09:32 14439 0
299 Script
normal
오작교 23.12.10.09:29 19723 0
298 CSS
normal
오작교 21.01.09.14:18 40663 0
297 HTML
normal
오작교 15.09.17.08:58 116266 0
296 HTML
normal
오작교 15.09.13.21:38 21532 0
295 HTML
normal
오작교 15.09.13.21:30 25114 0
294 HTML
normal
오작교 15.08.30.12:19 52731 0
293 Script
normal
오작교 15.05.12.14:06 21113 0
292 HTML
file
오작교 12.03.08.13:51 35877 0
291 HTML
normal
오작교 11.06.03.10:44 40697 0
290 CSS
normal
오작교 11.06.03.10:29 70601 0
289 Script
normal
오작교 11.03.22.11:19 43408 0
288 Script
normal
오작교 11.03.22.11:15 38165 0
287 Script
normal
오작교 11.03.22.11:07 37059 0
286 HTML
normal
오작교 11.01.25.10:27 36156 0
285 CSS
normal
오작교 11.01.24.10:40 35327 0
284 HTML
normal
오작교 11.01.24.10:39 37038 0
283 Script
normal
오작교 11.01.24.10:34 38058 0
282 CSS
normal
오작교 11.01.24.10:31 37682 0
281 CSS
normal
오작교 11.01.24.10:27 36158 0