워드프레스 표(table) 만들기 2

표(table) 만들기 1’에서 소개한 글에 이어 이번에는 좀 더 복작한 표를 만들어 보겠습니다.

표(table) 만들기 1 글 보기 : http://makebct.net/1635?cat=148

 

1. 표 삽입하기

표(table) 만들기 1’에서와 같은 방법으로 다음과 같은 표를 만들었습니다.

zpost_08img08

 

셀을 합치기 위해 해당 셀들을 선택 후, 에디터의 [표] > [셀] > [셀 병합]을 클릭하여 셀을 합쳐줍니다.

zpost_08img09

 

 

 

구분을 위해 에디터의 [표] > [셀] > [열 속성]을 이용하여 다음 그림과 같이 표를 만들었습니다.

zpost_08img10

 

2. 표를 정교하게 설정

위에서 만들어진 표에서 각 열의 가로폭을 지정하여 너비를 조정해 보겠습니다.

첫 번째 열 ’header 1’을 선택한 후, 에디터의 [표] > [셀] > [열 속성] 에서 폭을 15%로 지정합니다.

반응형에서 보여지는 걸 고려하여 가로폭은 %로 작성합니다.

zpost_08img11

 

 

위와 같은 방법으로 header 2를 제외한 header 1~5까지 각각의 너비를 %로 입력하였습니다.

이렇게하면 표 전체 너비 100%에서 나머지 Header 1, 3, 4, 5에 지정된 너비를 뺀 만큼 header 2에 해당하는 열 너비가 자동으로 할당됩니다. 홈페이지에 나와 보면 다음 그림과 같이 출력됩니다.

zpost_08img12

 

 

3. 각 셀의 안쪽 여백 설정하기

만들어진 표를 보면 글자들이 표의 테두리 선에 다닥다닥 붙어있어 보기가 좋지 않습니다.

셀의 안쪽에 여백을 두어 보기 좋게 만들기 위해 표를 만들고 있는 ’글 작성창’에서 [텍스트] 모드로 전환합니다.

 

해당 표의 셀 여백을 주기 위해 아래 그림과 같이 표에 ’table01’이라고 class를 지정해 줍니다.

zpost_08img13

 

[관리자] > [외모] > [custom CSS]에서 추가 스타일을 작성해 줍니다.

/* 지정한 표의 셀 여백 */
table.table01 td {padding: 5px;}

 

 

홈페이지에서 보면 각 셀의 안쪽에 여백이 생겨 보기좋게 작성되었습니다.

예제보기 : http://makebct.cafe24.com/?p=153

zpost_08img14

 

Leave a Reply

Your email address will not be published. Required fields are marked *

인기 글

Ubuntu 22.04 LTS에 Python 3.8 or 3.9 설치 방법
서버 : Vultr 클라우드OS: Ubuntu 22.04 LTS사용자 계정 생성하여 설치 진행함1. Start with the system updatesudo apt update...
오라클 클라우드 OCI 가입 드디어 성공 했습니다 (상세 후기)
2023년 2월 16일에 ‘오라클 클라우드 지급 검증 실패 글‘을 남긴 적이 있습니다.그 때 검색을 통해 해결 방법을 찾아 보았고, 당시 성공했던 분들의...
WSL2/Ubuntu 22.04 LTS에 Anaconda 설치 
WSL2/Ubuntu 환경에서 Python 버전별로 가상환경을 만드는 방법 중 그나마 Anaconda 방법이 좋은 것 같네요. 설치 방법은 간단합니다.1. apt update사용자...
Ubuntu 20.04에 MySQL 5.7 설치
비씨티원 인공지능 서비스 플랫폼 BAP(Bctone AI service Platform)의 설치 환경은 공식적으로 Ubuntu 18.04와 MySQL 버전 5.7 입니다. 최근 Ubuntu...
사용자 작성 모듈 import 시 에러)(ModuleNotFoundError: No module named
파이썬 모듈을 만들고 테스트 할 때 ModuleNotFoundError: No module named 에러가 발생한 경우원인파이썬은 모듈을 불러올 때 모듈 설치 경로와 자신의...