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> | |
