HTML 폼 form 태그,tr,td,th태그 사용방법
| 1 | 2 |
| 3 | 4 |
| 5 | 6 |
| 1 | 2 |
| 3 | 4 |
| 1 | 2 |
| 3 | 4 |
회원 주소록
| 번호 | 이름 | 주소 | 연락처 |
|---|---|---|---|
| 1 | 홍길동 | 서울시 영등포구 당산동 | 02-1234-4567 |
| 2 | 홍길동 | 서울시 영등포구 당산동 | 02-1234-4567 |
| 3 | 홍길동 | 서울시 영등포구 당산동 | 02-1234-45667 |
| 4 | 홍길동 | 서울시 영등포구 당산동 | 02-1234-4567 |
| 1 | |
| 3 | 4 |
| 1 | 2 |
| 3 |
테이블 병합
| 직원 명단 | ||
|---|---|---|
| 영업부 | 홍길동 | 200 |
| 이민기 | 181 | |
| 최홍만 | 191 | |
| 관리부 | 김영희 | 300 |
| 허각 | 212 | |
| 이민정 | 330 | |
<html>
<head>
<title>form, table</title>
<meta name="generator" content="editplus" />
<meta name="author" content="zzarungna" />
</head>
<body>
<!-- 11년12월30일 -->
<form method="post" action="http://220.86.7.31/EX21_OK.asp" >
6. 셀렉트 박스(콤보 박스, 드랍다운리스트) :
<!--
컨트롤은 항상 이름을 준다.
size: 박스의 길이, 보여지는 옵션의 갯수.
multiple: 플래그 타입, 다중선택 기능
selected: 플래그 타입, 기본 선택 기능
-->
<select name="selColor" >
<option value="red">빨강</option>
<option value="blue">파랑</option>
<option value="yellow" >노랑</option>
</select>
<hr /> <!-- 버튼 -->
<!-- 전송 버튼은 클릭이 되었을 때 자신이 속한 <form>태그 내부의 모든 컨트롤의 값을
<form>태그의 action으로 전송하는 기능
-->
7. 전송 버튼 : <input type="submit" value="보내기"/>
<hr />
8. 리셋 버튼 : <input type="reset" value="초기화" />
<hr />
<!-- 보이는건 이미지지만 내부 기능은 7. 전송 버튼과 같은 것이다 -->
9. 이미지 버튼 : <input type="image" src="images/angry.png" width="50" height="50" />
<hr />
10. 일반 버튼(기능 X) : <input type="button" value="안되~" onclick= "alert('hi');" />
<hr />
10. 일반 버튼(기능 X) : <button>크크</button>
<hr />
11. 파일 업로드 : <input type="file" />
</form>
<!-- ex22_table.htm -->
<!-- 2행 2열 표 -->
<table border="1" width="100%" >
<tr>
<td>데이터</td>
<td><b>ㅎㅎ</b></td>
</tr>
<tr>
<td>ㅋ.ㅋ</td>
<td><img src="images/angry.png" /></td>
</tr>
<!-- 모든 행의 셀의 갯수는 똑같아야 함 -->
<!-- 비어있는 셀엔 공백표시 를 써서 테이블이 깨지지 않게 해야 한다 -->
<tr>
<td>새로</td>
<td>추가</td>
</tr>
</table>
<hr />
<table border="1" width="200" height="200">
<tr height =" 10"> <!-- 높이만 지정 가능 -->
<td>1</td>
<td>2</td>
</tr>
<tr height =" 190">
<td>3</td>
<td>4</td>
</tr>
</table>
<table border="1" width="200" height="200">
<tr>
<td width="100" height="100">1</td>
<td>2</td>
</tr>
<tr>
<td height="100">3</td>
<td>4</td>
</tr>
</table>
<table border="1" width="200" height="200" bgcolor="yellow">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td align="center" valign="bottom">3</td>
<td>4</td>
</tr>
</table>
<hr />
<h3> 회원 주소록 </h3>
<table border="1" width="500">
<tr bgcolor="yellow"> <!-- 주제를 정해주는 전용 태그 th (자동으로 가로정렬이 가운데 정렬로 되어 있음) -->
<th width="50">번호</th>
<th width="80">이름</th>
<th width="250">주소</th>
<th width="120">연락처</th>
</tr>
<tr>
<td align="center">1</td>
<td align="center">홍길동</td>
<td>서울시 영등포구 당산동</td>
<td align="center">02-1234-4567</td>
</tr>
<tr bgcolor="lightgrey">
<td align="center">1</td>
<td align="center">홍길동</td>
<td>서울시 영등포구 당산동</td>
<td align="center">02-1234-4567</td>
</tr>
<tr>
<td align="center">1</td>
<td align="center">홍길동</td>
<td>서울시 영등포구 당산동</td>
<td align="center">02-1234-4567</td>
</tr>
<tr bgcolor="lightgrey">
<td align="center">1</td>
<td align="center">홍길동</td>
<td>서울시 영등포구 당산동</td>
<td align="center">02-1234-4567</td>
</tr>
<!-- 셀의 병합 -->
<!-- colspan : 몇개 만큼의 셀을 차지 할건지 정하는 태그 (가로 병합)-->
<!-- rowspan: 몇개 만큼의 셀을 차지 할건지 정하는 태그 (세로 병합) -->
<table border="1" width="200" height="200">
<tr>
<td colspan="2">1</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<hr />
<table border="1" width="200" height="200">
<tr>
<td rowspan="2">1</td>
<td>2</td>
</tr>
<tr>
<td>4</td>
</tr>
</table>
<hr />
<h3> 테이블 병합 </h3>
<table border="1" width="400">
<tr>
<th colspan ="3">직원 명단</th>
</tr>
<tr>
<td rowspan="3">영업부</td>
<td>홍길동</td>
<td>200</td>
</tr>
<tr>
<td>이민기</td>
<td>181</td>
</tr>
<tr>
<td>최홍만</td>
<td>191</td>
</tr>
<tr>
<td rowspan="3">관리부</td>
<td>김영희</td>
<td>300</td>
</tr>
<tr>
<td>허각</td>
<td>212</td>
</tr>
<tr>
<td>이민정</td>
<td>330</td>
</tr>
</table>
</table>
</body>
</html>
