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>