포스트 테이블 만들기 (Websimon Tables 플러그인)

포스트 테이블 만들기

포스트 글쓰기 영역에 테이블을 만드는 것은 글쓰기 편집기에서 html 탭을 이용해서 사용해도 되지만, 같은 형식의 테이브을 자주 사용할 경우은 플러그인을 활용하는 편이 좋습니다.

특히, 테이블로 본문 내용을 꾸미게 되면, 정보들을 일목요연하게 보여주고, 수치화된 자료나 명확한 정보전달이 가능해 전달할 내용을 더욱 깔끔하고 효율적으로 전달할수 있습니다. 여기서 추천하는 플러그인은 테이블 플러그인 중 ‘Websimon Tables’입니다.

이 플러그인은 HTML, PHP에 대한 웹지식이 없어도 표를 빠르고 쉽게 만들 수 있는 인기 플러그인중 하나입니다.

플러그인 설치 후 활성화되면 알림판>도구> Websimon Tables 메뉴가 보이고 오른쪽에 아래 그림과 같이 플러그인의 화면이 보입니다.

 

Websimon Tables1

<그림 알림판-도구-Websimon Tables 클릭>

 

1) 테이블만들기

[Havard Law]라는 제목의 가로3줄, 세로2줄의 테이블을 만들어보겠습니다. 테이블을 만들기 위해서는 아래그림과 같이 테이블의 이름과 숫자를 입력 후 [Add Table]를 클릭하면 [ALL TABLES]에 해당테이블의 숏코드와 PHP 코드가 생성된 것을 확인할 수 있습니다.

Websimon Tables2
<그림 알림판-도구-Websimon Tables-Add a Table (테이블 생성화면)>

위 그림의 내용을 설명하면 다음과 같습니다.

[Add a new Table]
– Table Name : 작성할 테이블의 이름을 입력합니다.
– Number of Rows : 행(가로)의 수
– Number of Columns : 열(세로)의 수

[ALL TABLES]
– NAME: 위 그림에서 입력했던 이름이 표시되고, Rename을 클릭하면 이름 변경이 가능합니다,
– Rows x Cols: 해당 테이블의 행,열이 표시되며, 변경은 Edit라는 항목에서 가능합니다.
– Shortcode : 해당테이블의 Short Code로, 추후 포스트에 이 숏코드를 붙여넣기 하면 작업이 훨씬 간단해집니다.
(참고로 Id=’숫자’는 테이블이 만들어진 순서대로 자동적으로 부여되는 숫자로 여기서는 이 테이블이
5번째로 만들어진 테이블이라는 의미입니다.)
– PHP code : 해당 테이블의 PHP Code 이며, HTML모드에서 붙여넣기를 할수 있습니다.
– Edit: 테이블 행,열 조정, 내용 입력 및 스타일 설정, 복사, 삭제할 수 있습니다.

 2) 테이블 내용 입력하기

테이블안의 내용을 입력하기 위해서 해당테이블의 [Edit tables Content]를 클릭하면아래 그림과 같이 화면이 보입니다.
내용을 입력 후 [Save Table Content] 버튼을 클릭하면 아래에 테이블이 만들어지며 저장한 즉시 [그림 6]과같이 미리보기가 가능합니다.

Websimon Tables3

<그림 알림판-도구-Websimon Tables-Edit Table Content-테이블내용 입력 화면>

 

3)테이블 꾸미기

아래그림과 같이 [Table Settings]에서는 테이블의 스킨 및 텍스트크기, 셀의 가로세로 크기등 테이블의 디테일한 부분을 원하는 대로 꾸밀 수 있습니다.

Websimon Tables4
<그림 알림판-도구-Websimon Tables-Edit Table Structure & Style -Table Settings 화면>

위 그림의 항목을 설명하면 다음과 같습니다.

Skin: 스킨은 총 11가지가 있으면, 취향에 따라 선택하실수 있습니다. 별도로 지정하지 않으면 기본으로 Minimilist White가 적용됩니다.
– Font size Table Header : 항목의 글자크기
– Line height Headlines: 항목셀의 테이블높이
– Text Align Headlines: 항목의 텍스트 위치
– Font size Table Body: 내용의 글자크기
– Line height body text: 내용셀의 테이블 높이
– Horizontal text align body: 내용셀의 가로 위치
– Vertical text align body: 내용셀의 세로 위치
– Fixed table width : 고정테이블넓이
– Custom cell padding : 셀의내용과 셀테두리사이의 거리
– Number of Rows : 열의 갯수
– Number of Columns: 행의 갯수
– Column width: 행넓이 (전체 100%기준으로 각 행마다 넓이를 정하면 됩니다)

4) 작성된 테이블 포스트에 넣기

이제 해당테이블의 숏코드를 복사해서 포스트안에 붙여넣기만 하면 되는데 숏코드는 아래그림과 같이 Shortcode 박스안의 [ws_table id=”1”] 에서 확인할 수 있습니다. 참고로 id=”숫자”는 테이블이 만들어진 순서에 따라 자동적으로 발생됩니다.

아래그림은[Havard Law]라는 워드프레스로 만든 해외사이트에 대한 설명을 테이블을 이용하여 작성한 포스트입니다. 테이블없이 그냥 작성하는 것보다 테이블을 이용하면 더욱 깔끔한 포스팅을 할 수 있습니다.

Websimon Tables5

<그림 테이블을 이용하여 작성한 포스트 화면>

아래그림은[Havard Law]라는 워드프레스로 만든 해외사이트에 대한 설명을 테이블을 이용하여 작성한 포스트입니다. 테이블없이 그냥 작성하는 것보다 테이블을 이용하면 더욱 깔끔한 포스팅을 할 수 있습니다.

 

Websimon Tables6
<그림 테이블을 이용하여 작성한 포스트 화면>

2013년 March 30일 / 워드프레스 플러그인

Share the Post

About the Author

Comments

No comment yet.


Warning: strpos() expects parameter 1 to be string, array given in /free/home/topshock/html/wp-includes/shortcodes.php on line 190

Warning: preg_match() expects parameter 2 to be string, array given in /free/home/topshock/html/wp-includes/shortcodes.php on line 201
Leave a Reply

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.

Cart

  • No products in the cart.

Login