size="2">15. Table 예제 몇 개
이제 테이블에 대한 예제를 몇 개
보도록 하겠습니다. 지금까지 설명한 내용들로 만든 것이니까 아마 이해가
쉽게 갈 겁니다.
1. Table 예제 (1)
<table border cellpadding="3">
<tr>
<td align="center">토끼</td>
<td align="center">거북이</td>
<td align="center">여우</td>
</tr>
</table>
- 이 표(Table)는 방(셀)이 세
개 있는 표입니다.
- 테두리 선의 두께는 1입니다.
왜냐구요? border를 주지 않았거든요. 테두리 선의 두께를 없애고
싶으면 border="0"을 사용하면 됩니다.
- cellpadding="3"은
표의 안쪽 여백을 3 픽셀 만큼 준 것입니다. 여러분의 취향에 맞게
사용하세요^^
- 그리고 각 셀에 있는 내용을
중앙으로 정렬시켰습니다.
- 보기가 별로 좋지는 않네요^^
2. Table 예제 (2)
<table border cellpadding="3">
<tr>
<td width="99"
align="center" bgcolor="blue">토끼</td>
<td width="99"
align="center" bgcolor="blue">거북이</td>
<td width="99"
align="center" bgcolor="red">여우</td>
</tr>
<tr>
<td width="99"
align="center" bgcolor="lime">사슴</td>
<td width="99"
align="center" bgcolor="lime">호랑이</td>
<td width="99"
align="center" bgcolor="red">강아지</td>
</tr>
</table>
- 셀을 밑에 3개 더 만들었습니다.
<tr>...</tr> Tag를 사용했지요^^
- 그리고 각 셀의 폭을 99픽셀로
고정시켰어요. 그나마 보기가 좀 나은 것 같네요.
- 6 개의 셀에서 두 개씩 각 셀의
배경 색상을 삽입했습니다. bgcolor="색상" 기억하시죠?
- <tr>...</tr> Tag
안의 <td>...</td> Tag의 수가 서로 달라도 상관은
없지만 가능하면 같게 해주는게 좋습니다. colspan="n",
rawspan="n"을 사용하면 되지요.
3. Table 예제 (3)
<table border cellpadding="3">
<tr>
<td width="99"
align="center" colspan="2" bgcolor="blue">토끼
<p>거북이</td>
<td width="99"
align="center" rowspan="2" bgcolor="red">여우
<p>강아지</td>
</tr>
<tr>
<td width="99"
align="center" vlign="center" colspan="2"
bgcolor="lime">사슴
<p>호랑이</td>
</tr>
<tr>
<td width="99"
align="center">기린</td>
<td width="99"
align="center">고양이</td>
<td width="99"
align="center">코뿔소</td>
</tr>
</table>
- 비교를 위해 셀을 3개 더 추가하고
색상이 같은 셀을 서로 합쳤습니다. 여기서 추가된 tag는 colspan="n",
rowspan="n"입니다. 어렵지 않죠? 합치고 싶은 셀의 수만큼
n을 사용하면 됩니다. 물론 사용하고 있는 셀의 개수 안에서 사용해야죠^^
3. Table 예제 (4)
<table border cellpadding="7">
<tr>
<td width="99"
align="center" colspan="2" bgcolor="blue">
<table
border="3">
<tr>
<td
width="96" align="center">토끼</td>
<td
width="96" align="center">거북이</td>
</tr>
</table>
</td>
<td width="99"
align="center" rowspan="2" bgcolor="red">
<table
border="3">
<tr>
<td
width="90" align="center">여우</td>
</tr>
<tr>
<td
width="90" align="center">강아지</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="99"
align="center" colspan="2" bgcolor="lime">
<table
border="3">
<tr>
<td
width="96" align="center">사슴 </td>
<td
width="96" align="center">호랑이</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="99"
align="center">기린</td>
<td width="99"
align="center">고양이</td>
<td width="99"
align="center">코뿔소</td>
</tr>
</table>
- 각각 색상이 동일했던 셀을
예제 3에서는 같은 셀로 합쳤는데, 여기서는 합친 셀안에 표(table)를
하나씩 더 추가했습니다.
- 눈으로 구분하기 쉽게 표 여백(cellpadding)은
7로 표현하고 셀 안에 들어가는 표의 테두리 선(border)은 두께를
3으로 했습니다.
- 셀 안에 삽입하는 표(Table)에는
배경색상을 지정하지 않았기 때문에 셀의 배경색상과 동일하게 보입니다.
- 각 셀안에 width를 픽셀 단위로
주었는데, 테이블의 폭을 100%로 하고 거기에 맞춰 셀의 폭을 %로
나타내주면 브라우저의 크기나 해상도에 덜 영향을 받는 홈페이지를
만들 수 있습니다. 대부분 800*600을 기준으로 만들면 1024*768에서
보았을 경우 오른쪽에 여백이 많이 남죠? 야후나 다른 검색사이트들은
그렇지 않은데..
셀의 폭을 픽셀 단위로 주는 것은 폭의 길이를 고정시킬 수 있어
편리하지만 위와 같은 단점이 있답니다.
앞에서 다른 tag 들도 몇 개 소개해드렸지만
아마도 Table을 사용할 경우 제일 많이 사용하는 Tag는 위에서 예로
보여드린 Tag가 아닐까 싶네요. 기본원리만 몇 개 쉬운 예제로 보여드렸는데,
좀 어려운 예제라도 기본적인 내용만 이해한다면 쉽게 접근할 수 있을
겁니다.
테이블을 사용할 때는 특히나 들여쓰기를
해주는게 좋습니다. 나중에 수작업으로 홈페이지를 수정할 경우 소스를
쉽게 볼 수 있겠죠? 홈페이지를 관리하다 보면 조금 수정하는데 에디터로
수정해서 Ftp로 올리는 작업이 번거로울 수도 있거든요. 그리고 에디터는
자신이 원하지 않는 Tag도 삽입할 경우가 있으니 주의 하세요. |
[펌 강의] 15. Table 예제 몇 개 
