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

테이블 만들기 - 6

멋진그대 18069

0
colspan 과 rowspan 속성을 배우느라....고생 많이 하셨습니다.......머리에서도 열이 많이 나구있겠군요..후후^^ 여기서부터는 아주 아주 쉬운 속성을 배울 것입니다. 아마 넘 쉬워서 눈물이 나올 겁니다...이번에 배울 건 내용 정렬속성입니다. 바로 align="left , center , right" 인 수평정렬속성과 valign="top , middle , botton , baseline" 인 수직정렬속성입니다.  물론 <td> 태그와 같이 사용하는 겁니다....이건 예제만 보면 다 알겁니다...
 

align="left" valign="top"
 

 

 


align="center" valign="top"

align="right" valign="top"

align="left" valign="middle"
 

 

 


align="center" valign="middle"

align="right" valign="middle"

align="left" valign="bottom"
 

 

 


align="center" valign="bottom"

align="right" valign="bottom

 위에 보시는 바와 같이 한 셀안에서 그 정렬을 어떻게 해주냐에 따라 셀안의 이미지의 위치가 달라집니다. 혹시 모르시는 분이 있으실지도 모르니깐 설명드리죠^^. 수평정렬은 align="left(왼쪽) , center(가운데) , right(오른쪽)" 이구요.....valign="top(위쪽) , middle(중간쪽) , bottom(아래쪽) , baseline(기준선)" 입니다. 제가 baseline에 대해선 예제를 안보여주었는데...baseline의 경우 middle하고 거의 비슷하기 때문에....그냥 그런게 있다고만 알고 계시면 됩니다. 간단하죠?^^

 흠....이제 표에 대해서 다 설명한건가요? 지금까지 제대로 다 배웠다면....자신있게 표만드는 일이나 표소스보는 일을 할 수 있을 것입니다. 그러나 제가 지금까지 설명한 table태그는 가장 기초가 되는 것만을 설명드린 것입니다. table태그는 그 응용이 거의 무한하기 때문에.....웹디자인이 잘된 사이트들을 돌아다니면서 소스도 훔쳐보고 또 유용한게 있다면 그 기술을 자기걸로 만들 수 있어야 만히 실력이 늘어 납니다. 짧게 말해서 언제나 노력하는 자에게만이 문이 열리게 되어 있습니다...노력하세요^^

  최종 마무리 실력테스트 문제^^
 과연 여러분이 농땡이 안 까고 제대로 배웠는지 평가하는 차원에서 최종 마무리 실력테스트문제를 준비했습니다. 만약 여러분이 아래 표의 소스를 직접 적을 수 있다면 제대로 배웠다고 할 수 있겠네요^^.....잘 풀어보세요^^화이팅~!

 
#C1BFC0  a
b
 c d
e

 ※ 참고사항
 표 너비 350 픽셀, 4행 4열
 bordercolorlight="#FFFF00" bordercolordark="#000000"
 ★ 있는 셀 정렬방식 : center , bottom
 답 다 알려줬당!

앗! 제가 강좌에서 몇가지 빼 먹었네요....간단한건데.표에 제목을 붙일 때 <caption></caption> 을 사용하는 거하구요...셀 제목을 붙일 때 <th></th> 를 사용합니다. 간단하게 예제를 보여드릴 께요^^ <th></th>가 <td></td>하고 다른 점은 <th></th>를 사용한 셀은 셀안의 글자가 더 두껍고 진하게  나오게 됩니다.


표제목
셀제목

 

<caption>표제목</caption>
<table border="1" width="250">
 <tr>
  <th colspan="2">셀제목</th>
 </tr>
 <tr>
  <td></td>
  <td></td>
 </tr>
</table>

 

 

                                                                                                                         출처 : 태그매니아
공유
0

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

취소 댓글 등록

신고

"님의 댓글"

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

댓글 삭제

"님의 댓글"

삭제하시겠습니까?

목록

공유

facebooktwitterpinterestbandkakao story

삭제

"테이블 만들기 - 6"

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

번호 분류 제목 글쓴이 날짜 조회 추천
공지 HTML HTML 기초 다지기 4 오작교 08.06.17.16:26 290716 0
공지 HTML HTML과 CSS의 종합 정리 1 오작교 07.10.01.10:21 349683 0
공지 일반 스타일시트의 총정리 오작교 06.09.14.13:08 294318 +14
300
normal
오작교 23.12.10.09:32 14528 0
299 Script
normal
오작교 23.12.10.09:29 19848 0
298 CSS
normal
오작교 21.01.09.14:18 40781 0
297 HTML
normal
오작교 15.09.17.08:58 116364 0
296 HTML
normal
오작교 15.09.13.21:38 21654 0
295 HTML
normal
오작교 15.09.13.21:30 25235 0
294 HTML
normal
오작교 15.08.30.12:19 52837 0
293 Script
normal
오작교 15.05.12.14:06 21215 0
292 HTML
file
오작교 12.03.08.13:51 35986 0
291 HTML
normal
오작교 11.06.03.10:44 40811 0
290 CSS
normal
오작교 11.06.03.10:29 70704 0
289 Script
normal
오작교 11.03.22.11:19 43517 0
288 Script
normal
오작교 11.03.22.11:15 38286 0
287 Script
normal
오작교 11.03.22.11:07 37172 0
286 HTML
normal
오작교 11.01.25.10:27 36266 0
285 CSS
normal
오작교 11.01.24.10:40 35441 0
284 HTML
normal
오작교 11.01.24.10:39 37157 0
283 Script
normal
오작교 11.01.24.10:34 38170 0
282 CSS
normal
오작교 11.01.24.10:31 37806 0
281 CSS
normal
오작교 11.01.24.10:27 36265 0