표 배경 색상 넣기 (티스토리 블로그)

개요

최근에 티스토리 에디터가 신에디터로 변경하고 나서, 표에 원하는 색상을 넣기가 힘들어졌다.

티스토리에서 기본적으로 제공하는 표 템플릿은 다음과 같이 지나치게 한정적이다.

방법

~~(귀찮지만)~~ HTML 코드를 조금만 수정해줌으로서 표에 원하는 배경색을 넣을 수 있다.

표1 (Before)

표1 : 소스 코드

<table style="border-collapse: collapse; width: 100%;" border="1" data-ke-align="alignLeft">
    <tbody>
        <tr>
            <td style="width: 10%;">&nbsp;</td>
            <td style="width: 10%;">&nbsp;</td>
            <td style="width: 10%;">&nbsp;</td>
            <td style="width: 10%;">&nbsp;</td>
            <td style="width: 10%;">&nbsp;</td>
            <td style="width: 10%;">&nbsp;</td>
            <td style="width: 10%;">&nbsp;</td>
            <td style="width: 10%;">&nbsp;</td>
            <td style="width: 10%;">&nbsp;</td>
            <td style="width: 10%;">&nbsp;</td>
        </tr>
        <tr>
            <td style="width: 10%;">&nbsp;</td>
            <td style="width: 10%;">&nbsp;</td>
            <td style="width: 10%;">&nbsp;</td>
            <td style="width: 10%;">&nbsp;</td>
            <td style="width: 10%;">&nbsp;</td>
            <td style="width: 10%;">&nbsp;</td>
            <td style="width: 10%;">&nbsp;</td>
            <td style="width: 10%;">&nbsp;</td>
            <td style="width: 10%;">&nbsp;</td>
            <td style="width: 10%;">&nbsp;</td>
        </tr>
    </tbody>
</table>

기존의 소스 코드의 <td> 태그 안에 bgcolor="색상명" 속성을 추가해주자.

※ r : Row(행), d : Data(데이터)

표2 (After)

표2 : 소스 코드

<table style="border-collapse: collapse; width: 100%;" border="1" data-ke-align="alignLeft">
    <tbody>
        <tr>
            <td style="width: 10%;" bgcolor="red">&nbsp;</td>
            <td style="width: 10%;" bgcolor="yellow">&nbsp;</td>
            <td style="width: 10%;" bgcolor="orange">&nbsp;</td>
            <td style="width: 10%;" bgcolor="green">&nbsp;</td>
            <td style="width: 10%;" bgcolor="skyblue">&nbsp;</td>
            <td style="width: 10%;" bgcolor="black">&nbsp;</td>
            <td style="width: 10%;" bgcolor="blue">&nbsp;</td>
            <td style="width: 10%;" bgcolor="purple">&nbsp;</td>
            <td style="width: 10%;" bgcolor="pink">&nbsp;</td>
            <td style="width: 10%;" bgcolor="lightpurple">&nbsp;</td>
        </tr>
        <tr>
            <td style="width: 10%;" bgcolor="#001122">&nbsp;</td>
            <td style="width: 10%;" bgcolor="#22AABB">&nbsp;</td>
            <td style="width: 10%;" bgcolor="#293812">&nbsp;</td>
            <td style="width: 10%;" bgcolor="#999999">&nbsp;</td>
            <td style="width: 10%;" bgcolor="#FFFFFF">&nbsp;</td>
            <td style="width: 10%;" bgcolor="#123456">&nbsp;</td>
            <td style="width: 10%;" bgcolor="#FA23OE">&nbsp;</td>
            <td style="width: 10%;" bgcolor="#039234">&nbsp;</td>
            <td style="width: 10%;" bgcolor="#ABCDEF">&nbsp;</td>
            <td style="width: 10%;" bgcolor="#AAAAAA">&nbsp;</td>
        </tr>
    </tbody>
</table>

728x90

그리드형(광고전용)

저작자표시 비영리 동일조건

'Information > Tip' 카테고리의 다른 글

[Excel] 실시간 환율 연동 방법 (달러 기준) (0)	2022.05.25
[Excel] 페이지 나누기 선 없애기 (0)	2022.05.17
[티스토리 블로그] 티스토리 스킨 가이드 (0)	2022.05.10
[티스토리 블로그] 블로그 폰트 변경 방법 (0)	2022.01.20
[티스토리 블로그] 코드블럭 원하는 언어로 확장하기 (0)	2021.11.16
[티스토리 블로그] 깃허브 마크다운(GitHub Markdown) 스타일 적용하는 방법 (0)	2021.04.14
[MinGW] gcc/g++ 업데이트 방법 (for Windows) (2)	2020.12.27
[Excel] 함수를 이용하여 디데이 만들기 (0)	2018.07.21