[HTML] 테이블

이현경·2021년 5월 26일
0

HTML

목록 보기
3/24
post-thumbnail
  • Ex_ 셀 합치기
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
  <h1>표 만들기</h1>
  <h2>셀 합치기</h2>
  <table border=1>
	<tr><td colspan=3>공연요금</td></tr>
	<tr><th>구분</th><th>s석</th><th>VIP</th></tr>
	<tr><th>성인</th><td>30,000</td><td>50,000</td></tr>
	<tr><th>청소년</th><td>40,000</td><td>60,000</td></tr>
	<tr><th>소인</th><td colspan=2>미취학 아동 일반 요금의 50%</td></tr>
	<tr><th rowspan=2>공연시간</th><td>1회</td><td>13:00시 ~ 15:00시</td></tr>
	<tr><td>2회</td><td >17:00시 ~ 19:00시</td></tr>
  </table>
 </body>
</html>

  • Ex_ 논리 테이블
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>논리적 테이블</title>
 </head>
 <body>
  <table border=1 width=600 align="center">
	<caption>태블릿 PC와 스마트폰 판매현황</caption>
	<colgroup>
		<col width="20%" />
		<col width="40%" />
		<col width="40%" />
	</colgroup>
	<thead>
		<tr>
			<th>구분</th>
			<td>태블릿 PC</td>
			<td>스마트폰</td>
		</tr>
	</thead>
	<tbody>
		<tr><th>상반기 판매수</th><td>2만대</td><td>5만대</td></tr>
		<tr><th>하반기 판매수</th><td>3만대</td><td>11만대</td></tr>
	</tbody>
	<tfoot>
		<tr>
			<th>총판매수</th>
			<td>5만대</td>
			<td>16만대</td>
		</tr>
	</tfoot>
  </table>
 </body>
</html>
  • Ex_ 논리 테이블2
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
  <table border=1 width=600 align="center">
  <colgroup>
	<col width="25%" />
	<col width="25%" />
	<col width="25%" />
	<col width="25%" />
  </colgroup>
  <caption>상품에 따른 월별 판매현황</caption>
	<thead>
		<tr><th rowspan=2>구분</th><th colspan=3>상품종류</td></th>
		<tr><th>스마트폰</th><th>태블릿PC</th><th>데스크탑PC</th></tr>
	</thead>
	<tbody>
		<tr><th>1월</th><td>5만대</td><td>3만대</td><td>1만대</td></tr>
	</tbody>
  </table>
 </body>
</html>

profile
25. 컴퓨터학과 졸업 / SQLD, 정보처리기사 취득

0개의 댓글