반응형
표 만들기 (기본)
2행2열 표만들기
| 1행1열 | 1행2열 |
| 2행1열 | 2행2열 |
| 용도 | 중량 | 개수 | 가격 |
|---|---|---|---|
| 선물용 | 3kg | 11-16과 | 35,000 |
| 선물용 | 5kg | 18~26과 | 52,000 |
| 가정용 | 3kg | 11~26과 | 30,000 |
| 가정용 | 5kg | 18~26과 | 47,000 |
<!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>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px 20px;
}
</style>
</head>
<body>
<h3>2행2열 표만들기</h3>
<table>
<tr>
<td>1행1열</td>
<td>1행2열</td>
</tr>
<tr>
<td>2행1열</td>
<td>2행2열</td>
</tr>
</table><br>
<table>
<tr>
<th>용도</th>
<th>중량</th>
<th>개수</th>
<th>가격</th>
</tr>
<tr>
<td>선물용</td>
<td>3kg</td>
<td>11-16과</td>
<td>35,000</td>
</tr>
<tr>
<td>선물용</td>
<td>5kg</td>
<td>18~26과</td>
<td>52,000</td>
</tr>
<tr>
<td>가정용</td>
<td>3kg</td>
<td>11~26과</td>
<td>30,000</td>
</tr>
<tr>
<td>가정용</td>
<td>5kg</td>
<td>18~26과</td>
<td>47,000</td>
</tr>
</table>
</body>
</html>
표 만들기 (병합)
2행2열 표만들기
| 1행1열 | 1행2열 |
| 2행1열 | 2행2열 |
| 용도 | 중량 | 개수 | 가격 |
|---|---|---|---|
| 선물용 | 3kg | 11-16과 | 35,000 |
| 5kg | 18~26과 | 52,000 | |
| 가정용 | 3kg | 11~26과 | 30,000 |
| 5kg | 18~26과 | 47,000 |
| 방이름 | 대상 | 크기 | 가격 |
|---|---|---|---|
| 유채방 | 여성 도미토리 | 4인실 | 1인 20,000 |
| 동백방 | 동성 도미토리 | ||
| 가족1팀 | |||
| 천혜향방 | - | 2인실 | |
| 바깥채 전체를 렌트합니다 | |||
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>표 예제2 입니다</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px 20px;
}
</style>
</head>
<body>
<h3>2행2열 표만들기</h3>
<table>
<tr>
<td>1행1열</td>
<td>1행2열</td>
</tr>
<tr>
<td>2행1열</td>
<td>2행2열</td>
</tr>
</table><br>
<table>
<tr>
<th>용도</th>
<th>중량</th>
<th>개수</th>
<th>가격</th>
</tr>
<tr>
<td rowspan="2">선물용</td>
<td>3kg</td>
<td>11-16과</td>
<td>35,000</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>52,000</td>
</tr>
<tr>
<td rowspan="2">가정용</td>
<td>3kg</td>
<td>11~26과</td>
<td>30,000</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>47,000</td>
</tr>
</table><br>
<table>
<caption> 객실 </caption>
<thead>
<tr style="background-color: gray;">
<th>방이름</th>
<th>대상</th>
<th>크기</th>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td>유채방</td>
<td>여성 도미토리</td>
<td rowspan="3">4인실</td>
<td rowspan="4">1인 20,000</td>
</tr>
<tr>
<td rowspan="2">동백방</td>
<td>동성 도미토리</td>
</tr>
<tr>
<td>가족1팀</td>
</tr>
<tr>
<td>천혜향방</td>
<td>-</td>
<td>2인실</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4" style="background-color: grey;"><b>바깥채 전체를 렌트합니다</b></td>
</tr>
</tfoot>
</table>
</body>
</html>
iFrame
<!DOCTYPE html>
<html lang="en">
<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>iFrame</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px 20px;
}
</style>
</head>
<body>
<table>
<tr>
<td><iframe width="560" height="315" src="https://www.youtube.com/embed/QmWsAgDxhvU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></td>
<td><iframe width="560" height="315" src="https://www.youtube.com/embed/t2_GL4BKNDc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></td>
<td><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3162.116197852447!2d126.97423717570318!3d37.575881423592435!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca37454f683b1%3A0xfa19c5217c6a0bc0!2z6rK967O16raBIOq0ke2ZlOusuA!5e0!3m2!1sko!2skr!4v1685499553409!5m2!1sko!2skr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe></td>
</tr>
</table>
</body>
</html>반응형
'HTML | CSS' 카테고리의 다른 글
| [day4-1] 가상클래스(필터) 선택자 nth-child(), first-letter, first-line, selection | focus, disabled, enabled (0) | 2023.06.02 |
|---|---|
| 선긋기(link,hover,visited) | margin, padding | 방명록 만들기 (0) | 2023.06.02 |
| 태그, css, id, class 선택자 | 부모자식(상속) | 속성 선택자 (0) | 2023.06.01 |
| 입력태그<input> | <form> 회원가입폼 만들기 | 시맨틱을 이용해 layout 만들기 (0) | 2023.05.31 |
| 글꼴 | 문단과 목록 | 외부 사이트,내부 사이트 페이지 이동 | 이미지 및 영상,사운드 불러오기 (0) | 2023.05.30 |
