테이블
이번엔 테이블입니다..
사용도가 많은 테그입니다..
특히, 표를 정리하거나 페이지를 깔끔하게
보이기 위해 정렬을할때 유용합니다.
테이블은 지금까지 태그와 달리 눈으로 보고 익히기 힘듭니다.
직접 메모장을 열어 결과를 테스트 해보시면 더욱 빨리
익히실수 있으리라 생각됩니다.
주의 하실점은.. 너무 많은 테이블 태그의 사용은..
페이지로딩에도 지장을 주며, 수정에 매우 난해함을 기억해두셔야 합니다!
테이블 태그에 대해 알아봅시다-
|
HTML 소스
|
사용 결과
|
<table border=1>
<tr>
<td>test</td>
</tr>
</table>
|
|
|
<table border=1>
<tr>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
</tr>
</table>
|
|
이것이 테이블의 기본적인 태그입니다.
보시다시피 <table>로 시작해서
</table>로 닫히는 태그입니다.
<tr>,<td>,</tr>,</td>
과 같은 태그는 table 태그 안에 존제합니다.
한번 연습해보시면 이해가 빠르실꺼에요
|
HTML 소스
|
사용 결과
|
|
<table border=10 width=100 height=50 align=center>
<tr>
<td>test</td>
<td>test</td>
</tr>
</table>
|
|
|
<table border=1 width=100 align=center>
<tr>
<td width=30 height=50>test</td>
<td
width=70>test</td>
</tr>
</table>
|
|
이 태그들은 테이블에서 필수적인 태그입니다.
주로 예전에 배웠던 것들을
응용 하는 것이니 어렵지 않을꺼에요..
첫 번째 태그는 border를 사용해서
테두리를 바꾸는 것이구요..
두 번째 태그는 테이블 사이의 거리를 height와
width를 이용해서 조절하는 것입니다.
|
HTML 소스
|
사용 결과
|
<table border=1 width=100 height=50 align=center>
<tr>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td colspan=2>test</td>
</tr>
</table>
|
|
|
<table border=1 width=100 align=center>
<tr>
<td rowspan=2>test</td>
<td
>test</td>
</tr>
<tr>
<td
>test</td>
</tr>
</table>
|
|
셀합치기 태그입니다.
colspan은 가로 셀은 합치는 태그이구요,
rowspan은
세로 셀을 합칠 수 있는 태그입니다.
지금 메모장으로 사용해보시구 결과를 보시면서
해보세요~
|
HTML 소스
|
사용 결과
|
|
<table border=1 align=center width=100>
<tr>
<td bgcolor=#FF6600>test</td>
<td
bgcolor=#FFFFFF>test</td>
</tr>
<tr>
<td colspan=2
bgcolor=#FF9900>test</td>
</tr>
<tr
bgcolor="green">
<td>test</td>
<td>test</td>
</tr>
</table>
|
|
셀 바탕의 색을 조절할 수 있는 태그였습니다.
색과 관련된 태그는 이미 전에
배웠기 때문에 쉽게 적응하실수 있을꺼에요
다음은 좀더 깔끔한 태이블을 만드는걸
배워봅시다!
|
HTML 소스
|
사용 결과
|
|
<table border=1 align=center width=100 bordercolor=black>
<tr>
<td>test</td>
</tr>
<tr>
<td>test</td>
</tr>
</table>
|
|
|
<table border=1 align=center width=100 bordercolor=darkorange
cellspacing=0>
<tr>
<td>test</td>
</tr>
<tr>
<td>test</td>
</tr>
</table>
|
|
|
<table border=0 cellpadding=0 cellspacing=0 bgcolor=black
width=100 align=center>
<tr>
<td>
<table border=0
cellspacing=1 width="100%">
<tr>
<td
bgcolor=white>test</td>
</tr>
<tr>
<td bgcolor=#FFCC99>test</td>
</tr>
</table>
</td>
</tr>
</table>
|
|
다음과 같은 태그는 테이블을 이쁘게 꾸미는 고급 태그입니다..
각자
취향에 알맞게 바꿔서 사용해보세요..
테이블도 참 깔끔하죠?
직접 실행해보지
않으면 어려울 수밖에 없어요..
색을 바꿔보시면서 어떤게 바뀌는지 해보신다면..
더욱 쉽게 익히실수있을꺼에요..
혹은 모른신다고, 너무 절망하지마시고, 차근차근
처음부터 익혀보세요..
의외로 간단한 태그의 반복임을 알 수 있습니다.
|
