워드프레스로 글을 쓰면서 표를 삽입할 일이 많이 있으실 겁니다. 표 삽입 플러그인으로 많이들 사용하는 TablePress 표 너비 설정 방법을 알아보고자 합니다. 구체적으로, TablePress로 삽입한 표의 열에 대한 너비(width)를 설정하는 방법을 알아보고자 합니다.
또한, 셀 내의 텍스트를 가운데로 정렬하는 방법도 함께 알아보겠습니다.
1. 표 새로 추가
관리자 페이지의 사이드 메뉴에서 TablePress를 살펴보시면 표를 새롭게 추가할 수 있습니다.
표 이름, 설명과 행 개수, 열 개수를 입력하고 표추가를 클릭하면 표가 새로 생성됩니다.
새로 표가 생성되었다면 열 너비를 설정해줄 표의 ID를 체크해 둡니다. 저는 3번 ID를 가진 표의 너비를 설정해 보겠습니다.
2. TablePress – 플러그인 옵션
먼저 워드프레스 관리자 페이지에서 TablePress 메뉴의 플러그인 옵션을 선택해서 들어갑니다. 플러그인 옵션에서 사용자 정의 CSS를 추가하는 방식으로 표 설정을 변경할 겁니다.
3. TablePress 표 너비 설정 CSS
설정하는 방법은 아래의 사용자 정의 CSS 필드에 설정 코드를 몇 줄 추가하는 것으로 간단하게 해결됩니다.
아래에서는, 위의 사용자 정의 CSS에 입력할 코드를 알아보도록 하겠습니다.
(1) 1개 표의 1개 열에 대한 설정
사용자 정의 CSS 칸에 아래 코드를 입력합니다.
.tablepress-id-N .column-1 {
width: 30px;
}
아까 위에서 생성한 표의 ID는 3이기 때문에 위의 N 대신에 3을 입력합니다. column뒤의 숫자는 열 번호를 의미합니다. 위의 코드를 해석해 보자면, N번 id 표의 첫 번째 열에 접근하겠다는 의미입니다.
width는 픽셀 단위로 입력하지면 됩니다. 이 때, 본인의 워드프레스 테마의 컨테이너 설정에 따라서 최대 너비가 다를 수 있기 때문에 처음에는 숫자 몇 개를 넣어보고 대충 어느 정도 크기로 보이는지 확인을 해 보시면서 진행하시길 권해드립니다.
(2) 여러 열에 대한 설정
여러 개의 열을 한 번에 수정하고자 할 경우에 아래와 같이 입력하시면 됩니다.
.tablepress-id-N .column-1,
.tablepress-id-N .column-2 {
width: 30px;
}
첫 번째 열과 두 번째 열의 너비를 모두 30px로 설정하겠다는 의미가 되겠습니다.
(3) 패딩(들여쓰기) 넣기
표의 셀 내부에 내용이 기재되는 텍스트와 셀 경계 사이에 패딩을 추가함으로써 들여쓰기 효ㅗ가를 주는 것도 가능합니다.
.tablepress-id-N .column-2 {
padding: 3px;
}
width 대신에 padding을 입력하는 것으로 간단하게 해결됩니다.
(4) 셀 내부 텍스트 가운데 정렬하기
셀 내의 글자를 가운데 정렬하고자 하는 경우에는 아래와 같이 text-align: center를 통해 간단하게
.tablepress-id-N .column-2 {
test-align: center;
width: 30px;
}
4. TablePress FAQ 게시판 이용하기
사람들이 자주 묻는 질문은 아래 TablePress 공식 페이지에서 제공하는 FQA를 활용하면 쉽게 확인할 수 있으니 참고하세요!