Welcome to the Matrix

티스토리 글 작성 시 테이블(표) 가운데 정렬하는 방법 본문

Tips/Tistory

티스토리 글 작성 시 테이블(표) 가운데 정렬하는 방법

haru.keiko 2020. 12. 23. 10:48

티스토리 테이블 가운데 정렬하는 방법

티스토리 글을 작성하다가 당황스러운 경험을 하게 됐습니다. 

 

테이블을 이용해 표를 만들 일이 있었는데요, 표 안의 내용은 가운데 정렬이 되는데.. 

왜 표 자체는 가운데 정렬이 안 되는 거죠?? 

 

그래서 알아봤습니다. 

 

티스토리 글 작성 시 테이블(표) 가운데 정렬하는 방법!!!

일단 놓인 상황에 대해 설명을 드리자면..

 

아래와 같이 표를 만들고 있었습니다. 

표의 내용을 가운데 정렬하고 난 후, 표를 가운데 정렬을 하려고 하는데...

메뉴 어디를 봐도 표를 가운데 정렬하는 방법을 찾을 수가 없었습니다..

중앙 정렬이 안된 티스토리의 테이블

이건 뭔가요... 

 

검색의 힘을 빌려 알아보니,

작성하는 티스토리 글의 'html에서 소스 코드를 수정'하여 처리하는 방법이 있다고 하네요.

 

그래서 도전!!

 

먼저 현재 작성하는 글을 'HTML' 모드로 변환해야 합니다. 

티스토리 글 장성 에디터의 오른쪽 상단에 보면, '기본 모드'라는 게 있어요. 이걸 클릭하면 'HTML' 모드로 전환할 수 있습니다.

 

그런데...

티스토리에 '마크다운' 모드도 있었군요!!

티스토리 글작성 에디터 모드를 html로 변경

 

HTML 모드로 에디터를 전환하면, 아래와 같이 무지막지한 화면을 볼 수 있어요... 

이 많은 암호들 중에서 'table'이란 녀석을 찾아야 해요. 

간단하게 'Ctrl + F'로 table을 검색하면 쉽게 찾을 수 있습니다. 

티스토리 html 에디터에서 table을 검색

 

아래처럼 '<div align="center">''<table' 위에 추가합니다. 

'div'라는 녀석은 'html 태그'라고 하는데, html에서 웹 문서의 내용을 그룹 단위로 배치할 때 사용할 수 있다고 합니다. 즉, 표를 의미하는 코드 '<table>~</table>'를 하나의 그룹으로 보고, 이 전체에 대해 어떤 조치를 취한다고 볼 수 있죠.

여기서는 'align="center"'라고 했으니, 표를 가운데 정렬하겠다는 의미인 것 같네요. 

잘은 모르겠는데, 대충 그렇다는 의미로 저는 이해했습니다. ^^

 

일단 코드를 수정하고 확인해 보죠~

티스토리 html 에디터에서 talbe 태그 위에 div align을 center로 추가한다.

 

표를 닫는 태그(</table>) 아래에 '</div>'를 추가해 'div' 태그를 닫아줍니다. 

이 코드의 '<div>~</div>'가 하나의 그룹으로 어떤 변화가 생기는 것 같습니다. 

div태글르 table 닫는 태그 아래에 추가한다.

 

간단하게 html 소스 코드를 수정했으면, 다시 에디터를 기본 모드로 전환합니다. 

어떻게 기본 모드로 전환하는지 다들 아시죠?

테이블 div align을 수정한 후 기본모드로 변경한다.

 

오호~!!!

원하던 대로 표가 가운데 정렬된 모습을 볼 수 있습니다. 

티스토리에서 표정렬이 완성된 티스토리 표

 

어때요?

html 소스 코드를 수정해서 표 가운데 정렬하기~ 참 쉽죠?

html에 'h'도 몰라도 할 수 있답니다~ ㅎㅎ

 

 

'Tips > Tistory' 카테고리의 다른 글

티스토리 모바일 스킨 설정 - html, css  (0) 2020.12.22