티스토리 표 폭 전체 채우기와 중앙 정렬 방법

티스토리 글을 작성하다 보면 표를 넣었는데 폭이 들쭉날쭉하거나 한쪽으로 치우쳐 보여서 전체 글이 정리되지 않은 느낌이 들 때가 많습니다.

특히 지원금 안내 글, 비교 글, 가격표, 절차 정리 글처럼 표가 핵심 정보 역할을 하는 글에서는 표의 정렬 상태가 글의 신뢰도와 체류 시간에 직접적인 영향을 줍니다.

이런 문제로 고민하고 계시다면 아래 방법을 하나씩 살펴보시면 도움이 됩니다.

이번 글에서는 CSS 수정이나 스킨 편집 없이, HTML 코드만으로 표를 본문 폭에 맞게 전체 채우고, 표 자체를 화면 중앙에 배치하는 가장 안정적인 방법에 대해서 알아보겠습니다. 바로 확인해 보시기 바랍니다.

티스토리 표가 깨져 보이는 이유

티스토리 기본 에디터에서 표를 삽입하면 별도의 크기 설정이나 정렬 속성이 적용되지 않은 상태로 출력됩니다.

이 상태에서는 브라우저 환경이나 기기 해상도에 따라 표의 폭이 제각각 달라지고, 모바일 화면에서는 특히 보기 불편한 형태로 나타나는 경우가 많습니다.

따라서 작성자가 직접 표의 폭과 정렬 방식을 지정해 주는 것이 필수적인 관리 작업이 됩니다.

먼저 표 정렬 설정을 하려면 HTML 모드로 전환해야 합니다.

티스토리 글쓰기 화면 오른쪽 상단에 기본모드를 클릭하면 ‘HTML’이 나옵니다.

이 버튼을 누르면 기존에 작성한 글이 코드 형태로 바뀌어 보이는데, 이 화면이 바로 HTML 편집 화면입니다.

처음 보면 조금 낯설 수 있지만 표를 다루기 위해서는 꼭 거쳐야 하는 단계입니다. 수정이 끝난 뒤에는 다시 기본 모드로 돌아와서 글을 이어서 작성하면 됩니다.

우선 HTML 모드에서 'table'을 찾아야 합니다.

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

table style 부분을 찾아 다음과 같이 숫자만 100 %로 변경하면 표의 본문 폭 전체 채우기가 가능합니다.

table style="width:100%

이 설정 하나만으로도 표 가독성은 크게 개선됩니다.

표의 폭이 100%가 아닌 경우, 또는 일부 표만 작게 표시해야 하는 상황에서는 표 자체를 화면 중앙으로 이동시키는 작업이 필요합니다. 이때 가장 간단한 방법은 table 태그에 자동 여백을 적용하는 방식입니다.

위의 자료처럼 '<div align="center">'를 '<table style= 위에 추가합니다.

다음으로 아래 자료와 같이 표를 닫는 태그 </table> 아래에 '</div>'를 추가해 'div' 태그를 닫아줍니다.

정렬된 표는 단순히 보기 좋은 수준을 넘어, 방문자가 정보를 이해하고 글에 머무르는 시간을 늘리는 핵심 요소가 됩니다.

표가 삐뚤어져 보이거나 화면을 벗어나면 방문자는 내용을 신뢰하지 않게 되고 이탈 확률이 급격히 높아집니다.

반대로 정돈된 표는 전문성과 신뢰도를 동시에 높여 주며, 특히 애드센스 승인과 장기적인 블로그 품질 관리 측면에서도 중요한 요소가 됩니다.

티스토리에서 표를 본문 폭에 맞게 전체 채우고 중앙 정렬하는 작업은 복잡한 설정 없이 HTML 코드 몇 줄만으로 충분히 해결할 수 있습니다.

이 방법만 익혀 두면 표가 많은 글도 언제나 깔끔하게 유지할 수 있습니다.

표 전체 채우기와 중앙 정렬을 기본 습관으로 적용해 보시면 블로그 글의 완성도와 방문자 만족도가 확실히 달라질 것입니다.