makeBCT

#AI #OpenAI #Chatbot #Cloud #WordPress

워드프레스 표(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 *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

인기 글

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사용자...
AWS 인스턴스 유형 변경 방법
AWS 인스턴스 유형을 변경하기 위한 방법에는 다음 2가지가 있습니다.   1. 첫 번째 방법 AMI 이미지 생성 후 해당 이미지를 복원하여 신규 EC2 인스턴스를 생성하는...
회사 도메인으로 무료 회사 메일 만드는 방법 정리
회사 도메인으로 무료 메일 만드는 방법에는 네이버, 다음, 구글 메일서버를 이용하는 방법이 있었는데, 근래 네이버, 구글의 ㄱㅇ우 유료 서비스로 전환되어 현재는 Daum 스마트워크를...

BCT Ai Chatbot

답변을 준비중입니다 . . .