티스토리 글작성 시 표 테두리, 배경색 바꾸는 방법

테이블 표 설정

특정글을 작성할 때 표에
색상이 마음에 들지 않을 때 사용하면 좋은 팁입니다.

이런	표가	있다고
했을때	배경	색 바꾸기

위의 표의 기본 Html은 이런 모습입니다.

<table style="border-collapse: collapse; width: 100%;" border="1" data-ke-align="alignCenter">
<tbody>
<tr>
<td style="width: 33.3333%; text-align: center;">이런</td>
<td style="width: 33.3333%; text-align: center;">표가</td>
<td style="width: 33.3333%; text-align: center;">있다고</td>
</tr>
<tr>
<td style="width: 33.3333%; text-align: center;">했을때</td>
<td style="width: 33.3333%; text-align: center;">배경</td>
<td style="width: 33.3333%; text-align: center;">색 바꾸기</td>
</tr>
</tbody>
</table>

여기에서 배경 색상을 바꾸는 방법은
배경색 변경을 원하는 곳에 Html코드를
넣어주면 한 번에 완성입니다.

· 배경색 변경

 background-color:원하는색;

원하는 색이라는 부분에
색상을 넣어서 작성해 주시면 됩니다.

 background-color:#f6e199; / 노란색
 background-color:#99cefa; / 하늘색
 background-color:#66ccff; / 진한하늘색
 background-color:#ffcc00; / 진한노랑색
 background-color:#ef5369; / 빨간색

배경색 Html코드를 넣은 모습입니다.

이런	표가	있다고
했을때	배경	색 바꾸기

입력된 Html코드 모습입니다.

<table style="border-collapse: collapse; width: 100%;" border="1" data-ke-align="alignCenter">
<tbody>
<tr>
<td style="width: 33.3333%; text-align: center; background-color: #f6e199;">이런</td>
<td style="width: 33.3333%; text-align: center; background-color: #ffcc00;">표가</td>
<td style="width: 33.3333%; text-align: center; background-color: #66ccff;">있다고</td>
</tr>
<tr>
<td style="width: 33.3333%; text-align: center; background-color: #ef5369;">했을때</td>
<td style="width: 33.3333%; text-align: center; background-color: #99cefa;">배경</td>
<td style="width: 33.3333%; text-align: center;">색 바꾸기</td>
</tr>
</tbody>
</table>

배경색은 이렇게 바꾸실 수 있습니다.
이번엔 테두리를 지우는 방법을 보여 드리겠습니다.

· 테두리 투명 설정

이런	표가	있다고
했을때	배경	색 바꾸기

테두리를 지우고 싶은곳에
아래 Html코드를 넣어주시면 됩니다.

 border:none;

이 Html 코드를 입력한 모습니다.

이런	표가	있다고
했을때	배경	색 바꾸기

<table style="border-collapse: collapse; width: 100%; border:none;" border="1" data-ke-align="alignCenter">
<tbody>
<tr style="border:none;">
<td style="width: 33.3333%; text-align: center; border:none;">이런</td>
<td style="width: 33.3333%; text-align: center; border:none;">표가</td>
<td style="width: 33.3333%; text-align: center; border:none;">있다고</td>
</tr>
<tr style="border:none;">
<td style="width: 33.3333%; text-align: center; border:none;">했을때</td>
<td style="width: 33.3333%; text-align: center; border:none;">배경</td>
<td style="width: 33.3333%; text-align: center; border:none;">색 바꾸기</td>
</tr>
</tbody>
</table>

이렇게 Html코드를 변경하시면
모바일에서도 표의 테두리는 보이지 않습니다.
그럼 좋은 정보가 되었으면 합니다.