colspan 과 rowspan 속성을
배우느라....고생 많이 하셨습니다.......머리에서도
열이 많이 나구있겠군요..후후^^ 여기서부터는
아주 아주 쉬운 속성을 배울 것입니다. 아마 넘
쉬워서 눈물이 나올 겁니다...이번에 배울 건 내용
정렬속성입니다. 바로 align="left , center ,
right" 인 수평정렬속성과 valign="top , middle ,
botton , baseline" 인 수직정렬속성입니다.
물론 <td> 태그와 같이 사용하는 겁니다....이건
예제만 보면 다 알겁니다...
위에 보시는 바와 같이 한
셀안에서 그 정렬을 어떻게 해주냐에 따라 셀안의
이미지의 위치가 달라집니다. 혹시 모르시는 분이
있으실지도 모르니깐 설명드리죠^^. 수평정렬은
align="left(왼쪽) , center(가운데) , right(오른쪽)"
이구요.....valign="top(위쪽) , middle(중간쪽) ,
bottom(아래쪽) , baseline(기준선)" 입니다. 제가
baseline에 대해선 예제를 안보여주었는데...baseline의
경우 middle하고 거의 비슷하기 때문에....그냥
그런게 있다고만 알고 계시면 됩니다. 간단하죠?^^
흠....이제 표에 대해서 다
설명한건가요? 지금까지 제대로 다 배웠다면....자신있게
표만드는 일이나 표소스보는 일을 할 수 있을
것입니다. 그러나 제가 지금까지 설명한 table태그는
가장 기초가 되는 것만을 설명드린 것입니다. table태그는
그 응용이 거의 무한하기 때문에.....웹디자인이
잘된 사이트들을 돌아다니면서 소스도 훔쳐보고
또 유용한게 있다면 그 기술을 자기걸로 만들 수
있어야 만히 실력이 늘어 납니다. 짧게 말해서
언제나 노력하는 자에게만이 문이 열리게 되어
있습니다...노력하세요^^
※ 최종
마무리 실력테스트 문제^^
과연 여러분이 농땡이 안 까고 제대로
배웠는지 평가하는 차원에서 최종 마무리
실력테스트문제를 준비했습니다. 만약 여러분이
아래 표의 소스를 직접 적을 수 있다면 제대로
배웠다고 할 수 있겠네요^^.....잘 풀어보세요^^화이팅~!
|
※ 참고사항
표 너비 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> |
|
