안녕하세요. EG 지식창고입니다.
이번 포스팅에서는 티스토리에서 표 테이블 배경색 및 테두리 지정 방법 등에 대해 알아보도록 하겠습니다.
티스토리 에디터에서 정말 불편한 것이 한 두가지가 아닌데요.
그 중에 표 디자인 하기가 너무 까다로운 것 같습니다.
오늘 이 포스팅을 작성하는 이유 중 하나는,
여러 블로그를 돌아다녀보면 글 본문의 제목 등을 표를 사용해 예쁘고 가독성있게 해 둔것이 부러웠습니다.
이를 위해서는 일단 HTML에 대한 지식이 필요하긴 하지만,
실제로 많이 활용되고, 티스토리 기본 에디터에서 아쉬운 부분을 위주로 알려드리도록 하겠습니다.
| 표로 제목 꾸미기 |
저는 이 포스팅을 바로 위에서 보이는 것과 같이 제목을 예쁘게 꾸미고 싶어서 였습니다.
그래서 혹시 이를 목적으로 하시는 분이 있다면 아래까지 읽는 것이 번거로울 것 같아
그냥 소스를 드리니 형광색 부분만 수정해서 사용하시기 바랍니다.~
에디터 모드를 우측 상단에서 [기본모드]에서 [HTML]로 바꾸셔야 합니다.
<table style="width: 100%; border: 0px;">
<tbody>
<tr>
<td style="width: 2%; border: none; background: #333399;"> </td>
<td style="width: 98%; border-top: none; border-right: none; border-bottom: solid 2px #979797; border-left: none;"> </td>
</tr>
</tbody>
</table>
width: 2% 왼쪽 셀의 크기
border: none 왼쪽 셀 전체에 테두리를 없앰
background: #333399 왼쪽 셀의 배경색(인터넷에서 색상코드를 검색해서 넣으세요~)
width: 98% 오른쪽 셀의 크기
border-top / right / left: none 오른쪽 셀의 상단 / 오른쪽 / 왼쪽 테두리를 없앰
border-bottom: solid 2px #979797 오른쪽 셀의 아래측 테두리를 실선으로 두께는 2px 테두리 색상을 설정
※ 티스토리에서 표 안의 글자 크기는 스킨편집을 통해 해야 하는 매우 복잡한 과정이라 생략하겠습니다.
그리고 제목을 위해 계속 이런식으로 하기도 번거로우니,
서식으로 만들어두시고, 클릭 한 번으로 가져오는 것이 좋겠죠.
티스토리 서식 적용방법은 이 포스팅과는 직접적인 관련이 없어 다루기 그러니
"티스토리 서식"으로 웹에서 검색하면 많은 글이 있으니 참고하시기 바랍니다.
| 표 배경색 설정하기 |
다음의 표와 HTML 소스를 보면서 설명을 드리도록 하겠습니다.
| ① | ② |
| ③ | ④ |
<table style="width: 60%; border-collapse: collapse; border: 4px solid #000000; background-color: #ffff00;">
<tbody>
<tr style="background-color: #ff0000;">
<td style="width: 30%; border: 1px solid #000000;">①</td>
<td style="width: 30%; border: 1px solid #000000;">②</td>
</tr>
<tr>
<td style="width: 30%; border: 1px solid #000000; background-color: #0000ff;">③</td>
<td style="width: 30%; border: 1px solid #000000;">④</td>
</tr>
</tbody>
</table>
위의 코드를 가지고 html의 표의 구조를 짧게만 설명드리자면
<table style= ~> 전체 표의 스타일을 정합니다. => 모든 셀에 적용됨.
<tr style= ~> tr은 한 행 전체를 의미하므로 행 한 개의 스타일을 정합니다. => 지정된 행에만 적용됨.
<td style= ~> td는 셀 하나를 의미하므로 셀 한 개의 스타일을 정합니다. => 모든 셀에 적용됨.
이제 위 테이블의 배경색에 대해 설명드리면,
<table style= .... background-color: #ffff00;"> 표 전체에 노란색(ffff00)을 배경으로 지정 ①~④
<tr style="background-color: #ff0000;"> 첫 번째 행 전체에 빨간색(ff0000)을 배경으로 지정 ①~②
<td tdyle= ... background-color: #0000ff;"> 두 번째 행의 첫 번째 셀에 파란색(0000ff)을 배경으로 지정 ③
④셀에는 따로 배경색을 지정하지 않았으므로 표 전체의 배경인 노란색이 됨.
| 표 테두리 설정하기 |
이제 가장 어려운 난이도인 표의 테두리 설정에 대해 알아보겠습니다.
다음 표와 HTML 소스를 살펴보겠습니다.
<table style="width: 60%; border-collapse: collapse; border: 0px;">
<tbody>
<tr style="border: dashed 5px #FF0004;">
<td style="width: 30%;"> </td>
<td style="width: 30%;"> </td>
</tr>
<tr bgcolor="#00FF00">
<td style="width: 30%; border-top: solid 1px #000000; border-right: 0px; border-bottom: 5px dotted #FFFF00; border-left: none;"> </td>
<td style="width: 30%;"> </td>
</tr>
</tbody>
</table>
<table style="width: 60%; border-collapse: collapse; border: 0px;">
● width: 60% 표 전체의 크기를 화면의 60%로 설정 / 크기는 % 또는 px(픽셀 사용)
● border-collapse는 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 어떻게 처리할 지 정합니다.
- separate: 기본값(따로 지정하지 않으면 separate값을 가지게 됩니다.), 표의 테두리와 셀의 테두리 사이에 간격을 둡니다. 다음 표를 참고하세요.
- collapse: 표의 테두리와 셀의 테두리 사이의 간격을 없앱니다. 겹치는 부분은 한 줄로 나타냅니다. 다음 표를 참고하세요. (특별한 경우가 아닐 경우 collapse 추천)
● border: 0px 표의 테두리를 보이지 않게 했습니다. 저도 html에 대해 썩 잘 아는 편이 아니어서 상세히 설명은 못드리겠으나, 특정한 셀에 특정한 테두리를 지정하고 싶다면 표의 테두리는 0px로 할 것을 권장드립니다. 각 셀에 특정한 테두리를 설정한다 해도 표(table)의 테두리가 간섭을 하기 때문입니다.
<tr style="border: dashed 5px #FF0004;"> 하나의 행 전체에 대한 테두리 설정
● border: dashed 5px #FF0004
- dashed: 선 모양(solid: 실선, dashed: 파선 ----, dotted: ···, double: 이중실선 등)
- 5px: 테두리 두께
- #FF0004: 테두리 색상
<td style="width: 30%; border-top: solid 1px #000000; border-right: 0px; border-bottom: 5px dotted #FFFF00; border-left: none;"> 한 개의 셀에서 상하좌우 테두리 각각 설정
| 표 가운데 정렬 |
마지막으로 표를 본문 가운데 배치해보도록 하겠습니다.
이것은 아주 쉽습니다.
다음 표와 소스코드를 보도록 하겠습니다.
<div align="center">
<table style="border-collapse: collapse; width: 20%; background-color: #3BAEA1;" border="1">
<tbody>
<tr>
<td style="width: 10%;"> </td>
<td style="width: 10%;"> </td>
</tr>
<tr>
<td style="width: 10%;"> </td>
<td style="width: 10%;"> </td>
</tr>
</tbody>
</table>
</div>
위 코드에서 보시듯,
<table>위에 <div align="center">
</table> 아래에 </div>만 추가하시면 됩니다.
이 포스팅은 여기까지입니다.
내용은 별로 없는데, 글을 작성하는 데는 꽤나 많은 시간이 걸렸네요.
그럼 티스토리에서 예쁜 표를 꾸며보시기 바랍니다.~
댓글