Table
- Div+css가 레이아웃 구성을 대체함
- td 또는 tr, td와 같이 써야 함
- th: 헤더 이름, 자동으로 볼드 처리됨
- tr: 행
- td: 열
- 셀 병합: 왼쪽에서 오른쪽, 위에서 아래로만 가능
- colspan: 열 병합
- rowspan: 행 병합
▽ 예제 코드 1 ▽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1">
<tr>
<td colspan="2" align=center>A</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
<hr>
<table border="1">
<tr>
<td>A</td>
<td rowspan=2>B</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>
</body>
</html>
▽ 예제 코드 1 - 결과 ▽
▽ 예제 코드 2 ▽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1" bordercolor="red">
<tr>
<td rowspan="2">가</td>
<td colspan="2" align=center>나</td>
</tr>
<tr>
<td>라</td>
<td rowspan="2">마</td>
</tr>
<tr>
<td colspan="2" align=center>바</td>
</tr>
</table>
</body>
</html>▽ 예제 코드 2 - 결과 ▽
Input
- text: 메시지를 한 줄 입력 가능
- password: 입력하면 echo character로 보여 줌
- placeholder: 어떤 용도로 사용하는지 명시해 줌
- button
- checkbox: 여러 개 선택 가능
- radio button: name 속성에 같은 값을 주면 중복 체크 방지할 수 있음
Textarea
- 메시지를 여러 줄 입력 가능
Select
- 여러 값 중 하나 선택 가능
▽ 예제 코드 3 ▽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text"
placeholder="ID를 입력하세요."><br>
<input type="password"
placeholder="PW를 입력하세요."><br>
<input type="button" value="로그인">
<input type="button" value="회원 가입">
<br>
<input type="checkbox">아이디를 기억합니다.<br>
<input type="radio" name="agreement">동의합니다.<br>
<input type="radio" name="agreement">동의하지 않습니다.<br>
<textarea placeholder="메시지를 입력하세요."></textarea>
<br>
<select size="3" multiple>
<option>Apple</option>
<option>Mango</option>
<option>Orange</option>
</select>
</body>
</html>▽ 예제 코드 3 - 결과 ▽
'Web > HTML' 카테고리의 다른 글
| [HTML] HTML 기본 예제 - form(input submit, input reset, required), audio, video, fieldset, legend (0) | 2020.04.23 |
|---|---|
| [HTML] HTML 예제 - 게시판 글쓰기 창 (0) | 2020.04.23 |
| [HTML] HTML 예제 - 자유 게시판 (0) | 2020.04.23 |
| [HTML] HTML 예제 - 간단 로그인 창 (0) | 2020.04.23 |
| [HTML] HTML 기본 개념 - HTML, CSS, JavaScript 기본 정의 (0) | 2020.04.23 |