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

테이블 만들기 - 4

멋진그대 22006

0
지금부터는 단순 암기보다는 약간의 이해가 필요로 하는 것을 배우보도록 하겠습니다. 바로 <td>명령어에 들어가는 속성에 대해서 알아보겠습니다.
 
속성 기능
 colspan="가로셀수"  셀의 수만큼 가로 셀들을 하나로 병합해줍니다.
 rowspan="세로셀수"  셀의 수만큼 세로 셀들을 하나로 병합해줍니다.
 nowarp  브라우저 크기와 상관없이 테이블크기 고정
 width="수치"  셀의 너비를 조정해줍니다.
 align=left , center , right  셀안에 수평정렬을 지정해줍니다.
 valign=top , middle , bottom , baseline  셀안에 수직정렬을 지정해줍니다.
 
 위에 속성을 한번 쫘~악 읽어보니 뭔지 알겠남유? 이해는 되는 것 같기도 한데......역쉬...잘 모르겠지요.....그럼 또 다시 예제와 함께 이해를 팍팍 시켜드리겠습니다.^^
 
A
B C

 

<table border="1" width="250">
 <tr>
  <td colspan="2">A</td>
 </tr>
 <tr>
  <td>B</td>
  <td>
C</td>
 </td>
</table>


 위에 표는 colspan 속성을 사용하면 간단하게 만들 수 있습니다. colspan="가로셀수"  속성은 해당셀수만큼 가로행에 있는 셀들을 하나로 합해주는 기능을 합니다. 위에 표에서는 가로 두개의 셀을 하나로 합해준거죠.흠....간단하져?^^ 그럼 좀 더 어려운 걸루 해볼까요? 아래표를 한번 봐보세요.
  


<표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>B</td>
 </tr>
 <tr>
  <td colspan="2">C</td>
 </tr>
 <tr>
  <td>D</td>
  <td>E</td>
 </tr>
</table>
 

 

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

 이해가 되시는지.....^^ 왼쪽에 <표1>은 이해 되져?   그러나 문제는 오른쪽에 있는 <표2>가 되겠네요^^ 원래 한 행마다 4개의 셀(칸)들이 있는걸 각 행에서 두개의 셀들을 합한거죠. 첫번째행에선 좌측두개의 셀을, 두번째행에선 중간두개의 셀을, 세번째행에선 우측두개의 셀을 합했죠. 어때요...쉽죠? ^^;;; 헉...모르겠다구요..--;;; 흠....더 이상은 설명하기가...........두뇌회전속도가 빠르신 분들은 금방 이해했을 텐데........그래도 모르시겠다면..............더 이상은 .....위에 소스를 보고 열심히 생각해보시면......트일 날(?)이 있을 겁니다.....머리로 안되면 노력이죠...뭐.....^^
 
 하핫^^ colspan 속성 하나 설명하는데도 엄청난 지면을 차지하네요^^ 다음 페이지에서는 rowspan에 대해서 배워보도록 하죠.....^^

 

                                                                                                                                                    출처 : 태그매니아

공유
0

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

취소 댓글 등록

신고

"님의 댓글"

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

댓글 삭제

"님의 댓글"

삭제하시겠습니까?

목록

공유

facebooktwitterpinterestbandkakao story

삭제

"테이블 만들기 - 4"

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

번호 분류 제목 글쓴이 날짜 조회 추천
공지 HTML HTML 기초 다지기 4 오작교 08.06.17.16:26 291008 0
공지 HTML HTML과 CSS의 종합 정리 1 오작교 07.10.01.10:21 349973 0
공지 일반 스타일시트의 총정리 오작교 06.09.14.13:08 294609 +14
300
normal
오작교 23.12.10.09:32 14550 0
299 Script
normal
오작교 23.12.10.09:29 19891 0
298 CSS
normal
오작교 21.01.09.14:18 40831 0
297 HTML
normal
오작교 15.09.17.08:58 116419 0
296 HTML
normal
오작교 15.09.13.21:38 21687 0
295 HTML
normal
오작교 15.09.13.21:30 25272 0
294 HTML
normal
오작교 15.08.30.12:19 52874 0
293 Script
normal
오작교 15.05.12.14:06 21262 0
292 HTML
file
오작교 12.03.08.13:51 36027 0
291 HTML
normal
오작교 11.06.03.10:44 40852 0
290 CSS
normal
오작교 11.06.03.10:29 70758 0
289 Script
normal
오작교 11.03.22.11:19 43558 0
288 Script
normal
오작교 11.03.22.11:15 38328 0
287 Script
normal
오작교 11.03.22.11:07 37214 0
286 HTML
normal
오작교 11.01.25.10:27 36311 0
285 CSS
normal
오작교 11.01.24.10:40 35485 0
284 HTML
normal
오작교 11.01.24.10:39 37194 0
283 Script
normal
오작교 11.01.24.10:34 38206 0
282 CSS
normal
오작교 11.01.24.10:31 37842 0
281 CSS
normal
오작교 11.01.24.10:27 36315 0