오래전에 만들어 두었던 HTML table 태그를 활용해 만들었던 회사 결제용 일지 예제 샘플 코드입니다.
<html> <head> <title> new document </title> <meta name="generator" content="notepad" /> <meta name="author" content="zzarungna" /> <meta name="description" content="html table sample code" /> </head> <body> <!-- 훈 련 일 지 결 제 라 인--> <h1 align="center"><u>훈 련 일 지</u></h1> <table border="0" width="700" align="center"> <tr> <td><h5>훈 련 기관 명 : ZZARUNGNA</h5></td> <!--valign 테이블에서 위아래 정렬--> <td rowspan="2" width="300"> <table border="1" valign="top" width="100%" height="100"> <tr> <td rowspan="3" width="35" align="center">결<br /><br />제</td> <td width="80" height="15" align="center">강사</td> <td width="110" height="15" align="center">관리자</td> </tr> <tr> <td height="45" rowspan="2"> </td> <td height="45" rowspan="2"> </td> </tr> </table> <tr> <td><h5>훈 련 과 정 명 : IT 개발 인력 양성과정</h5></td> </tr> <tr> <td> <h5><u>훈 련 일 : 2024년 7월 11일 목요일 ( 60 일 / 80 일)</u></h5> </td> </tr> <!-- 첫번째 테이블 시작 구분 재적 출석 결석 지각 조퇴 --> <table border="1" align="center" width="700"> <tr align="center" bgcolor="#CCFFCC"> <td height="20">구분</td> <td height="20">재적</td> <td height="20">출석</td> <td height="20">결석</td> <td height="20">지각</td> <td height="20">조퇴</td> </tr> <tr> <td align="center" width="150">적용자</td> <td align="right">명</td> <td align="right">명</td> <td align="right">명</td> <td align="right">명</td> <td align="right">명</td> </tr> <tr> <td align="center">미적용자</td> <td align="right">명</td> <td align="right">명</td> <td align="right">명</td> <td align="right">명</td> <td align="right">명</td> </tr> <tr> <td align="center">자활</td> <td align="right">명</td> <td align="right">명</td> <td align="right">명</td> <td align="right">명</td> <td align="right">명</td> </tr> </table> </td> </tr> <tr> <td colspan="2"> <table align="center" width="700" border="1" bgcolor="#CCFFCC"> <td colspan="6" align="center" bgcolor="#CCFFCC" height="40"> <strong>훈 련 사 항</strong> </td> </tr> </table> </td> </tr> <table align="center" width="700" border="1"> <tr bgcolor="#CCFFCC"> <td height="50" align="center">교시</td> <td align="center">훈련과목</td> <td align="center">담당교사</td> <td align="center">훈련내용</td> <td colspan="2" align="center">비고(불참자 등)</td> </tr> <tr align="center"> <td>1</td> <td> </td> <td> </td> <td> </td> <td colspan="2"> </td> </tr> <tr align="center"> <td>2</td> <td> </td> <td> </td> <td> </td> <td colspan="2"> </td> </tr> <tr align="center"> <td>3</td> <td> </td> <td> </td> <td> </td> <td colspan="2"> </td> </tr> <tr align="center"> <td>4</td> <td> </td> <td> </td> <td> </td> <td colspan="2"> </td> </tr> <tr align="center"> <td>5</td> <td> </td> <td> </td> <td> </td> <td colspan="2"> </td> </tr> <tr align="center"> <td>6</td> <td> </td> <td> </td> <td> </td> <td colspan="2"> </td> </tr> <tr> <td align="center">지시<br />사항<br /></td> <td> </td> <td> </td> <td> </td> <td colspan="2"> </td> </tr> <tr> <td rowspan="4" align="center"><br /><br />특<br />기<br /><br />사<br />항<br /><br /></td> <td align="center">지각자</td> <td> </td> <td> </td> <td colspan="2"> </td> </tr> <tr> <td align="center">결석자</td> <td> </td> <td> </td> <td colspan="2"> </td> </tr> <tr> <td align="center">조퇴자</td> <td> </td> <td> </td> <td colspan="2"> </td> </tr> <tr> <td align="center">기타사항<br />(전달사항,<br />외출자등)</td> <td> </td> <td> </td> <td colspan="2"> </td> </tr> </table> </tr> </table> </body> </html>
위코드를 복사하셔서 파일을 저장하실 땐 확장자만 원하시는 이름.html로 저장해 주시면 됩니다.
저장한 파일을 실행해 보시면 웹브라우저에서 확인할 수 있는 결과 화면입니다.
제가 작성한 html 코드를 복사해 몇 가지만 변경하시면 처음부터 만들지 않아도 되니 활용할 여지는 어느 정도 있을 것 같습니다.