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>



댓글 없음:

댓글 쓰기

css cheat sheet 클래스 선택자, margin(마진), display , center 조정 간단한 구성 요소

 앞에서는 html의 간단한 sheet를 소개 하였습니다.   html은  주로 골격을 나타나는 것이라, 디자인을 하는데는 css로 하여야 합니다.  아래 코드와 같이 css 관련 하여 매우 간단하게 코딩 하겠습니다.  body 부분의 css 코딩  ...