728x90
반응형
💾 소스코드
HTML 실습.hwp
0.11MB
TableTest.html
0.01MB
📃 테이블(표) 만들기 예제
📝 테이블 만들기 실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테이블 만들기 실습</title>
</head>
<body>
<!-- 테이블 1 -->
<caption>테이블 1</caption>
<table border="2">
<tr>
<td>
1행 1열
</td>
</tr>
</table>
<!-- 테이블 2 -->
<br>
<hr><br>
<caption>테이블 2</caption>
<table border="2">
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
</tr>
</table>
<!-- 테이블 3 -->
<br>
<hr><br>
<caption>테이블 3</caption>
<table border="2">
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
<td>1행 3열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
<td>2행 3열</td>
</tr>
<tr>
<td>3행 1열</td>
<td>3행 2열</td>
<td>3행 3열</td>
</tr>
</table>
<!-- 테이블 4 -->
<br>
<hr><br>
<caption>테이블 4</caption>
<table border="2">
<tr>
<td>
<b>1행 1열</b>
</td>
</table>
<!-- 테이블 5 -->
<br>
<hr><br>
<caption>테이블 5</caption>
<table border="2">
<tr>
<td><b>1행 1열</b></td>
<td>1행 2열</td>
<td>1행 3열</td>
</tr>
<tr>
<td><b>2행 1열</b></td>
<td>2행 2열</td>
<td>2행 3열</td>
</tr>
<tr>
<td><b>3행 1열</b></td>
<td>3행 2열</td>
<td>3행 3열</td>
</tr>
</table>
<!-- 테이블 6 -->
<br>
<hr><br>
<caption>테이블 6</caption>
<table border="2">
<tr>
<td>1행 1열</td>
</tr>
</table>
<!-- 테이블 7 -->
<br>
<hr><br>
<caption>테이블 7</caption>
<table border="2">
<tr>
<td rowspan="2">
1행 1열
</td>
<td>
1행 2열
</td>
</tr>
<tr>
<td>
2행 2열
</td>
</tr>
</table>
<!-- 테이블 8 -->
<br>
<hr><br>
<caption>테이블 8</caption>
<table border="2">
<tr>
<td rowspan="3">
1행 1열
</td>
<td colspan="2">
1행 2열
</td>
</tr>
<tr>
<td>2행 2열</td>
<td>2행 3열</td>
</tr>
<tr>
<td colspan="2">3행 2열</td>
</tr>
</table>
<!-- 테이블 9 -->
<br>
<hr><br>
<caption>테이블 9</caption>
<table border="2" width="110" height="100">
<tr text-align:left>
<td>1행 1열</td>
</tr>
</table>
<!-- 테이블 10 -->
<br>
<hr><br>
<caption>테이블 10</caption>
<table border="6" width="200" height="130">
<tr text-align:left>
<td>
1행 1열
</td>
<td>1행 2열</td>
</tr>
<tr text-align:left>
<td>
2행 1열
</td>
<td>2행 2열</td>
</tr>
</table>
<!-- 테이블 11 -->
<br>
<hr><br>
<caption>테이블 11</caption>
<table border="10" width="140" height="150">
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
<td>1행 3열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
<td>2행 3열</td>
</tr>
<tr>
<td>3행 1열</td>
<td>3행 2열</td>
<td>3행 3열</td>
</tr>
</table>
<!-- 테이블 12 -->
<br>
<hr><br>
<caption>테이블 12</caption>
<table border="2">
<tr>
<td>1행 1열</td>
</tr>
</table>
<!-- 테이블 13 -->
<br>
<hr><br>
<caption>테이블 13</caption>
<table border="2" cellpadding="15">
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
</tr>
</table>
<!-- 테이블 14 -->
<br>
<hr><br>
<caption>테이블 14</caption>
<table border="2" cellspacing="20">
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
<td>1행 3열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
<td>2행 3열</td>
</tr>
<tr>
<td>3행 1열</td>
<td>3행 2열</td>
<td>3행 3열</td>
</tr>
</table>
<!-- 테이블 15 -->
<br>
<hr><br>
<caption>테이블 15</caption>
<table border="5" bordercolor="red">
<tr>
<td bgcolor="red">1행 1열</td>
</tr>
</table>
<!-- 테이블 16 -->
<br>
<hr><br>
<caption>테이블 16</caption>
<table border="5" bordercolor="blue">
<tr bgcolor=#B0C4DE>
<td>1행 1열</td>
<td>1행 2열</td>
</tr>
<tr bgcolor=#B0C4DE>
<td>2행 1열</td>
<td>2행 2열</td>
</tr>
</table>
<!-- 테이블 17 -->
<br>
<hr><br>
<caption>테이블 17</caption>
<table border="5" bordercolor="green">
<tr bgcolor="green">
<td>1행 1열</td>
<td>1행 2열</td>
<td>1행 3열</td>
</tr>
<tr>
<td>2행 1열</td>
<td bgcolor="green">2행 2열</td>
<td>2행 3열</td>
</tr>
<tr>
<td bgcolor="green">3행 1열</td>
<td>3행 2열</td>
<td bgcolor="green">3행 3열</td>
</tr>
</table>
<!-- 테이블 18 -->
<br>
<hr><br>
<h4><b>간단한 TABLE 만들기</b></h4>
<caption>중식당 메뉴</caption>
<table border="2" cellpadding="10">
<tr>
<td rowspan="2" bgcolor=#B0E0E6>메뉴</td>
<td colspan="3" bgcolor=#7CFC00>종류</td>
</tr>
<tr>
<td>보통</td>
<td>곱배기</td>
<td>삼선</td>
</tr>
<tr>
<td>짜장면</td>
<td>3000</td>
<td>4000</td>
<td>5000</td>
</tr>
<tr>
<td>짬뽕</td>
<td>3500</td>
<td>4500</td>
<td>5500</td>
</tr>
</table>
<!-- 테이블 19 -->
<br>
<hr><br>
<table border="2" width="200" height="80" cellpadding="5">
<tr align="center">
<td>이름</td>
<td>영어</td>
<td>국어</td>
</tr>
<tr align="center">
<td>홍길동</td>
<td>100</td>
<td>90</td>
</tr>
<tr align="center">
<td>강감찬</td>
<td>90</td>
<td>100</td>
</tr>
</table>
<h4>간단한 성적표</h4>
</body>
</html>728x90
반응형
'Front-End > HTML | CSS' 카테고리의 다른 글
| HTML - 입력 양식 작성하기, <form> 태그 (0) | 2022.07.08 |
|---|---|
| HTML - 실습문제 03 (0) | 2022.07.07 |
| HTML - 기본 구조와 태그 (0) | 2022.07.07 |
| HTML - 실습문제 02 (0) | 2022.07.07 |
| HTML - 텍스트 태그, 목록, 표 만들기 (0) | 2022.07.06 |
댓글