Notice
Recent Posts
Recent Comments
Link
«   2025/06   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
Tags more
Archives
Today
Total
관리 메뉴

Everything has an expiration date

HTML 20231128 [프로그램 소스] - Test012, Test013 본문

[HTML]/Program source (HTML)

HTML 20231128 [프로그램 소스] - Test012, Test013

Jelly-fish 2023. 11. 28. 12:02

WebApp01

 

Test012.html

Test012.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test012.html</title>
</head>
<body>

<div>
	<h1>테이블(표) 만들기 - 테이블에 속성 적용하기</h1>
	<h2>테이블에 속성 적용하기</h2>
	<hr>
</div>


<div>
	<!-- CSS 를 통해 관리해야 할 속성들 -->
	<!-- <table border="10" background="images/img_03.jpg" cellpadding="20" cellspacing="30"> -->
	<table border="2">
	<!-- th : 컬럼명, td : 컬럼에 속하는 요소들 -->
		<tr>
			<th>한식</th>
			<th>중식</th>
		</tr>
		<tr>
			<td>김치찌개</td>
			<td>짜장면</td>
		</tr>
		<tr>
			<td>된장찌개</td>
			<td>짬뽕</td>
		</tr>		
		<tr>
			<td>순두부찌개</td>
			<td>사천탕수육</td>
		
		</tr>		
		
		
	</table>
</div>

</body>
</html>

 

 

 

 

Test013.html

 

 

 

 

Test013.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test013.html</title>
</head>
<body>

<div>
	<h1>테이블 열/행 병합 실습</h1>
	<hr>
</div>

<div>
	<table border="1">
		<tr>
		<!-- 하나의 행 안에 4 개의 컬럼으로 이루어진다. -->
		<!-- 중복되는 컬럼일 때 (강남구, 강남구, 노원구, 노원구) 처리-->
		<!-- td colspan="2" 두 개의 컬럼을 하나의 컬럼으로 사용하면 돼! -->
			<td colspan="2">강남구</td>
			<td colspan="2">노원구</td>
		<tr>
		<tr>
			<td>역삼동</td>
			<td>논현동</td>
			<td>상계동</td>
			<td>중계동</td>
		</tr>
	</table>
	<br><br>
	
	
	<!-- th 셀의 활용 -->
		<table border="1">
		<tr>
			<th colspan="2">강남구</td>
			<th colspan="2">노원구</td>
		<tr>
		<tr>
			<td>역삼동</td>
			<td>논현동</td>
			<td>상계동</td>
			<td>중계동</td>
		</tr>
	</table>
	<br><br>
	
	<!-- ★[rowspan] : 위 아래(행) 병합 -->
	<!-- ★[colspan] : 좌우(컬럼) 병합 -->

	<!-- 강남구에 청담동 추가 -->
	<!-- 노원구에 하계동 추가 -->
	<table border="1">
		<tr>
			<th colspan="3">강남구</td>
			<th colspan="3">노원구</td>
		<tr>
		<tr>
			<td>역삼동</td>
			<td>논현동</td>
			<td>청담동</td>
			<td>상계동</td>
			<td>중계동</td>
			<td>하계동</td>
		</tr>
	</table>
	
	
	<br><br>
	<!-- 강남구 → 역삼동 논현동 -->
	<!-- 노원구 → 상계동 중계동 하계동 월계동 -->
	
	<table border="1">
		<tr>
			<th colspan="2">강남구</th>
			<th colspan="4">노원구</th>
		</tr>
		
		<tr>
			<td>역삼동</td>
			<td>논현동</td>
			<td>상계동</td>
			<td>중계동</td>
			<td>하계동</td>
			<td>월계동</td>
		
		</tr>
	</table>


</div>

</body>
</html>

 

'[HTML] > Program source (HTML)' 카테고리의 다른 글

HTML 20231128 [태그 정리] ①  (2) 2023.11.28
HTML 20231128 [프로그램 소스] - Test014  (0) 2023.11.28
HTML 20231128 [프로그램 소스] - Test009, Test010, Test011, Test011_1  (0) 2023.11.28
HTML 20231128 [프로그램 소스] - Test007, Test008  (1) 2023.11.28
HTML 20231128 [프로그램 소스] - Test004, Test005, Test006  (0) 2023.11.28
'[HTML]/Program source (HTML)' Related Articles more