Pandas 표 html로 변환해서 티스토리에 붙여 넣기

Pandas dataframe을 html을 이용하여 티스토리에 붙여 넣는 과정에서 생기는 형식 상의 문제를 해결한 글이다.

 

Pandas dataframe을 HTML로 변환한 뒤 티스토리 HTML 편집기에 붙여넣으면 다음과 같은 표가 만들어진다.

Pandas dataframe 붙여넣기

 

요렇게 못생긴 표로 붙여넣어진다.

 

티스토리의 html 표가 정말 이상하다.

뭔가 표준적이지 않은 느낌이다.

 

그래서 부득이하게 임시방편으로 대충 함수를 만들어보았다.

 

def save_html(table):
    a = table.to_html(na_rep = "-")
    b = a[:6] + ' style="border-collapse: collapse; width: 100%; ' + a[7:]
    b = b.replace("right", "left")
    start_index = b.find("항목")
    end_index = b.find("</thead")
    b=b[:start_index] + b[end_index:]
    
    return b

 

솔직히 전혀 fancy하지 않은 해결책이지만

일단 이거라도 도움이 되는 사람이 있을 것 같아서 한번 올려본다.

 

table에 dataframe을 넣으면

html이 return된다.

 

<table style="border-collapse: collapse; width: 100%; border="1" class="dataframe">
  <thead>
    <tr style="text-align: left;">
      <th></th>
      <th>2022/03</th>
      <th>2022/06</th>
      <th>2022/09</th>
    </tr>
    <tr>
      <th></thead>
  <tbody>
    <tr>
      <th>자산총계</th>
      <td>2180.3</td>
      <td>2214.1</td>
      <td>2273.1</td>
    </tr>
    <tr>
      <th>유동자산</th>
      <td>399.6</td>
      <td>374.3</td>
      <td>374.7</td>
    </tr>
    <tr>
      <th>부채총계</th>
      <td>802.7</td>
      <td>775.0</td>
      <td>776.7</td>
    </tr>
    <tr>
      <th>유동부채</th>
      <td>613.0</td>
      <td>725.8</td>
      <td>732.9</td>
    </tr>
    <tr>
      <th>자본총계</th>
      <td>1377.7</td>
      <td>1439.1</td>
      <td>1496.4</td>
    </tr>
    <tr>
      <th>지배주주지분</th>
      <td>1354.5</td>
      <td>1409.1</td>
      <td>1469.3</td>
    </tr>
    <tr>
      <th>자본금</th>
      <td>141.1</td>
      <td>141.1</td>
      <td>141.1</td>
    </tr>
    <tr>
      <th>자본잉여금</th>
      <td>700.3</td>
      <td>699.4</td>
      <td>699.7</td>
    </tr>
    <tr>
      <th>이익잉여금</th>
      <td>630.6</td>
      <td>678.9</td>
      <td>735.6</td>
    </tr>
  </tbody>
</table>

 

요런 느낌으로 return되고 결과물은 다음과 같다.

 

  2022/03 2022/06 2022/09
 
자산총계 2180.3 2214.1 2273.1
유동자산 399.6 374.3 374.7
부채총계 802.7 775.0 776.7
유동부채 613.0 725.8 732.9
자본총계 1377.7 1439.1 1496.4
지배주주지분 1354.5 1409.1 1469.3
자본금 141.1 141.1 141.1
자본잉여금 700.3 699.4 699.7
이익잉여금 630.6 678.9 735.6

 

 

요 해결책의 핵심은 

border-collapse: collapse; width: 100%;

요걸 style에 넣어주었다는 점이다.

 

저렇게 해도 해결이 하나 안되는점은

티스토리 표에는 row와 column의 header가 인식이 잘 안된다.

 

티스토리 표만들기 도구로 표를 만들어보면 

따로 header 지정이 안되고 죄다 body로 구성이 되고 있다.

그래서 저 표에다가 티스토리 표 서식을 적용하면 이렇게 된다.

 

 

  2022/03 2022/06 2022/09
 
자산총계 2180.3 2214.1 2273.1
유동자산 399.6 374.3 374.7
부채총계 802.7 775.0 776.7
유동부채 613.0 725.8 732.9
자본총계 1377.7 1439.1 1496.4
지배주주지분 1354.5 1409.1 1469.3
자본금 141.1 141.1 141.1
자본잉여금 700.3 699.4 699.7
이익잉여금 630.6 678.9 735.6

 

또잉.

티스토리 표는 body 부분만 표로 인식한다.

 

뭐 디자인이야 그렇다쳐도 가장 큰 문제는 복사 붙여넣기 할 때이다.

저 표를 복사 붙여넣기 하면 다음과 같이 된다.

2022/032022/062022/09자산총계유동자산부채총계유동부채자본총계지배주주지분자본금자본잉여금이익잉여금

2180.3 2214.1 2273.1
399.6 374.3 374.7
802.7 775.0 776.7
613.0 725.8 732.9
1377.7 1439.1 1496.4
1354.5 1409.1 1469.3
141.1 141.1 141.1
700.3 699.4 699.7
630.6 678.9 735.6

 

header는 다 사라진다.

 

티스토리 붙여 넣기용으로 header를 다 없애는 코드를 짜볼까 했는데

그러려면 정규표현식에 대해서 또 공부해야할 것 같아서 일단 오늘은 GG.

 

혹시 알게 되면 업데이트 하겠습니다.