티스토리 테이블 표현 방법 알아보기

포스팅을 할 때 가장 유용하게 자주 사용하는 것 중에 하나가

바로 테이블<table> 입니다.

전반적인 정보와 데이터를 한눈에 쉽게 볼 수 있기 때문입니다.

 

그러면 Table의 생성, 표현 등 다양한 방법들을 알아보겠습니다.

 

먼저, [테이블을 만드는 방법] 입니다.

 

필요한 태그들을 보면.

<table> : 테이블을 정의하고, 생성하는 태그

<th> : 테이블의 헤더부분을 만드는 태그

<tr> : 테이블의 행을 만드는 태그

<td> : 테이블의 열을 만드는 태그입니다.

 

위 태그들을 사용하여 간단한 '미니 테이블'을 만들어 보았습니다.

 

      ◈ 참고, <table border="1">  ⇒ 테이블의 테두리를 설정해주는 속성

                       <th>테이블 #1</th>  ⇒ 테이블 헤더부분으로, Default로 굵게 표기

반응형

다음은, [행과 열을 병합] 하는 속성들입니다.

 

<td> 와 <th> 태그와 같이 사용하는데.

* rowspan :

현재 셀에서 세로 방향으로 인접한 n개의 셀을 병합합니다.

 

* colspan :

현제 셀에서 가로 방향으로 인접한 n개의 셀을 병합합니다.

 

아래는 “colspan” 속성의 예제입니다.

 

◈ 참고, <align = “Center”> ⇒ 병합된 셀의 글자를 가운데로 정리

---

그리고, 테이블의 다양한 [디자인을 설정] 할 수 있는

대표적인 속성들을 알려드리겠습니다.

 

* border : 테이블의 테두리를 설정해주는 속성입니다.

(border="1") 숫자가 높을수록 테두리가 두꺼워집니다.

* bordercolor : 테두리의 색상을 지정하는 속성입니다.

(bordercolor="blue") default 는 검정색입니다.

 

* width & height : 테이블의 크기를 결정해주는 속성입니다.

(width=50px width=100%)픽셀단위로 크기,비율로 줄 수 있습니다.

* align : 테이블안에 있는 값들을 정렬시키는 기능입니다.

* bgcolor : 원하는 태그의 배경색을 설정할 수 있습니다.

 

한번씩 사용해 보시면 금방 아실 수 있을 겁니다.

이런 테이블을 html로 작성시에는 조금 번거로울 수 있는데,

티스토리에서는 간단하게 테이블을 작성하는 툴을 제공하고 있습니다.

 

글쓰기 화면에서 상단에 “테이블” 이라는 메뉴가 있으니 활용하시면 됩니다.

 

 

만들어진 테이블에서 위 테이블 디자인 속성에 대한

기능들을 거의 모두 제공하고 있답니다.

 

 

한가지, 테이블이 왼쪽으로 치우쳐 있는데

'중앙 배열'시 별도로 html 편집을 해 줘야 합니다.

 

글쓰기 상단 메뉴에서 기본모드를 “HTML”로 변경하여

<table style> 앞에 <div align="center">를 넣어주면 됩니다.

 

 

 이제 테이블 만드는 방법 아셨으니

포스팅 작성 하시는데 도움이 되셨으면 좋겠습니다.