728x90
★ 문제 1
- 5x5 테이블을 생성하시오.
- 가로 셀 병합을 하시오.
- 세로 셀 병합을 하시오.
■ 소스코드
<h1>테이블 문제1</h1>
<table border="1" width="500" height="500">
<tr align="center">
<td colspan="5">1</td>
</tr>
<tr align="center">
<td rowspan="4">6</td>
<td colspan="2">7</td>
<td colspan="2">9</td>
</tr>
<tr align="center">
<td>12</td>
<td>13</td>
<td rowspan="2">14</td>
<td>15</td>
</tr>
<tr align="center">
<td rowspan="2">17</td>
<td>18</td>
<td>20</td>
</tr>
<tr align="center">
<td>23</td>
<td colspan="2">24</td>
</tr>
</table>■ 실행결과
★ 문제 2
- 14x17 테이블을 생성하시오.
- 가로 셀 병합을 하시오.
- 세로 셀 병합을 하시오.
■ 소스코드
<!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>Document</title>
</head>
<body>
<h1>출석부</h1>
<table border="1" width = "900">
<tr align="center">
<td rowspan="4">번호</td>
<td>일자</td>
<td colspan="2">03월 31일</td>
<td colspan="2">4월 01일</td>
<td colspan="2">4월 02일</td>
<td colspan="2">4월 03일</td>
<td colspan="2">4월 04일</td>
<td width = "20"rowspan="4">출석일</td>
<td width = "20" rowspan="4">결석</td>
<td width = "20" rowspan="4">지각</td>
<td width = "20" rowspan="4">조퇴</td>
<td width = "20" rowspan="4">확인</td>
</tr>
<tr align = "center">
<td>기관장<br>결재</td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr align="center">
<td rowspan="2">확인<br>(지도교수)</td>
<td>시작</td>
<td>종료</td>
<td>시작</td>
<td>종료</td>
<td>시작</td>
<td>종료</td>
<td>시작</td>
<td>종료</td>
<td>시작</td>
<td>종료</td>
</tr>
<tr height = "17">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align = "center">
<td>1</td>
<td>강한님</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align = "center">
<td>2</td>
<td>권승도</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align = "center">
<td>3</td>
<td>김경빈</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align = "center">
<td>4</td>
<td>김용기</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align = "center">
<td>5</td>
<td>김용식</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align = "center">
<td>6</td>
<td>김은서</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align = "center">
<td>7</td>
<td>김재호</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align = "center">
<td>8</td>
<td>김정현</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align = "center">
<td>9</td>
<td>김준형</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align = "center">
<td>10</td>
<td>김찬호</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>■ 실행 결과
★ 문제 3
- 중첩된 테이블을 구현하시오.
- 가로 셀 병합을 하시오.
- 세로 셀 병합을 하시오.
■ 소스코드
<!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>Document</title>
</head>
<body>
<table border="0" width="800">
<tr>
<td align="center">
<h1>교 육 훈 련 일 지</h1>
</td>
</tr>
</table>
<br>
<table border="0" width="800">
<tr>
<td>
교육기관 : 서울 고용 노동부 / 쌍용 교육 센터<br><br>
교육과정 : Java 기반 임베디드 플랫폼 연동 융합 개발자 양성 과정<br><br>
교육일자 : <span id="data1"></span>년 월 일 요일
</td>
<td align="right">
<table border="1" width="250" height="100">
<tr height="30">
<td align="center">담 당</td>
<td align="center">팀 장</td>
<td align="center">단 장</td>
</tr>
<tr height="80">
<td> </td>
<td align="center"><b>전 결</b></td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
<br>
<table border="1" width="800" height="40">
<tr>
<td align="center" width="80" align="center">재적</td>
<td align="center" width="80" align="center"> </td>
<td align="center" width="80" align="center">출석</td>
<td align="center" width="80" align="center"> </td>
<td align="center" width="80" align="center">결석</td>
<td align="center" width="80" align="center"> </td>
<td align="center" width="80" align="center">지각</td>
<td align="center" width="80" align="center"> </td>
<td align="center" width="80" align="center">조퇴</td>
<td align="center" width="80" align="center"> </td>
</tr>
</table>
<br>
<table border="1" width="800" height="600">
<tr>
<td align="center" colspan="10" align="center">교 육 훈 련 사 항</td>
</tr>
<tr>
<td align="center" width="80">교시</td>
<td align="center" colspan="2" width="100">교육과정</td>
<td align="center" width="100">담당교수</td>
<td align="center" colspan="6" width="520">교육내용</td>
</tr>
<tr>
<td align="center">1</td>
<td align="center" colspan="2"> </td>
<td align="center"> </td>
<td align="center" colspan="6"> </td>
</tr>
<tr>
<td align="center">2</td>
<td align="center" colspan="2"> </td>
<td align="center"> </td>
<td align="center" colspan="6"> </td>
</tr>
<tr>
<td align="center">3</td>
<td align="center" colspan="2"> </td>
<td align="center"> </td>
<td align="center" colspan="6"> </td>
</tr>
<tr>
<td align="center">4</td>
<td align="center" colspan="2"> </td>
<td align="center"> </td>
<td align="center" colspan="6"> </td>
</tr>
<tr>
<td align="center">5</td>
<td align="center" colspan="2"> </td>
<td align="center"> </td>
<td align="center" colspan="6"> </td>
</tr>
<tr>
<td align="center">6</td>
<td align="center" colspan="2"> </td>
<td align="center"> </td>
<td align="center" colspan="6"> </td>
</tr>
<tr>
<td align="center">7</td>
<td align="center" colspan="2"> </td>
<td align="center"> </td>
<td align="center" colspan="6"> </td>
</tr>
<tr>
<td align="center">8</td>
<td align="center" colspan="2"> </td>
<td align="center"> </td>
<td align="center" colspan="6"> </td>
</tr>
<tr>
<td align="center" rowspan="2">교육기간</td>
<td align="center">일계</td>
<td align="center">이론</td>
<td align="center"> </td>
<td align="center">실기</td>
<td align="center"> </td>
<td align="center">기타</td>
<td align="center"> </td>
<td align="center">계</td>
<td align="center"> </td>
</tr>
<tr>
<td align="center" >누계</td>
<td align="center" >이론</td>
<td align="center" > </td>
<td align="center" >실기</td>
<td align="center" > </td>
<td align="center" >기타</td>
<td align="center" > </td>
<td align="center" >계</td>
<td align="center" > </td>
</tr>
<tr>
<td align="center" >지시사항</td>
<td align="center" colspan="9"> </td>
</tr>
<tr>
<td align="center" >특기사항<br>(결석자명,<br>기재포함)</td>
<td align="center" colspan="9"> </td>
</tr>
</table>
<br>
<table border="0" width="800">
<tr>
<td>
<착안사항><br>
담당자, 과장 등 책임자의 서명여부확인(책임자 전결가능)<br>
출석부상의 출결상황 등과 대조<br>
교육훈련계획서상의 교육내용과의 일치여부, 실제 교육내용과의 일치여부<br>
출석부상의 결석자와 대조 확인
</td>
</tr>
</table>
<script>
document.getElementById('data1').textContent = new Date().getFullYear();
</script>
</body>
</html>
■ 실행결과
728x90
'웹페이지' 카테고리의 다른 글
| CSS STEP 1 - CSS 기초 (0) | 2023.04.12 |
|---|---|
| HTML STEP 13 - HTML5 (0) | 2023.04.12 |
| HTML STEP 11 - FORM (0) | 2023.04.12 |
| HTML STEP 10 - HTML 기초 예제문제 (0) | 2023.04.11 |
| HTML STEP 9 - TABLE (0) | 2023.04.11 |
