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 update sudo apt update...
AWS 인스턴스 유형 변경 방법
AWS 인스턴스 유형을 변경하기 위한 방법에는 다음 2가지가 있습니다.   1. 첫 번째 방법 AMI 이미지 생성 후 해당 이미지를 복원하여 신규 EC2 인스턴스를 생성하는...
사용자 작성 모듈 import 시 에러)(ModuleNotFoundError: No module named
파이썬 모듈을 만들고 테스트 할 때 ModuleNotFoundError: No module named 에러가 발생한 경우 원인 파이썬은 모듈을 불러올 때 모듈 설치 경로와 자신의...
Input error: k: Format of site key was invalid 에러 해결 방법
WP-Members 워드프레스 플러그인을 활용해서 회원가입 기능을 구현 하였는데, 다음과 같은 에러가 발생 하였습니다.         이는 WP-Members의...
오라클 클라우드 OCI 가입 드디어 성공 했습니다 (상세 후기)
2023년 2월 16일에 ‘오라클 클라우드 지급 검증 실패 글‘을 남긴 적이 있습니다. 그 때 검색을 통해 해결 방법을 찾아 보았고, 당시 성공했던 분들의...