html style sheet 로 보기 좋은 table 만들기

  지금 나는  강의하기 위한 교재를 만들고 있다.  교재 또는 서적을 출판 하려고 할 때,  반드시 필요한 것이 있는데,  html style sheet 를 작성 하는 것이다.    즉 표를  이미지를 캡쳐 떠서 할 것이냐,  아니면,  html에 직접 그릴 것인지를 알아 보는 것인데,  나중에 소개 할 MailR에서는 반드시, html style sheet 가 필요하여,  아래와 같이 작성 한다.  


아래의  예제의 표는 오늘 교재에 작성 할 내용인데,  아래 표와 같은 것을 작성 하는 것이다.  아무래도 교재를 작성 할때는 양쪽 테두리가 없는 것이 보다 깔끔하게 보이기 때문에,  하는 것이다.  

유형속성테스트강제 형변환
  배열
  is.array  as.array
  문자
  is.character  as.character
  복소수
  is.complex  as.complex
  데이터 프레임
  is.data.frame  as.data.frame


html <tr> <td> tag에서 스타일을 각각 지정하면 좋은데,  각각 지정 하기에는 코드가 너무 길어서,  <style> tag를  아래와 같이 하였다.  아래와 같이 하면,  R 에서 Markdown 페이지 만드는데, 매우 간단해 진다.    


 방법을 찾기 어려웠던 만큼  아래와 같이 기록을 남겨 사용하기 쉽게 하려고 한다. 

 스타일 시트 적용 코드 
<style type01>
  table.type01 th {
    padding-top: 1px;
    padding-right: 1px;
    padding-left: 1px;
    color: black;
    font-size: 11pt;
    font-weight: 400;
    font-style: normal;
    font-family: "맑은 고딕", monospace;
    vertical-align: middle;
    border-image: initial;
    white-space: nowrap;
    text-align: center;
    border-width: 0px 1px 1px 0px;
    border-style: none solid solid none;
    border-top-color: initial;
    border-right-color: windowtext;
    border-bottom-color: windowtext;
    border-left-color: initial;
    background: rgb(208, 206, 206);
    height: 22px;
    width: 200px;
  }
  
  table.type01 td {
     padding-top: 1px;
          padding-right: 1px;
          padding-left: 1px;
          color: black;
          font-size: 11pt;
          font-weight: 400;
          font-style: normal;
          font-family: '맑은 고딕', monospace;
          vertical-align: middle;
          border-image: initial;
          white-space: nowrap;
          border-width: 0px 1px 1px 0px;
          border-style: none solid solid none;
          border-right-color: windowtext;
          border-bottom-color:windowtext;
          border-left-color: initial;
          height: 22px;
          border-top-color: windowtext;
          width: 200px;
          text-align: left;
  }
    
    
</style>

Table에 적용 하였던 코드 

<table
  border="0"
  cellpadding="0"
  cellspacing="0"
  style="border-collapse: collapse;"
  class="type01"      
>

  <tbody>
    <tr height="22" style="height: 16.5pt">
      <th height="22" >유형</th>
      <th width="133"> 속성테스트 </th>
      <th width="124" style="border-width: 0px 0px 1px;" > 
      강제형변환
      </th>
    </tr>
    
    <tr height="22" style="height: 16.5pt">
      <td height="22"  >
        &nbsp;   배열  
      </td>
      <td>
        &nbsp;  is.array
      </td>
      <td style=" border-style: none none solid none;" >
        &nbsp;  as.array     
      </td>
    </tr>
 
    <tr height="22" style="height: 16.5pt">
      <td height="22" >
        &nbsp; 문자  
      </td>
      <td>
        &nbsp; is.character
      </td>
      <td style=" border-style: none none solid none;" >
        &nbsp; as.character     
      </td>
    </tr>
 
    <tr height="22" style="height: 16.5pt">
      <td height="22">
       &nbsp;  복소수  
      </td>
      <td>
        &nbsp; is.complex
      </td>
      <td style=" border-style: none none solid none; " >
        &nbsp; as.complex    
      </td>
    </tr>
 
    
    <tr height="22" style="height: 16.5pt">
      <td height="22" >
        &nbsp; 데이터 프레임  
      </td>
      <td>
       &nbsp;  is.data.frame
      </td>
      <td style=" border-style: none none solid none;" >
       &nbsp;  as.data.frame    
      </td>
    </tr>
     
  </tbody>
</table>



댓글 없음:

댓글 쓰기

공무 스케줄 AI Agem에 대한 생각

     지금 상황이 아비 규환이다.  어느 부서든 회사가 인수 합병되고 나서  투자를 기획하는 경영기획이 특히 않이 정신이 없고, 우리부서도 전부 미국 필리 조선소로 인원이 나가 있어,  사실상 10년 이상 고기량자는 거의 없다.   우리부서에 남아...