티스토리 표 테이블 배경색과 글자크기 변경하는 방법

티스토리에서 글을 작성할 때 표(테이블)를 삽입하면 글의 가독성을 높일 수 있습니다. 또한 표를 사용하여 데이터를 정리하고 비교하는 것도 가능합니다. HTML을 이용하면 원하는 크기의 테이블이나 배경색을 내 마음대로 지정하여 표를 자유롭게 만들 수 있습니다.

1. 티스토리 글쓰기에서 표 만들기

티스토리 본문 글쓰기에서 표를 간단히 선택해서 삽입할 수 있습니다. 본문글 에디터에서 테이블을 클릭 후 원하는 표를 만듭니다. 표 만들기 기능을 이용하면 간편하게 표의 테두리 두께, 행과 열의 높이와 너비, 셀의 배경색, 셀의 정렬 등 다양한 속성을 설정할 수 있습니다. 표는 데이터를 정리하고 비교하기에 유용합니다. 블로그 글쓰기에서 표를 활용하면 다음과 같은 효과를 얻을 수 있습니다.

데이터를 직관적으로 이해하기 쉽게 표를 만들 수 있습니다.
데이터 사이의 관계를 쉽게 파악할 수 있습니다.
글의 내용을 풍부하게 만들 수 있습니다.

기본 표의 행과 열을 결정한 뒤 테이블 프리셋을 통해 표의 배경색과 테두리 없는 표를 만들거나 선택해서 표를 사용할 수 있습니다.

기본 표(테이블)의 크기와 표 구분 색상과 배경색을 선택하여 간편하게 만들 수 있습니다.

2. HTML에서 표 편집하기

HTML 코드를 사용하여 표를 만들면 보다 세밀한 설정이 가능합니다. HTML 코드를 사용하여 표에 배경색을 간편하게 바꾸는 방법은 다음과 같습니다.

① 먼저 본문 글쓰기에서 표를 만듭니다. 아래 표이미지는 알아보기 쉽게 숫자를 입력했습니다. 만든 후 그대로 상단 에디터에서 기본모드 클릭 후 HTML를 클릭해 이동해서 보면 표코드를 볼 수 있습니다.

표의 테두리 두께는 border="1" 속성으로 지정할 수 있습니다.
테두리 두께는 숫자로 입력하며, 숫자가 클수록 테두리 두께가 굵어집니다.
표의 행과 열의 높이와 너비는 height="값" 및 width="값" 속성으로 지정할 수 있습니다. 값은 픽셀 단위로 입력합니다.
표의 셀의 배경색은 bgcolor="값" 속성으로 지정할 수 있습니다. 값은 색상 코드로 입력합니다.
표의 셀의 정렬은 align="값" 속성으로 지정할 수 있습니다. 값은 left, center, right 중에서 선택합니다.

② 다음은 표의 제일 상단 행의 부분을 배경색을 바꾸는 방법입니다. <tr styie="background-color: #000000;">에 원하는 색상만 바꿔서 <tr> 부분에 붙여 넣기 하거나 직접 입력합니다.

표 배경색.txt

0.00MB

색상표 보러가기

③ 셀 하나의 배경색은 그 행에 배경색상코드를 넣어 주면 됩니다. "background-color: #00000;" 이 코드를 다음 위치코드 안에 넣어줍니다. <td style="width:33.3333%; text-align : center;">4 <td> 부분에 <td style=이 부분에"background-color: #00000;" "width:33.3333%; text-align : center;"> 넣어 주고 기본모드로 돌아가면 4번 부분에 배경색이 변경되면 코드도 아래 이미지와 같이 변경됩니다.

- 이런 방법으로 간편하게 배경코드만 넣어서 변경할 수 있습니다.

<td style="width:33.3333%; text-align : center;">4 <td> → 변경 전
<td style=이 부분에 "background-color: #00000;" "width:33.3333%; text-align : center;">4 <td>→ 변경 후

<td style="width:33.3333%; text-align : center;">7 <td> → 변경 전
<td style=이 부분에 "background-color: #00000;" "width:33.3333%; text-align : center;">7 <td> → 변경 후

3. 표 이중 테두리 설정 방법

표에 이중 테두리 설정 하는 방법은 HTML에서 수정하면 됩니다.

- 표 이중 테두리 설정 코드

<table style="border-collapse: collapse; width: 48.2558%;" border="1" data-ke-align="alignLeft">
<table style="border-collapse: separate; border-spacing: 3px 3px; width: 100%;" border="1" data-ke-align="alignLeft">로 변경해 줍니다.
표크기와 이중 테두리 간격을 조절하여 설정할 수 있습니다.

표 이중 테두리.txt

0.00MB