19. 테이블
.NET프로그래밍/HTML 4.0 / XHTML1.0 2009. 7. 23. 10:56 |<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<h3>1행1열 테이블</h3>
<table border="1">
<tr>
<td>
1행 1열
</td>
</tr>
</table>
<h3>1행2열 테이블</h3>
<table border="1" width="200" height="100">
<tr>
<td>1,1</td><td>1,2</td>
</tr>
</table>
<h3>2행2열 테이블</h3>
<table border="1">
<tr>
<td>1,1</td><td>1,2</td>
</tr>
<tr>
<td>2,1</td><td>2,2</td>
</tr>
</table>
<h3>셀 병합</h3>
<table border="1" width="200">
<tr>
<td colspan="2" align="center" bgcolor="yellow">1</td>
</tr>
<tr align="center">
<td rowspan="2" valign="bottom">3</td>
<td>4</td>
</tr>
<tr>
<td align="center">6</td>
</tr>
</table>
<h3>주요속성</h3>
<table border="1" width="200" height="200"
cellpadding="10" cellspacing="15">
<tr>
<td>1</td><td colspan="2" align="center"><img src="images/2.jpg" /></td>
</tr>
<tr>
<td>4</td><td rowspan="2" align="right" valign="top">5</td>
<td background="images/2.jpg">6</td>
</tr>
<tr>
<td>7</td><td bgcolor="yellow">9</td>
</tr>
</table>
<h3>표안에 표</h3>
<table border="1" width="200" height="200">
<tr>
<td>1</td>
<td rowspan="2" align="center">
<table border="1" width="100%">
<tr>
<td>2</td>
</tr>
<tr>
<td>4</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
//
- tr (table row) : 표의 1행을 가리키는 말
- td (table data) : 표의 셀 하나를 가리킨다.(각 행의 셀을 만듦)
- border : 외곽선(테두리) 굵기 / bordercolor: 외곽선 색
- cellpadding : 셀 테두리와 글자 사이의 내부간격
- cellspacing : 셀 사이의 간격
- colspan : 가로로 셀(열끼리) 합침
- rowspan : 세로로 셀(행끼리) 합침
- valign : 상하정렬 / align : 좌우정렬
- td태그와 img태그 사이 앞 뒤로 공백을 두면 안됨.
< 실행결과 >
'.NET프로그래밍 > HTML 4.0 / XHTML1.0' 카테고리의 다른 글
| 테이블태그기타 (0) | 2009.07.23 |
|---|---|
| 20. 템플릿(가느다란 실선으로 테이블 테두리 표시) (0) | 2009.07.23 |
| 18. body속성 (0) | 2009.07.23 |
| 17. 이미지맵 (0) | 2009.07.23 |
| 16. 이미지링크 (0) | 2009.07.22 |