라라리라
2023.07.21 / HTML 3- 코딩 2 일차 본문
0301_테이블1.html
<!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>Document</title>
</head>
<body>
<h2>표 만들기(1행 1열)</h2>
<!--border="1"은 선 굵기-->
<table border="1">
<tr><!--행-->
<td>1행 1열</td><!--열-->
</tr>
</table>
<hr/>
<h2>표 만들기(1행 2열)</h2>
<!--border="1"은 선 굵기-->
<table border="1">
<tr><!--행-->
<td>1행 1열</td><!--열-->
<td>1행 2열</td>
</tr>
</table>
<hr/>
<h2>표 만들기(2행 1열)</h2>
<!--border="1"은 선 굵기-->
<table border="1">
<tr><!--행-->
<td>1행 1열</td><!--열-->
</tr>
<tr><!--행-->
<td>2행 1열</td><!--열-->
</tr>
</table>
<hr/>
<h2>표 만들기(2행 2열)</h2>
<!--border="1"은 선 굵기-->
<table border="1">
<tr><!--행-->
<td>1행 1열</td><!--열-->
<td>1행 2열</td><!--열-->
</tr>
<tr><!--행-->
<td>2행 1열</td><!--열-->
<td>2행 2열</td><!--열-->
</tr>
</table>
</body>
</html>
표 만들기(1행 1열)
| 1행 1열 |
표 만들기(1행 2열)
| 1행 1열 | 1행 2열 |
표 만들기(2행 1열)
| 1행 1열 |
| 2행 1열 |
표 만들기(2행 2열)
| 1행 1열 | 1행 2열 |
| 2행 1열 | 2행 2열 |
0302_테이블2.html
<!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>Document</title>
</head>
<body>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
<tr>
<td>700</td>
<td>800</td>
<td>900</td>
</tr>
</table>
</body>
</html>
| 100 | 200 | 300 |
| 400 | 500 | 600 |
| 700 | 800 | 900 |
0303_열합치기.html
<!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>Document</title>
</head>
<body>
<h2>열 합치기</h2>
<table border="1">
<tr>
<td colspan="3">공연요금</td>
</tr>
<tr>
<td>구분</td>
<td>S석</td>
<td>VIP</td>
</tr>
</table>
</body>
</html>
열 합치기
| 공연요금 | ||
| 구분 | S석 | VIP |
0303_행합치기.html
<!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>Document</title>
</head>
<body>
<h2>행 합치기</h2>
<table border=1>
<tr>
<td rowspan="2">공연시간</td>
<td>1회</td>
</tr>
<tr>
<td>2회</td>
</tr>
</table>
</body>
<h2>행 합치기</h2>
<table border=1>
<tr>
<td rowspan="2">공연요금</td>
<td>1회</td>
</tr>
<tr>
<td>2회</td>
</tr>
</html>
행 합치기
| 공연시간 | 1회 |
| 2회 |
행 합치기
| 공연요금 | 1회 | |||
| 2회 | ||||
| 공연요금 | ||
| 구분 | s석 | vip |
| 성인 | 40,000원 | 60,000원 |
| 청소년 | 30,000원 | 50,000원 |
| 소인 | 미취학 아동 일반 요금의 50% | |
| 공연시간 | 1회 | 13:00시 ~ 15:00시 |
| 2회 | 17:00시 ~ 19:00시 | |
0305_테이블제목.html
<!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>Document</title>
</head>
<body>
<table border="1">
<!-- caption : 테이블의 제목 -->
<caption>최근에 본 영화들</caption>
<tr>
<!-- th : table header(볼드체, 중앙정렬) -->
<th>영화제목</th>
<th>연도</th>
<th>감독</th>
<th>평가</th>
</tr>
<tr>
<td>영화제목1</td>
<td>연도1</td>
<td>감독1</td>
<td>평가1</td>
</tr>
<tr>
<td>영화제목2</td>
<td>연도2</td>
<td>감독2</td>
<td>평가2</td>
</tr>
<tr>
<td>영화제목3</td>
<td>연도3</td>
<td>감독3</td>
<td>평가3</td>
</tr>
</table>
<table border ="1">
<caption>최근에 본 영화들</caption>
<tr>
<th>영화제목</th>
<th>연도</th>
<th>감독</th>
<th>평가</th>
</tr>
<tr>
<td>영화제목1</td>
<td>연도1</td>
<td>감독1</td>
<td>평가1</td>
</tr>
<tr>
<td>영화제목2</td>
<td>연도2</td>
<td>감독2</td>
<td>평가2</td>
</tr>
<tr>
<td>영화제목3</td>
<td>연도3</td>
<td>감독3</td>
<td>평가3</td>
</tr>
</table>
</body>
</html>
| 영화제목 | 연도 | 감독 | 평가 |
|---|---|---|---|
| 영화제목1 | 연도1 | 감독1 | 평가1 |
| 영화제목2 | 연도2 | 감독2 | 평가2 |
| 영화제목3 | 연도3 | 감독3 | 평가3 |
| 영화제목 | 연도 | 감독 | 평가 |
|---|---|---|---|
| 영화제목1 | 연도1 | 감독1 | 평가1 |
| 영화제목2 | 연도2 | 감독2 | 평가2 |
| 영화제목3 | 연도3 | 감독3 | 평가3 |
0306_테이블과리스트.html
<!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>Document</title>
</head>
<body>
<table border="1">
<tr>
<td>
<ul>
<li>리스트 항목1</li>
<li>리스트 항목2</li>
<li>리스트 항목3</li>
<li>리스트 항목4</li>
<li>리스트 항목5</li>
</ul>
</td>
<td>
<ul>
<li>리스트 항목1</li>
<li>리스트 항목2</li>
<li>리스트 항목3</li>
<li>리스트 항목4</li>
<li>리스트 항목5</li>
</ul>
</td>
</tr>
</table>
<table border ="1">
<tr>
<td>
<ul>
<li>리스트 항목1</li>
<li>리스트 항목2</li>
<li>리스트 항목3</li>
<li>리스트 항목4</li>
<li>리스트 항목5</li>
</ul>
</td>
<td>
<ul>
<li>리스트 항목1</li>
<li>리스트 항목2</li>
<li>리스트 항목3</li>
<li>리스트 항목4</li>
<li>리스트 항목5</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
|
|
|
|
0307_테이블과이미지.html
<!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>Document</title>
</head>
<body>
<table border="1">
<tr>
<th>이미지</th>
<th>제품명</th>
<th>가격</th>
</tr>
<tr>
<td>
<img src="욕조무선가습기_라이언.png" alt="욕조무선가습기_라이언" width="150px">
</td>
<td>욕조무선가습기_라이언</td>
<td>39,000원</td>
</tr>
<tr>
<td>
<img src="트리라이언.png" alt="트리라이언" width="150px">
</td>
<td>트리라이언</td>
<td>18,000원</td>
</tr>
</table>
<table border ="1">
<tr>
<th>이미지</th>
<th>제품명</th>
<th>가격</th>
</tr>
<tr>
<td><img src = "욕조무선가습기_라이언.png" width ="100px" height ="100px">
</td>
<td>욕조무선가습기_라이언</td>
<td>39,000원</td>
</tr>
<tr>
<td><img src = "트리라이언.png" width ="100px" height ="100px">
</td>
<td>트리라이언</td>
<td>18,000원</td>
</tr>
</table>
</body>
</html>
| 이미지 | 제품명 | 가격 |
|---|---|---|
|
욕조무선가습기_라이언 | 39,000원 |
|
트리라이언 | 18,000원 |
| 이미지 | 제품명 | 가격 |
|---|---|---|
|
|
욕조무선가습기_라이언 | 39,000원 |
|
|
트리라이언 | 18,000원 |
0308_테이블문제1.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border ="1">
<caption><h3> table행열 합치기 </h3></caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td rowspan = "2">400</td>
<td>500</td>
<td>500</td>
</tr>
<tr>
<td>700</td>
<td>800</td>
</tr>
<tr>
<td colspan = "3">900</td>
</tr>
</table>
</body>
</html>
| 100 | 200 | 300 |
| 400 | 500 | 500 |
| 700 | 800 | |
| 900 | ||
0308_테이블문제2.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border ="1">
<tr>
<td>column1</td>
<td>column1</td>
<td>column1</td>
</tr>
<tr>
<td rowspan ="2">Row 1 Cell 1</tb>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
| column1 | column1 | column1 |
| Row 1 Cell 1 | Row 1 Cell 2 | Row 1 Cell 3 |
| Row 2 Cell 2 | Row 2 Cell 3 | |
| Row 3 Cell 1 | ||
0308_테이블문제3.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border ="1">
<tr>
<td rowspan = "4"><img src="홍길동.png" width="100px" height="100px">
</td>
<td colspan = "4">이력서</td>
</tr>
<tr>
<td rowspan = "2">성명</td>
<td rowspan = "2">홍길동</td>
<td colspan = "2">주민등록번호</td>
</tr>
<tr>
<td colspan = "2">921225-1018293</td>
</tr>
<tr>
<td colspan = "4">생년월일 1992년 12월 25일생(만 28세)</td>
</tr>
<tr>
<td >주소</td>
<td colspan = "4">빈칸</td>
</tr>
<tr>
<td rowspan = "2">연락처</td>
<td>집</td>
<td>빈칸</td>
<td rowspan = "2">전자우편</td>
<td rowspan = "2">빈칸</td>
</tr>
<tr>
<td>핸드폰</td>
<td>빈칸</td>
</tr>
</table>
</body>
</html>
|
이력서 | |||
| 성명 | 홍길동 | 주민등록번호 | ||
| 921225-1018293 | ||||
| 생년월일 1992년 12월 25일생(만 28세) | ||||
| 주소 | 빈칸 | |||
| 연락처 | 집 | 빈칸 | 전자우편 | 빈칸 |
| 핸드폰 | 빈칸 | |||
0308_테이블문제4.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border ="1">
<tr>
<td rowspan = "4">1</td>
<td colspan = "4">1</td>
</tr>
<tr>
<td rowspan = "2">2</td>
<td rowspan = "2">2</td>
<td colspan = "2">2</td>
</tr>
<tr>
<td colspan="2">3</td>
</tr>
<tr>
<td colspan="4">4</td>
</tr>
<tr>
<td>5</td>
<td colspan=" 4">5</td>
</tr>
<tr>
<td rowspan="2">6</td>
<td>6</td>
<td>6</td>
<td rowspan="2">6</td>
<td rowspan="2">6</td>
</tr>
<tr>
<td>7</td>
<td>7</td>
</tr>
</table>
</body>
</html>
| 1 | 1 | |||
| 2 | 2 | 2 | ||
| 3 | ||||
| 4 | ||||
| 5 | 5 | |||
| 6 | 6 | 6 | 6 | 6 |
| 7 | 7 | |||
0308_테이블문제5.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border ="1">
<tr>
<td width="50px" height="50px" >1</td>
<td width="50px" height="50px">2</td>
<td rowspan="2" width="50px" height="50px">3</td>
<td width="50px" height="50px">4</td>
</tr>
<tr>
<td colspan="2" width="50px" height="50px">5</td>
<td rowspan="2" width="50px" height="50px">6</td>
</tr>
<tr>
<td width="50px" height="50px">7</td>
<td colspan="2" width="50px" height="50px">8</td>
</tr>
</table>
</body>
</html>
| 1 | 2 | 3 | 4 |
| 5 | 6 | ||
| 7 | 8 | ||
'코딩 > 2023 HTML & CSS' 카테고리의 다른 글
| 2023.08.10 / CSS3 - 코딩 22 일차 (0) | 2023.08.10 |
|---|---|
| 2023.08.09 / CSS2 - 코딩 21 일차 (0) | 2023.08.09 |
| 2023.07.21 / HTML 4- 코딩 2 일차 (0) | 2023.07.21 |
| 2023.07.20 / HTML 2- 코딩 1 일차 (0) | 2023.07.20 |
| 2023.07.20 / HTML 1- 코딩 1 일차 (0) | 2023.07.20 |
'코딩/2023 HTML & CSS' Related Articles
more
