반응형
1. <tale>, <tr>, <th>, <td> 태그 – 기본적인 표 만들기
① <table> : 표의 자리를 지정해 주는 태그
② <tr> : 테이블에 행(row)를 추가해주는 태그
③ <th> : 내에서 행의 제목이 되는 태그
④ <td> : 내에서 행의 내용이 되는 태그
<!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>
td {
padding: 5px; /*셀 테두리와 내용 사이의 간격(패딩)*/
}
</style>
</head>
<body>
<!--zencoding 속성 추가할 때는 []사용-->
<!--table[border="1"]>(tr>th+td*2)*2-->
<!--table : 표 만드는 태그-->
<!--border속성 : 표 테두리 지정 속성-->
<table border="1">
<!--tr : 표에 행 추가하는 태그-->
<tr>
<!--th : 행의 제목 입력 태그-->
<th> 제목 셀</th>
<!--td : 행의 내용 입력 태그-->
<td> 1행 2열</td>
<td> 1행 3열</td>
</tr>
<tr>
<th> 제목 셀</th>
<td> 2행 2열</td>
<td> 2행 3열</td>
</tr>
</table>
</body>
</html>
2. colspan, rowspan 속성 – 행 또는 열 합치기
① colspan : 지정한 셀 개수만큼 가로로 합치기
② rowspan : 지정한 셀 개수만큼 세로로 합치기
3. <colgroup>, <col> 태그 – 여러 열을 묶어 스타일 지정하기
① <colgroup> : 컬럼 그룹 생성, 태그 뒤 , 태그 전에 사용
② <col> : <colgroup> 내에서 컬럼에 적용할 스타일 미리 지정
※ 행을 묶는 태그는 없다!! <col>의 개수와 테이블의 열 개수는 동일해야 한다.
<!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>
th {
padding: 15px; /*셀 테두리와 내용 사이의 간격(패딩)*/
}
</style>
</head>
<body>
<!--table[border="1"]>(colgroup>col[style="width:"]*4)+(tr>(th+td)*2)+(tr>(th+td[colspan="3"]))*2-->
<table border="1">
<!--colgroup : 컬럼을 묶는 태그-->
<colgroup>
<!--col : 지정된 컬럼에 스타일 적용하는 태그-->
<col style="width:100px;">
<col style="width:300px;">
<col style="width:100px;">
<col style="width:300px;">
</colgroup>
<tr>
<th>이름</th>
<td></td>
<th>연락처</th>
<td></td>
</tr>
<tr>
<th>주소</th>
<td colspan="3"></td>
</tr>
<tr>
<th>자기소개</th>
<td colspan="3"></td>
</tr>
</table>
</body>
</html>
4. <caption> 태그 – 표에 제목 붙이기
① <table> 태그 뒤에 바로 사용, 표 위쪽 중앙에 표시
② <caption> 안에 다른 태그를 사용해 스타일을 입힐 수 있음
<!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>
th {
padding: 15px; /* 셀 */
}
</style>
</head>
<body>
<!--table[border="1"]>(caption>(strong+p))+(tr>th*3)+(tr>(th+td*2))*3-->
<table border="1">
<!--caption : 표 중앙에 표 제목 붙이는 태그-->
<caption>
<strong>Modern Browser</strong>
<p>국내에서 자주 사용하는 모던 브라우저</p>
</caption>
<tr>
<th>브라우저</th>
<th>제조업체</th>
<th>다운로드</th>
</tr>
<tr>
<th>크롬(Chrome)</th>
<td>Google</td>
<td>http://www.google.com/chrome/</td>
</tr>
<tr>
<th>파이어폭스(Firefox)</th>
<td>Mozilla</td>
<td>http://www.Mozilla.org/ko/firefox/</td>
</tr>
<tr>
<th>엣지(Edge)</th>
<td>Microsoft</td>
<td>http://www.microsoft.com/ko-kr/windows/microsoft-edge/</td>
</tr>
</table>
</body>
</html>
5. <figcaption> 태그 – 표에 제목 붙이기
① <figure> 태그와 함께 사용
② 제목이나 설명을 붙이고 싶은 대상을 <figure> 태그로 감싼 후에 <figcaption>에 제목이나 설명 입력
<!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>
th {
padding: 15px; /* 셀 */
}
</style>
</head>
<body>
<!--figure : 제목이나 설명 붙일 대상 지정하는 태그-->
<figure>
<!--figcaption : 지정된 대상에 제목이나 설명 추가하는 태그-->
<figcaption>
<!--caption 태그는 중앙에 표시되는데 figcaption은 왼쪽 정렬임-->
<p>국내에서 자주 사용되는 <b>모던 브라우저</b></p>
</figcaption>
<table border="1">
<!--caption : 표 중앙에 표 제목 붙이는 태그-->
<tr>
<th>브라우저</th>
<th>제조업체</th>
<th>다운로드</th>
</tr>
<tr>
<th>크롬(Chrome)</th>
<td>Google</td>
<td>http://www.google.com/chrome/</td>
</tr>
<tr>
<th>파이어폭스(Firefox)</th>
<td>Mozilla</td>
<td>http://www.Mozilla.org/ko/firefox/</td>
</tr>
<tr>
<th>엣지(Edge)</th>
<td>Microsoft</td>
<td>http://www.microsoft.com/ko-kr/windows/microsoft-edge/</td>
</tr>
</table>
</figure>
</body>
</html>
6. <thead>, <tbody>, <tfoot>태그 – 표 구조 정의하기
① <thead> : 표의 제목 부분
② <tbody> : 표의 본문 부분
③ <tfoot> : 표의 요약 부분
<!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>
td, td {
width: 80px; /*셀의 너비*/
padding: 10px; /*셀 테두리와 내용 사이의 간격(패딩)*/
}
thead, tfoot {
background: #eeeeee; /*thead와 tfoot의 배경 색*/
}
</style>
</head>
<body>
<!--table[border="1"]>(caption+(thead>tr>th*5)+(tbody>(tr>(th+td*4))*5)+(tfoot>tr>(th+td*4)))-->
<table border="1">
<caption>제주특별자치도 학교현황(2015.4.1 기준)</caption>
<!--thead : 표의 제목 부분-->
<thead>
<tr>
<th>구분</th>
<th>학교수</th>
<th>학급수</th>
<th>학생수</th>
<th>교원수</th>
</tr>
</thead>
<!--tbody : 표의 본문 부분-->
<tbody>
<tr>
<th>유치원</th>
<td>117</td>
<td>242</td>
<td>5,547</td>
<td>474</td>
</tr>
<tr>
<th>초등학교</th>
<td>111</td>
<td>1,720</td>
<td>37,686</td>
<td>2,632</td>
</tr>
<tr>
<th>중학교</th>
<td>44</td>
<td>699</td>
<td>21,274</td>
<td>1,412</td>
</tr>
<tr>
<th>고등학교</th>
<td>29</td>
<td>676</td>
<td>22,049</td>
<td>1,433</td>
</tr>
<tr>
<th>특수학교</th>
<td>3</td>
<td>90</td>
<td>428</td>
<td>160</td>
</tr>
</tbody>
<!--tfoot : 표의 요약 부분-->
<tfoot>
<tr>
<th>합계</th>
<td>300</td>
<td>3,437</td>
<td>86,954</td>
<td>6,111</td>
</tr>
</tfoot>
</table>
</body>
</html>
7. 온라인 프로필 – 표 추가하기
<!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; /*1픽셀 실선 검은색 테두리*/
border-collapse: collapse; /*중복되는 테두리 한 줄로 표시*/
}
th, td {
padding: 15px; /*셀 테두리와 내용 사이의 간격(패딩)*/
}
</style>
</head>
<body>
<!--h1+p+h2+p+hr+h2+(ul>(li>ul>li*8)+(li>ul>li*4))-->
<h1>Hayoon Moon</h1>
<p>이메일 : moonhy7@naver.com</p>
<h2>Who I am?</h2>
<p>웹 개발 경력 6년차이고 현재 비트캠프 강사로 활동중입니다.<br>
학생분들에게 도움이 되는 강사가 되고 싶습니다.</p>
<hr><!--주제 전환-->
<h2>skills</h2>
<ul>
<li>사용언어
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JAVA</li>
<li>Javascript</li>
<li>Jquery</li>
<li>Oracle</li>
<li>C++</li>
<li>WPF</li>
</ul>
</li>
<li>사용 툴
<ul>
<li>eclipse(4years)</li>
<li>Spring Framework(4years)</li>
<li>Sql Developer(4years)</li>
<li>Visual Studio(4years)</li>
</ul>
</li>
</ul>
<!--h2+(table>(caption+(thead>tr>th*4))+(tbody>(tr>td*4)*2))-->
<h2>Academic</h2>
<table>
<caption>학력 사항</caption>
<thead>
<tr>
<th>출신학교</th>
<th>전공</th>
<th>기간</th>
<th>졸업구분</th>
</tr>
</thead>
<tbody>
<tr>
<td>ㅇㅇㅇ고등학교</td>
<td>(해당사항 없음)</td>
<td>1997.3 ~ 2000.2</td>
<td>졸업</td>
</tr>
<tr>
<td>ㅁㅁㅁ대학교</td>
<td>정보통신공학과</td>
<td>2000.3 ~ 2007.2</td>
<td>졸업</td>
</tr>
</tbody>
</table>
</body>
</html>
퀴즈
<퀴즈 1번>
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>서울특별시</title>
</head>
<body>
<div style="float:left; width:150px; margin-right:25px;">
<img src="images/symbol.gif" alt="서울특별시 휘장">
</div>
<div>
<h1>서울특별시</h1>
<!--글자 쓸 때 반드시 p 태그 사용할 것! 자동으로 문단 분리됨-->
<p><strong>서울의 지향 이미지 : 역사와 활력의 인간도시</strong></p>
<p>
<i>휘장은 한글 '서울'을 서울의 산, 해, 한강으로 나타내면서 <br>
전체적으로는 신명나는 사람의 모습을 형상화한 것으로 <br>
인간 중심도시를 지향하는 서울을 상징합니다. </i>
</p>
<p>
자연 - 인간 - 도시의 맥락 속에서 <br>
녹색 산은 환경사랑, 청색 한강은 역사와 활력, <br>
가운데 해는 미래의 비전과 희망을 함축하고, <br>
이 세가지 요소를 붓터치로 자연스럽게 연결하여 <br>
서울의 이미지와 사람의 활력을 친근하게 느낄 수 있도록 하였습니다.
</p>
</div>
</body>
</html>
<퀴즈 2번>
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>신입 사원 모집 공고</title>
</head>
<body>
<!--h1+p+(ul>(li+(li>ul>li*2)+li))+p-->
<h1>비트컴퓨터 신입 사원 모집 공고</h1>
<p>IT 기획, 편집 부서에서 함께 할 신입 사원을 모집합니다.</p>
<ul>
<li>모집 직군 : 편집 기획 부서</li>
<li>직무 내용 : 기획 프로듀싱 업무 (신입 지원 가능)
<ul>
<li>솔루션 기획, 편집</li>
<li>솔루션 홍보, 고객 소통</li>
</ul>
</li>
<li>접수 마감일 : 2020.12.30.</li>
</ul>
<p>자세한 내용은 공지 게시판을 참고하세요.</p>
</body>
</html>
<퀴즈 3번>
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>커피 드립 순서</title>
</head>
<body>
<!--(P+(ol>li*4))*2-->
<p>커피 드립 순서 - 아라비아 숫자</p>
<ol>
<li>필터접기</li>
<li>분쇄</li>
<li>불림</li>
<li>추출</li>
</ol>
<p>커피 드립 순서 - 알파벳 소문자</p>
<ol type="a">
<li>필터접기</li>
<li>분쇄</li>
<li>불림</li>
<li>추출</li>
</ol>
</body>
</html>
<퀴즈 4번>
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>주요 SNS 서비스별 이용률</title>
<style>
table, th, td {
border:1px solid gray; /* 표의 테두리 - 1px 회색 실선 */
border-collapse:collapse; /* 표 테두리와 셀 테두리 합치기 */
}
th, td {
width:120px; /* 셀 너비 */
padding:5px; /* 셀 패딩(테두리와 내용 사이의 여백) */
}
</style>
</head>
<body>
<!--table>(caption>strong)+(tr>th*6)+(tr>th+td*5)*2-->
<table>
<caption><strong>주요 SNS 서비스별 이용률(%)</strong></caption>
<tr>
<th></th>
<th>페이스북</th>
<th>카카오스토리</th>
<th>밴드</th>
<th>인스타그램</th>
<th>트위터</th>
</tr>
<tr>
<th>2015년</th>
<td>77.1</td>
<td>58.3</td>
<td>32.4</td>
<td>16.7</td>
<td>22.1</td>
</tr>
<tr>
<th>2016년</th>
<td>73.8</td>
<td>51.0</td>
<td>40.1</td>
<td>28.1</td>
<td>14.7</td>
</tr>
</table>
</body>
</html>
<퀴즈 5번>
<!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>
<!--table[border="1"]>caption+(tr>td[rowspan="2"]+td)+(tr>td)-->
<table border="1">
<caption>재무상태표</caption>
<tr>
<td rowspan="2"> 자산: 현금, <br>
현금 외 자산</td>
<td> 부채:차입금</td>
</tr>
<tr>
<td> 자본: 자본금, 이익잉여금</td>
</tr>
</table>
</body>
</html>
<퀴즈 6번>
<!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 {
width: 250px;
}
</style>
</head>
<body>
<!--table[border="1"]>(caption>small)+(colgroup>col*2)+(tr>th+td)*7-->
<table border="1">
<caption>1인당 연간 설탕 소비량 <small>(단위:kg)</small></caption>
<colgroup>
<col style="background-color: rgb(211, 211, 211);">
<col>
</colgroup>
<tr>
<th>WHO권장량</th>
<td>18.25</td>
</tr>
<tr>
<th>한국</th>
<td>22</td>
</tr>
<tr>
<th>중국</th>
<td>25</td>
</tr>
<tr>
<th>싱가포르</th>
<td>58</td>
</tr>
<tr>
<th>미국</th>
<td>33</td>
</tr>
<tr>
<th>브라질</th>
<td>69</td>
</tr>
<tr>
<th>세계평균</th>
<td>23</td>
</tr>
</table>
</body>
</html>
반응형
'💻 1. 웹개발_Front end > 1-2 HTML' 카테고리의 다른 글
| [HTML] 03-2 링크 만들기 (0) | 2021.09.05 |
|---|---|
| [HTML] 03-1 이미지 (0) | 2021.09.05 |
| [HTML] 02-4 W3C HTML 검사기 (0) | 2021.09.05 |
| [HTML] 02-3 목록을 만드는 태그 (0) | 2021.09.05 |
| [HTML] 02-2 텍스트를 한 줄로 표시하는 태그 (0) | 2021.09.05 |
댓글