표 중앙정렬 하는 법(table center align)

안녕하세요. 개발자 드리머즈입니다.

티스토리 블로그로 글을 쓸 때 표를 포함했더니 아래 사진처럼 왼쪽 정렬이 되버렸습니다.

포스트 작성 화면에서 아무리 중앙 정렬 버튼을 눌러도 중앙정렬이 안되더라구요. 그래서 어떻게 표를 중앙정렬 시키는지 찾아봤습니다. 몇 가지 방법이 있겠지만 그 중에서 CSS를 이용해서 표를 중앙정렬하는 방법이 가장 좋은 방법 같습니다.

1. CSS 편집 페이지 가기

[관리자] > [꾸미기] > [스킨 편집]을 클릭합니다.

바뀐 화면의 우측 상단에 있는 html편집 버튼을 클릭합니다.

다시 바뀐 화면에서 CSS 버튼을 클릭합니다.

2. table 관련 속성 설정하기

위 사진에서 빨간색으로 표시한 코드가 표 중앙정렬을 위해 추가한 코드입니다. 

여기 CSS 화면에서 하는 설정들은 블로그내의 모든 페이지에 적용됩니다.

따라서 과거에 적었던 포스트의 표도 중앙정렬 됩니다.

table {
    margin-left:auto;
    margin-right:auto;
}

복사가 쉽도록 텍스트 코드도 첨부합니다.

코드 추가 후에 저장 버튼을 눌러 적용시킵니다.

3. 결과 확인

예쁘게 잘 정렬됐습니다!

4. 주의사항

티스토리에서 표를 만들면 표의 폭(width)이 고정되어 있습니다. 반응형 스킨처럼 표도 화면의 크기에 따라 조절되게 만들어야 합니다.

아래의 절차를 따라주세요.

표를 만든 뒤에 우층 상단의 HTML 버튼을 클릭합니다.

표를 의미하는 <table>의 속성을 잘 보면 width="964"와 같이 고정된 수치가 있습니다. 이 값을 width="85%"로 수정합니다. 90%도 괜찮습니다. 마음에 드는 값을 선택하시면 됩니다.

이렇게 수정하면 표의 크기는 고정된 게 아니라 마치 반응형 스킨처럼 화면의 크기에 따라 변하게 됩니다. 그리고 위처럼 85%처럼 했을 때 좌우의 남는 공간(margin)은 CSS에 의해 자동조절되므로 표는 중앙정렬됩니다.

화면의 크기가 작을 떄

화면의 크기가 커졌을 때