반응형
SMALL
table (표)
<body>
<table>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body><table>- width`
- 표의 넓이
border- 표의 선 두께
- width`
<td>rowspan- 세로로 병합
colspan- 가로로 병합
- 태그 사이에 값 없으면
- 표에도 빈칸 처리 됨
예제1
rowspan/colspan연습
<!DOCTYPE html>
<html>
<body>
<table width="100%" border="1">
<tr>
<th>Name</th>
<th>Phone</th>
<th>Address</th>
<th colspan="2">Class</th>
</tr>
<tr>
<td rowspan="2">A</td>
<td>B</td>
<td>C</td>
<td colspan="2">D</td>
</tr>
<tr>
<!-- <td>E</td> -->
<td>F</td>
<td>G</td>
<td colspan="2">H</td>
</tr>
<tr>
<td>I</td>
<td>J</td>
<td colspan="3">K</td>
</tr>
<tr>
<td>L</td>
<td>M</td>
<td>N</td>
<td>O</td>
<td>P</td>
</tr>
</table>
</body>
</html>결과
예제2
- 기본 이력서 만들기
<!DOCTYPE html>
<html>
<body>
<table width="100%" border="1">
<tr>
<td rowspan="4">사진</td>
<td colspan="4">이력서</td>
</tr>
<tr>
<td rowspan="2">성명</td>
<td rowspan="2" colspan="2">
<input type="text" name="name">
</td>
<td>주민등록번호</td>
</tr>
<tr>
<td>111111-2222222</td>
</tr>
<tr>
<td>생년월일</td>
<td colspan="3">년 월 일 일생 (만 세)</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>결과
반응형
LIST
'Javascript' 카테고리의 다른 글
| [Javascript] Math 함수 / method (0) | 2020.04.19 |
|---|---|
| [Javascript] array / array method / sorting 예제 (0) | 2020.04.18 |
| [javascript] indexof 함수 / 예제 (0) | 2020.04.12 |
| [Javascript] typeof 함수 / innerHTML 예제 (0) | 2020.04.11 |
| [Javascript] prompt 사용하기 / 평균 구하기 예제 (0) | 2020.04.10 |