HTML table 태그로 만들어본 결제용 서식 예제

오래전에 만들어 두었던 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>훈 &nbsp;&nbsp;련 &nbsp;&nbsp;일 &nbsp;&nbsp;지</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">&nbsp;</td>
                                           <td height="45" rowspan="2">&nbsp;</td>
                                    </tr>
                              </table>
                       <tr>
                              <td><h5>훈 련 과 정 명 : IT 개발 인력 양성과정</h5></td>
                       </tr>
                <tr>
                       <td>
                              <h5><u>훈 련 일 : &nbsp;&nbsp;2024년 &nbsp;7월 &nbsp;11일 &nbsp;목요일 &nbsp;( 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>훈 &nbsp;&nbsp;&nbsp;&nbsp;련&nbsp;&nbsp;&nbsp;&nbsp;사 &nbsp;&nbsp;&nbsp;&nbsp;항</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>&nbsp;</td>
                                                                     <td>&nbsp;</td>
                                                                     <td>&nbsp;</td>
                                                                     <td colspan="2">&nbsp;</td>
                                                               </tr>
   
                                                               <tr align="center">
                                                                     <td>2</td>
                                                                     <td>&nbsp;</td>
                                                                     <td>&nbsp;</td>
                                                                     <td>&nbsp;</td>
                                                                     <td colspan="2">&nbsp;</td>
                                                               </tr>
   
                                                               <tr align="center">
                                                                     <td>3</td>
                                                                     <td>&nbsp;</td>
                                                                     <td>&nbsp;</td>
                                                                     <td>&nbsp;</td>
                                                                     <td colspan="2">&nbsp;</td>
                                                               </tr>
   
                                                               <tr align="center">
                                                                     <td>4</td>
                                                                     <td>&nbsp;</td>
                                                                     <td>&nbsp;</td>
                                                                     <td>&nbsp;</td>
                                                                     <td colspan="2">&nbsp;</td>
                                                               </tr>
   
                                                               <tr align="center">
                                                                     <td>5</td>
                                                                     <td>&nbsp;</td>
                                                                      <td>&nbsp;</td>
                                                                     <td>&nbsp;</td>
                                                                     <td colspan="2">&nbsp;</td>
                                                               </tr>
   
                                                               <tr align="center">
                                                                     <td>6</td>
                                                                     <td>&nbsp;</td>
                                                                     <td>&nbsp;</td>
                                                                     <td>&nbsp;</td>
                                                                     <td colspan="2">&nbsp;</td>
                                                               </tr>
   
                                                               <tr>
                                                                     <td align="center">지시<br />사항<br /></td>
                                                                     <td>&nbsp;</td>
                                                                     <td>&nbsp;</td>
                                                                     <td>&nbsp;</td>
                                                                     <td colspan="2">&nbsp;</td>
                                                               </tr>
   
                                                               <tr>
                                                                     <td rowspan="4" align="center"><br /><br />특<br />기<br /><br />사<br />항<br /><br /></td>
                                                                     <td align="center">지각자</td>
                                                                     <td>&nbsp;</td>
                                                                     <td>&nbsp;</td>
                                                                     <td colspan="2">&nbsp;</td>
                                                               </tr>
   
                                                               <tr>
                                                                     <td align="center">결석자</td>
                                                                     <td>&nbsp;</td>
                                                                     <td>&nbsp;</td>
                                                                     <td colspan="2">&nbsp;</td>
                                                               </tr>
   
                                                               <tr>
                                                                     <td align="center">조퇴자</td>
                                                                     <td>&nbsp;</td>
                                                                     <td>&nbsp;</td>
                                                                     <td colspan="2">&nbsp;</td>
                                                               </tr>
   
                                                               <tr>
                                                                     <td align="center">기타사항<br />(전달사항,<br />외출자등)</td>
                                                                     <td>&nbsp;</td>
                                                                     <td>&nbsp;</td>
                                                                     <td colspan="2">&nbsp;</td>
                                                               </tr>
                                    </table>
                </tr>
          </table>
    </body>
   </html>
   


위코드를 복사하셔서 파일을 저장하실 땐 확장자만 원하시는 이름.html로 저장해 주시면 됩니다.

html 파일로 저장


저장한 파일을 실행해 보시면 웹브라우저에서 확인할 수 있는 결과 화면입니다.

회사 결제용 html 예제 코드


제가 작성한 html 코드를 복사해 몇 가지만 변경하시면 처음부터 만들지 않아도 되니 활용할 여지는 어느 정도 있을 것 같습니다.


zzarungna

안녕하세요! 블로그를 좋아하는 사람입니다. 좋은 정보 작성 하도록 노력 하겠습니다.

댓글 쓰기

다음 이전